/* 字体 */ /*@font-face*/ /*{*/ /* font-family: APR;*/ /* src: url('/static/font/Alibaba-PuHuiTi-Regular.ttf');*/ /*}*/ /*@font-face*/ /*{*/ /* font-family: APB;*/ /* src: url('/static/font/Alibaba-PuHuiTi-Bold.ttf');*/ /*}*/ /*@font-face*/ /*{*/ /* font-family: APL;*/ /* src: url('/static/font/Alibaba-PuHuiTi-Light.ttf');*/ /*}*/ /*@font-face*/ /*{*/ /* font-family: APM;*/ /* src: url('/static/font/Alibaba-PuHuiTi-Medium.ttf');*/ /*}*/ /*@font-face*/ /*{*/ /* font-family: PFR;*/ /* src: url('/static/font/pingfang_regular.ttf');*/ /*}*/ /*@font-face*/ /*{*/ /* font-family: PFL;*/ /* src: url('/static/font/pingfang_light.ttf');*/ /*}*/ /* header */ #header {width: 100%; height: 70px; background: #fff;position: fixed; top: 0; left: 0; z-index: 101;} #header.cur{background: #fff; height: 70px; } #header.cur .head .hcon .hnav{height: 70px; line-height: 70px;} #header .head{ box-sizing: border-box;} #header .head .logo{/*margin: 12px 0;*/ display: flex; align-items: center;} #header .head .logo .name{color: #323232; font-size: 16px;font-family: APR; margin-left: 20px; padding-top: 10px;} /*#header.cur .head .logo{margin: 12px 0 0;}*/ #header .head .logo .i2, #header.cur .head .logo .i2{display: none;} #header .head .hcon{display: flex; align-items: center;} #header .head .hcon div{height: 70px; line-height: 70px;} #header .head .hcon .p1{color: #0055fb; font-size: 18px;font-family: APR; font-weight: bold; margin-right: 20px;} #header .head .hcon .p2{color: #646464; font-size: 14px;font-family: APR; font-weight: bold; margin-right: 10px;} #header .head .hcon .p3{width: 98px; height: 31px; color: #fff; font-size: 14px;font-family: APR; background: linear-gradient(to bottom, #1ab9fa,#1b5afa); text-align: center; line-height: 31px;} /* #header.is-scroll{transform: translateY(-100%);transition: top 0.8s cubic-bezier(0.42, 0.06, 0.08, 0.97),transform 0.8s cubic-bezier(0.42, 0.06, 0.08, 0.97);} */ #header .head .hcon .p3:hover{background: #146cfb;} #header .menu, .header-bg, .side-menu{display: none;} @media screen and (max-width: 1024px){ #header, #header.cur{background: #000; height: 90px;} #header .head .logo .i1, #header.cur .head .logo .i1{display: none;} #header .head .logo .i2, #header.cur .head .logo .i2{display: inline-block;} #header .head .hcon{display: none;} #header .head .logo, #header.cur .head .logo{margin: 27px 0;} #header .head .logo .name{margin-left: 18px; padding-top: 7px; font-size: 18px; font-family: APL; color: #fff; line-height: inherit;} #header .menu{width: 36px;height: 24px;margin: 28px auto;background: url(/static/images/edifice/m-menu.png) no-repeat center;background-size: cover;display: block; cursor: pointer;} .header-bg{background: rgba(0,0,0,0.5);z-index: 48;width: 100%;position:fixed;top: 0;bottom: 0;left: 0;right: 0;display: none;} #header.cur .menu,#header.on .menu{background: url(/static/images/menu.png) no-repeat center;background-size: cover; margin: 33px auto;} .header-bg.on{display: block;} .side-menu{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 100;transform: translateX(-100%);-webkit-transform: translateX(-100%);transition-property: transform;-webkit-transition-property: -webkit-transform;transition-duration: 0.5s;-webkit-transition-duration: 0.5s;display: block;} .side-menu.show{transform: translateX(0);-webkit-transform: translateX(0);} .side-menu .inner{position: absolute;left: 0;top: 0;width: 80%;height: 100%;padding-top: 40px;background: #fff;overflow-x: hidden;overflow-y: auto;border: solid 1px #ededed;border-top: none;} .side-menu .hd{padding: 0 32px;overflow: hidden;justify-content: space-between;-webkit-justify-content: space-between;} .side-menu .hd .logo{width: auto; margin: 0;} .side-menu .hd .logo img{width: 164px;height: 50px;} .side-menu .hd .icon-fork{zoom:2.5;} .side-menu ul {width: 90%; margin: 0 auto;} .side-menu ul > li{display: block; margin-top: 22px; color: #000; font-size: 26px; text-align: center;} .side-menu ul li .p3{width: 100%; background: #1a91fa; color: #fff; padding: 10px 0; text-align: center;} } @media (max-width: 750px) { #header .menu{margin: 32px auto;} } /* banner */ #banner{width: 100%; margin-top: 70px;} #banner .box{top: 20%; z-index: 5;} #banner .box>div{color: #fff;} #banner .box .p1{font-size: 40px; font-family: PFL;line-height: 57px;} #banner .box .p2{font-size: 70px; font-family: PFR;line-height: 87px; margin-bottom: 5px;} #banner .box .p3{font-size: 24px; font-family: PFL;line-height: 41px;} #banner .btn-list{bottom: 20%; z-index: 5;} #banner .btn-list .btn{color: #fff; padding: 11px 48px; border: 1px solid #24b8fc; background: #0055fb; margin-right: 25px; font-size: 20px; font-family: PFR;} #banner .btn-list .btn:hover{background: #24b8fc;} #banner.e-banner{height: 590px;} #banner.e-banner .back{height: 100%;} #banner .e-box{top: 20.2%;} #banner .e-box .p1{font-size: 20px; line-height: 30px; margin-bottom: 40px;} #banner .e-box .p2{font-size: 52px; line-height: 60px; margin-bottom: 30px; width: 45%;} #banner .e-box .p3{font-size: 28px; line-height: 36px;} #banner .e-btn{bottom: 15.5%;} #banner .e-btn .btn{padding: 13px 57px; background: #0055fb; color: #fff; border:0;} #banner .e-btn .btn:hover{background: #fff; color: #000034;} #banner .p-banner{height: 585px;} #banner .p-banner .slide .back{height: 100%;} #banner .p-banner .p-box .p1{font-size: 34px; line-height: 42px; margin-bottom: 22px;} #banner .p-banner .p-box .p2{font-size: 72px; line-height: 81px; margin-bottom: 23px;} #banner .p-banner .p-box .p3{font-size: 26px; line-height: 34px;} #banner .p-btn{bottom: 14.3%;} #banner .p-banner .p-box1 .p2{width: 45%; } #banner .p-banner .p-box2 .p1{margin-bottom: 39px;} #banner .p-banner .p-box2 .p2{width: 50%; } #banner .p-banner .p-box2 .p3{font-family: PFR; font-size: 40px;} #banner .p-banner .swiper-pagination {bottom: 40px;} #banner .p-banner .swiper-pagination-bullet{width: 95px; height: 5px; margin-right: 40px; opacity: 1; border: 1px solid #155def; background: #1b73fa; border-radius:0;} #banner .p-banner .swiper-pagination-bullet.swiper-pagination-bullet-active{background: linear-gradient(to right, #015ffc 50%, #f3f7ff);} @media screen and (max-width: 1366px){ #banner .box{top: 16%;} } @media screen and (max-width: 1024px){ #banner{margin-top: 90px;} #banner .box{top: 4%;} #banner .btn-list{bottom: 13%;} #banner .p-banner .box{top: 15%; width: 94%;} #banner .p-banner .p-box1 .p2{width: 70%;} } @media screen and (max-width: 750px){ #banner {margin-top: 0;} #banner .box{top: 15%; left: 50%;width: 100%; transform: translateX(-50%); text-align: center;} #banner .btn-list{width: 330px;left: 50%; transform: translateX(-50%);} #banner .btn-list .free{border: 0; margin: 0 auto; text-align: center; border-radius: 65px;background: linear-gradient(to bottom, #2361fc, #0428ea);font-size: 30px; font-family: PFL; padding: 26px 104px;} #banner .btn-list .case{display: none;} #banner.e-banner, #banner .p-banner{height: auto;} #banner .e-box .p1{font-size: 30px; margin-bottom: 27px;} #banner .e-box .p2{font-size: 70px; line-height: 80px; text-align: center; margin-bottom: 23px; width: 100%;} #banner .e-box .p3{font-size: 34px; } #banner .btn-list.e-btn{bottom: 5%;} #banner .e-btn .btn{background: linear-gradient(to bottom, #57aaff, #021b95);} #banner .p-banner .p-box1 .p2{width:80%; margin: 0 auto 23px;} #banner .p-banner .p-box2 .p2{width: 100%;} #banner .p-btn{bottom: 7%;} } /* footer */ #footer{width: 100%;background: #1e232c; padding: 22px 0;} #footer>div{color: rgba(255,255,255,.5);font-family: APR; font-size: 14px;} @media screen and (max-width: 750px){ #footer>div{font-size: 26px;} } /* 第一部分 */ #part-one{padding: 100px 0; max-height: 660px;} #part-one .big-title{ margin-bottom: 47px;} #part-one .big-title .p1{font-size: 34px; font-family: APR; line-height: 52px;font-weight: bold;} #part-one .list{width: 100%; display: flex; justify-content: space-between;} #part-one .list .item{width: 23.92%; margin-right: 1.167%; transition: all .4s ease;} #part-one .list .item:last-child{margin-right: 0;} #part-one .list .item .title .tit{top: 50%; right: 6.969%; transform: translateY(-50%); font-size: 18px; font-family: PFR; color: #fff;} #part-one .list .item .title .back .i1{display: inline-block;} #part-one .list .item .title .back .i2{display: none;} #part-one .list .item:hover .title .back .i1{display: none;} #part-one .list .item:hover .title .back .i2{display: inline-block;} #part-one .list .item .info{height: 151px; padding: 32px 30px; background: #f3f5f8; font-size: 16px; font-family: PFL; color: #3d485d; line-height: 30px;} #part-one .list .item .more{height: 67px; line-height: 67px; padding: 0 30px; background: #f3f5f8; font-family: APR; font-size: 14px; color: #3d485d;} #part-one .list .item:hover {box-shadow: 0 0 20px rgba(0,0,0,.2); transform: translateY(-20px);} #part-one .list .item:hover .title .tit{font-size: 20px;} #part-one .list .item:hover .info{font-size: 18px; background: #fff;} #part-one .list .item:hover .more{color: #146cfb; background: #fff; height: 87px; line-height: 87px;} @media screen and (max-width: 1024px){ #part-one .list .item .info{padding: 32px 15px;} } @media screen and (max-width: 750px){ #part-one{padding: 79px 0 105px; max-height: inherit;} #part-one .big-title{ margin-bottom: 60px;} #part-one .big-title .p1{font-size: 40px; line-height: 59px;} #part-one .list{flex-wrap: wrap;} #part-one .list .item{width: 47.92%; margin-bottom: 26px; border-radius: 10px; overflow: hidden;} #part-one .list .item:nth-of-type(2){margin-right: 0;} #part-one .list .item .title .tit{font-size: 26px;} #part-one .list .item:hover .title .tit{font-size: 26px;} #part-one .list .item .info{font-size: 18px; padding: 32px 37px;} #part-one .list .item .more{font-size: 18px;} } /* 第二部分 */ #part-two{padding: 65.5px 0; background: #f3f5f8;} #part-two .big-title{margin-bottom: 47px;} #part-two .big-title .p1{font-size: 34px; font-family: APR; line-height: 52px; margin-bottom: 11px;font-weight: bold;} #part-two .big-title .p2{font-size: 16px; font-family: APR; line-height: 25px; font-weight: bold;} #part-two .info .jt{width: 37px; height: 35px;} #part-two .info .i0{width: 100%;} #part-two .info .i1{top: 51%; left: 5%; animation: down 2s linear infinite;} #part-two .info .i2{top: 51%; left: 15%; animation: down 2s linear infinite;} #part-two .info .i3{top: 51%; left: 25%; animation: down 2s linear infinite;} #part-two .info .i4{top: 22%; left: 50%; animation: down2 2s linear infinite;} #part-two .info .i5{top: 22%; left: 62%; animation: down2 2s linear infinite;} #part-two .info .i6{top: 64%; left: 50%; animation: down3 2s linear infinite;} #part-two .info .i7{top: 64%; left: 62%; animation: down3 2s linear infinite;} #part-two .more{width: 119px; margin: 30px auto 0; padding: 13px 0; border-radius: 5px; border: 1px solid #aaaaaa; font-size: 14px; font-family: APL; color: #3d485d;} #part-two .more:hover{border-color: #146cfb; background: #146cfb; color: #fff;} /* 动画 */ @keyframes down { 0%{top: 49%;} 50%{top: 51%;} 100%{top: 49%;} } @keyframes down2 { 0%{top: 20%;} 50%{top: 22%;} 100%{top: 20%;} } @keyframes down3 { 0%{top: 64%;} 50%{top: 62%;} 100%{top: 64%;} } @media screen and (max-width: 750px){ #part-two{padding: 79px 0 105px;} #part-two .big-title{ margin-bottom: 60px;} #part-two .big-title .p1{font-size: 40px; line-height: 57px; margin-bottom: 16px;} #part-two .big-title .p2{width: 48%; margin: 0 auto; font-size: 20px; font-family: APL; line-height: 32px;} #part-two .more{margin-top: 15px; font-size: 18px;} } /* 第三部分 */ #part-three{padding: 55px 0 53px; background: #fff;} #part-three .big-title{margin-bottom: 40px;} #part-three .big-title .p1{font-size: 34px; font-family: APR; line-height: 52px;font-weight: bold;} #part-three .main{width: 100%; display: flex; justify-content: space-between;} #part-three .main .left{ width: 48.08%; position: relative;} #part-three .main .left:before{content:""; display: block; width: 41px; height: 37px; background: url(/static/images/pic69.png) no-repeat center; position: absolute; top: 50%; right: -41px; transform: translateY(-50%); animation: up8 2s linear infinite;} #part-three .main .left .bot .i1{width: 51px; height: 55px; top: 28%; left: 18%; animation: up1 2s linear infinite;} #part-three .main .left .bot .i2{width: 51px; height: 55px; top: 14%; left: 18%; animation: up2 2s linear infinite;} #part-three .main .left .bot .i3{width: 51px; height: 55px; top: 0; left: 18%; animation: up3 2s linear infinite;} #part-three .main .left .bot .i4{width: 86px; height: 110px; top: 6%; right: 12%; animation: up4 2s linear infinite;} #part-three .main .right{ width: 48.08%;} #part-three .main .right .bot .i1{width: 124px; height: 112px; top: 4%; right: -1%; animation: up5 2s linear infinite;} #part-three .main .right .bot .i2{width: 171px; height: 134px; top: 12%; right: 8%; animation: up6 2s linear infinite;} #part-three .main .right .bot .i3{width: 139px; height: 133px; top: 48%; right: -1%; animation: up7 2s linear infinite;} #part-three .main .top{width: 100%; margin-bottom: 50px; padding: 10px 0; font-size: 14px; font-family: APL; color: #000000; border: 1px solid #ededed; border-radius: 5px; position: relative;} #part-three .main .top:before{content: ""; display: block; width: 29px; height: 13px; background: url(/static/images/pic75.png) no-repeat center; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); } #part-three .main .bot {text-align: center;} #part-three .more{width: 119px; margin: 20px auto 0; padding: 13px 0; border-radius: 5px; border: 1px solid #aaaaaa; font-size: 14px; font-family: APL; color: #3d485d;} #part-three .more:hover{border-color: #146cfb; background: #146cfb; color: #fff;} @keyframes up1 {0%{top: 28%;} 50%{top: 30%;} 100%{top: 28%;}} @keyframes up2 {0%{top: 14%;} 50%{top: 16%;} 100%{top: 14%;}} @keyframes up3 {0%{top: 0%;} 50%{top: 3%;} 100%{top: 0%;}} @keyframes up4 {0%{top: 6%;} 50%{top: 8%;} 100%{top: 6%;}} @keyframes up5 {0%{top: 4%;} 50%{top: 6%;} 100%{top: 4%;}} @keyframes up6 {0%{top: 12%;} 50%{top: 14%;} 100%{top: 12%;}} @keyframes up7 {0%{top: 48%;} 50%{top: 50%;} 100%{top: 48%;}} @keyframes up8 {0%{right: -41px;} 50%{right: -46px;} 100%{right: -41px;}} @media screen and (max-width: 1200px){ #part-three .main .left .bot .i4{right: 9%;} } @media screen and (max-width: 750px){ #part-three{padding: 79px 0 105px;} #part-three .big-title{ margin-bottom: 60px;} #part-three .big-title .p1{font-size: 40px; line-height: 57px; margin-bottom: 16px; font-weight: bold; width: 60%; margin: 0 auto;} #part-three .main{flex-direction: column;} #part-three .main .left{width: 100%; margin-bottom: 85px;} #part-three .main .left:before{top:100%;left:50%;transform: rotate(90deg);} #part-three .main .right{width: 100%;} #part-three .more{margin-top: 25px; font-size: 18px;} } /* 第四部分 */ #part-four{padding: 85px 0 37px; background: #f3f5f8;} #part-four .big-title{margin-bottom: 47px;} #part-four .big-title .p1{font-size: 34px; font-family: APR; line-height: 52px; margin-bottom: 11px;font-weight: bold;} #part-four .big-title .p2{font-size: 16px; font-family: APR; line-height: 25px; font-weight: bold;} #part-four .list{width: 100%; display: flex; justify-content: space-between;} #part-four .list .item{width: 31.67%; padding: 3.5% 7%; margin-right: 2.5%; background: linear-gradient(to bottom, #f3f5f8,#f2f2f2); border: 1px solid #fff; border-radius: 10px; transition: all .4s ease;} #part-four .list .item:last-child{margin-right: 0;} #part-four .list .item .icon{margin-bottom: 33px; position: relative; z-index: 1;} #part-four .list .item .icon .pic{margin: 0 auto; height: 100%;width: 95px; height: 95px; line-height: 95px; background-color: rgba(195,224,251,.8); border-radius: 50%; } #part-four .list .item .icon::before{content:""; width: 49px; height: 49px; background: #104bfc; border-radius: 50%; position: absolute; top: -14px; left: 20%; z-index: 0;} #part-four .list .item .title{font-size: 18px; font-family: APR; line-height: 37px; color: #0f1a34; font-weight: bold; margin-bottom: 8px;} #part-four .list .item .brief{font-size: 14px; font-family: APL; line-height: 26px; color: #3d485d;} #part-four .list .item:hover {background: linear-gradient(to bottom, #18c9ee,#1a5bee); border: 1px solid #1ab8fa; transform: translateY(-20px); box-shadow: 0 0 27px 10px rgba(26, 86, 238,0.27);} #part-four .list .item:hover .title, #part-four .list .item:hover .brief{color: #fff;} #part-four .list .item:hover .icon .pic{background: linear-gradient(135deg,#74d4fd,#1d5dfa)} #part-four .list .item:hover .icon::before{background:linear-gradient(270deg,#3eccfc,#104bfc);} #part-four .more{width: 119px; margin: 46px auto 0; padding: 13px 0; border-radius: 5px; border: 1px solid #aaaaaa; font-size: 14px; font-family: APL; color: #3d485d;} #part-four .more:hover{border-color: #146cfb; background: #146cfb; color: #fff;} @media screen and (max-width: 750px){ #part-four{padding: 79px 0 105px;} #part-four .big-title{ margin-bottom: 60px;} #part-four .big-title .p1{font-size: 40px; line-height: 57px; margin-bottom: 16px; font-weight: bold;} #part-four .big-title .p2{font-size: 20px; font-family: APL; line-height: 32px; width: 55%; margin: 0 auto;} #part-four .list {flex-wrap: wrap;} #part-four .list .item {width: 100%; display: flex; align-items: center; padding: 20px 28px; margin-bottom: 40px; border-radius: 15px;} #part-four .list .item:last-child{margin-bottom: 0;} #part-four .list .item .icon{float: left; margin-bottom: 0; margin-right: 60px;} #part-four .list .item .icon::before{left: -13%;} #part-four .list .item .info{text-align: left; position: relative;} #part-four .list .item .info::before{content:""; display: block; width: 1px; height: 58px; background: #dcdcdc; position: absolute; top: 10px; left: -37px;} #part-four .list .item .title{font-size: 22px;text-align: left;} #part-four .list .item .brief{font-size: 18px;text-align: left;} #part-four .more{margin-top: 15px; font-size: 18px;} } /* 第五部分 */ #part-five{padding: 30px 0 37px; background: #fff;} #part-five .big-title{margin-bottom: 40px;} #part-five .big-title .p1{font-size: 34px; font-family: APR; line-height: 52px; margin-bottom: 11px;font-weight: bold;} #part-five .big-title .p2{font-size: 16px; font-family: APR; line-height: 25px; font-weight: bold;} #part-five .info{} #part-five .info .i0{width: 100%;} #part-five .info .i1{width: 35px; height: 37px; top: 50%; left: 17%; animation: leftIn 2s linear infinite;} #part-five .info .i2{width: 37px; height: 35px; top: 65%; left: 50%; transform: translateX(-50%); animation: bottomIn 2s linear infinite;} #part-five .info .i3{width: 35px; height: 37px; top: 50%; right: 19%; animation: rightIn 2s linear infinite;} #part-five .more{width: 119px; margin: 28px auto 0; padding: 12px 0; border-radius: 5px; border: 1px solid #aaaaaa; font-size: 14px; font-family: APL; color: #3d485d;} #part-five .more:hover{border-color: #146cfb; background: #146cfb; color: #fff;} /* 动画 */ @keyframes leftIn{ 0%{left: 15%;} 50%{left: 17%;} 100%{left: 15%;} } @keyframes bottomIn{ 0%{top: 67%;} 50%{top: 65%;} 100%{top: 67%;} } @keyframes rightIn{ 0%{right: 17%;} 50%{right: 19%;} 100%{right: 17%;} } @media screen and (max-width: 750px){ #part-five{padding: 79px 0 105px;} #part-five .big-title{ margin-bottom: 60px;} #part-five .big-title .p1{font-size: 40px; line-height: 57px; margin-bottom: 16px;font-weight: bold;} #part-five .big-title .p2{font-size: 20px; font-family: APL; line-height: 32px;font-weight: bold;} #part-five .more{margin-top: 15px; font-size: 18px;} } /* 第六部分 */ #part-six{padding: 37px 0; background: #f3f5f8;} #part-six .big-title{margin-bottom: 47px;} #part-six .big-title .p1{font-size: 34px; font-family: APR; line-height: 52px; margin-bottom: 11px; font-weight: bold;} #part-six .big-title .p2{font-size: 16px; font-family: APR; line-height: 25px; font-weight: bold;} #part-six .list{display: flex; flex-wrap: wrap;} #part-six .list .item{width: 22.33%; margin: 0 2.33% 26px 0; padding: 20px 20px 17px; background:rgba(255,255,255,0.3); border:1px solid #fff; text-align: center; border-radius: 3px; box-shadow: 0 0 20px 2px rgba(147, 155, 188,0.2); transition: transform .3s ease;} #part-six .list .item:nth-of-type(4n){margin-right: 0;} #part-six .list .item .icon{width: 42px; height: 47px;margin:0 auto 11px; position: relative;} #part-six .list .item .icon .pic{width: 100%; height: 100%; position: absolute;z-index: 1; background: rgba(144,184,255,.9); border-radius: 5px;} #part-six .list .item .icon::before{content: ""; display: block; width: 22px; height: 22px; position: absolute; bottom: 0; right: -11px; background: #0055fb;z-index: 0; border-radius: 5px;} #part-six .list .item .title{font-size: 18px; font-family: APR; line-height: 27px; font-weight: bold; margin-bottom: 10px; color: #000;} #part-six .list .item .brief{font-size: 14px; font-family: APL; line-height: 24px; color: #3d485d; } #part-six .list .item .more{font-size: 14px; font-family: APL; margin-top: 8px; color: #3d485d; } #part-six .list .item:hover {background: linear-gradient(to bottom, #5aceff,#1b5afa); border: 1px solid transparent; border-top: 1px solid #5aceff; transform: translateY(-10px); box-shadow: 0 0 27px 10px rgba(26, 86, 238,0.27);} #part-six .list .item:hover .icon .pic{background: linear-gradient(to bottom, #83dbfe,#1d5dfa);} #part-six .list .item:hover .icon::before{background: #7fc1fc;} #part-six .list .item:hover .title, #part-six .list .item:hover .brief{color: #fff;} #part-six .list .item:hover .more{font-family: APM; color: #fff;} @media screen and (max-width: 1024px){ #part-six .list .item{padding: 29px 19px 17px;} } @media screen and (max-width: 750px){ #part-six{padding: 79px 0 60px;} #part-six .big-title{ margin-bottom: 60px;} #part-six .big-title .p1{font-size: 40px; line-height: 57px; margin-bottom: 16px; font-weight: bold;} #part-six .big-title .p2{font-size: 20px; font-family: APL; line-height: 32px;} #part-six .list .item{width: 46.33%; padding: 39px 55px; margin: 0 3.33% 35px 0; border-radius: 15px;} #part-six .list .item .title{font-size: 22px; margin-bottom: 15px;} #part-six .list .item .brief{font-size: 18px;} #part-six .list .item .more{ font-size: 18px;} } /* 第七部分 */ #part-seven{padding: 42px 0 25px; background: #fff;} #part-seven .big-title{margin-bottom: 15px;} #part-seven .big-title .p1{font-size: 34px; font-family: APR; line-height: 52px; font-weight: bold;} #part-seven .big-title .p2{font-size: 16px; font-family: APR; line-height: 25px; } #part-seven .list{display: flex; flex-wrap: wrap;} #part-seven .list .item{width: 22.33%; margin: 0 2.33% 15px 0; padding: 22px 24px 22px; background:rgba(255,255,255,0.3); border: 1px solid transparent; text-align: center;} #part-seven .list .item:nth-of-type(4n){margin-right: 0;} #part-seven .list .item .icon{margin-bottom: 7px;} #part-seven .list .item .icon .pic{ width: 42px; height: 42px; margin: 0 auto;} #part-seven .list .item .icon .i1{display: inline-block;} #part-seven .list .item .icon .i2{display: none;} #part-seven .list .item:hover .icon .i1{display: none;} #part-seven .list .item:hover .icon .i2{display: inline-block;} #part-seven .list .item .title{font-size: 18px; font-family: APR; line-height: 37px; font-weight: bold; margin-bottom: 10px; color: #000;} #part-seven .list .item .brief{height: 60px; margin-bottom: 8px; font-size: 14px; font-family: APL; line-height: 20px; color: #3d485d; } #part-seven .list .item .more{font-size: 14px; font-family: APL; color: #3d485d; } #part-seven .list .item:hover{background: #146cfb; border: 1px solid transparent; border-radius: 10px;} #part-seven .list .item:hover .title, #part-seven .list .item:hover .brief, #part-seven .list .item:hover .more{color: #fff;} @media screen and (max-width: 750px){ #part-seven{padding: 79px 0 80px;} #part-seven .big-title{ margin-bottom: 60px;} #part-seven .big-title .p1{font-size: 40px; line-height: 57px; margin-bottom: 16px; font-weight: bold;} #part-seven .big-title .p2{font-size: 20px; font-family: APL; line-height: 32px;} #part-seven .list .item{background: #f3f5f8; border-radius: 15px; width: 100%; margin-right: 0; display: flex; text-align: left;} #part-seven .list .item .icon{margin-right: 30px;} #part-seven .list .item .title{font-size: 22px;} #part-seven .list .item .brief{font-size: 18px;} #part-seven .list .item .more{ font-size: 18px;} } /* 第八部分 */ #part-eight{padding: 92px 0 97px; background: #f3f5f8;} #part-eight .big-title{margin-bottom: 47px;} #part-eight .big-title .p1{font-size: 34px; font-family: APR; line-height: 52px; margin-bottom: 11px;font-weight: bold;} #part-eight .big-title .p2{font-size: 16px; font-family: APR; line-height: 25px; font-weight: bold;} #part-eight .cont1{width: 56.33%; margin: 0 auto 48px; } #part-eight .cont1 .wrapper{justify-content: space-around;} #part-eight .cont1 .item{width: auto; font-size: 16px; font-family: APR; line-height: 39px; color: #a0a0a0; cursor: pointer;} #part-eight .cont1 .item.swiper-slide-thumb-active{font-size: 18px; color: #2977fb; font-weight: bold;} #part-eight .cont2 {background: #2976fb;} #part-eight .cont2 .item{width: 100%; display: flex;} #part-eight .cont2 .item .left{width: 48.92%;} #part-eight .cont2 .item .right{width: 51.17%; padding: 3.4% 3.4% 0.4%; } #part-eight .cont2 .item .right .top{padding-bottom: 25px; margin-bottom: 27px; border-bottom: 2px solid #fff;} #part-eight .cont2 .item .right .top .name{font-size: 22px; font-family: APR; line-height: 30px; margin-bottom: 10px;color: #fff; } #part-eight .cont2 .item .right .top .brief{font-size: 14px; font-family: APR; line-height: 25px; color: #fff;} #part-eight .cont2 .item .right .list{display: flex; flex-wrap: wrap; margin-bottom: 16px;} #part-eight .cont2 .item .right .list .item{width: 46.09%; padding-left: 3.3%; margin-bottom: 15px; font-size: 14px; font-family: APR; line-height: 23px; position: relative; color: rgba(255,255,255,0.8);} #part-eight .cont2 .item .right .list .item::before{content:""; display: block; width: 7px; height: 7px; border: 1px solid #fff; border-radius: 50%; position: absolute; top: 50%; left: -2px; transform: translateY(-50%);} #part-eight .cont2 .item .right .more{padding: 11px 37px; border-top: 1px solid #fff; border-left: 1px solid #2b79ec; border-right: 1px solid #2b79ec; border-bottom: 1px solid #4092fb; border-radius: 5px; background: linear-gradient(to bottom, #ffffff, #69a1ff); color: #000; font-size: 14px; font-family: APL;} #part-eight .cont2 .item .right .more:hover{background: #fff; color: #146cfb;} #part-eight .btn-box{width: 100%; height: 42px; top: 21%; left: 0;} #part-eight .btn-box .btn{top: 0; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(to bottom, #fffeff,#caced6); box-shadow: 0px 0 20px 10px rgba(51, 67, 95, 0.1);} #part-eight .btn-box .btn.prev{left: 14%;} #part-eight .btn-box .btn.next{right: 14%;} #part-eight .btn-box .btn.swiper-button-disabled{display: none;} #part-eight .btn-box .btn.next img{ transform: rotate(180deg);} #part-eight .btn-box .btn:hover{background: #105bfb;} @media screen and (max-width: 1024px){ #part-eight .cont2 .item .right .list .item{width: 49.09%;} } @media screen and (max-width: 750px){ #part-eight{padding: 79px 0 80px;} #part-eight .big-title{ margin-bottom: 60px;} #part-eight .big-title .p1{font-size: 40px; line-height: 57px; margin-bottom: 16px; font-weight: bold;} #part-eight .big-title .p2{font-size: 20px; font-family: APL; line-height: 32px;} #part-eight .cont1{width:100%; margin-bottom: 28px;} #part-eight .cont1 li{font-size: 20px;} #part-eight .cont2{height: 760px; border-radius: 15px; overflow: hidden;background: transparent;} #part-eight .cont2 .item{flex-direction: column; } #part-eight .cont2 .item .left{width: 100%;} #part-eight .cont2 .item .right{width: 100%; padding: 5.3%; background: #2977fb; position: absolute; bottom: 0; border-radius: 15px;} #part-eight .cont2 .item .right .top .name {font-size: 24px; margin-bottom: 20px;} #part-eight .cont2 .item .right .top .brief{font-size: 18px;} #part-eight .cont2 .item .right .list .item{font-size: 18px;} #part-eight .cont2 .item .right .more{display: block; margin: 0 auto; color: #fff; width: 184px; height: 47px; border-radius: 35px; font-size: 18px; text-align: center; } #part-eight .btn-box{top: 16%; z-index: 5;} #part-eight .btn-box .btn.prev{left: 0;} #part-eight .btn-box .btn.next{right: 0;} } /* 第九部分 */ #part-nine{height: 1007px;} #part-nine .back img{width: 100%; height: 100%;} #part-nine .data{color: #fff; z-index: 1; top: 110px; display: flex; justify-content: space-around;} #part-nine .data .d {width: auto;} #part-nine .data .d .num{font-size: 61px; font-family: APR; display: flex; align-items: center;} #part-nine .data .d .txt{text-align: center; font-size: 18px; font-family: APR;} #part-nine .bottom{top: 260px; left: 50%; transform: translateX(-50%); z-index: 5; background: #fefefe; padding: 50px 60px; color: #000; border-radius: 15px; box-shadow: 0 0 30px 2px rgb(0 111 189 / 10%);} #part-nine .bottom .intro{font-size: 20px; font-family: APR; font-weight: bold; line-height: 37px; margin-bottom: 29px;} #part-nine .bottom .partner-list{display: flex; justify-content: space-between;} #part-nine .bottom .partner-list .partner-item{} #part-nine .bottom .partner-list .partner-item .cate-name{font-size: 14px; font-family: PFR; line-height: 24px; color: #3d485d; margin-bottom: 24px;} #part-nine .bottom .partner-list .partner-item .part .p{width: 106px; height: 39px; padding: 5px; border: 1px solid #f1f1f1; background: #ffffff; margin-bottom: 15px;} #part-nine .bottom .partner-list .partner-item .part .p:hover{background: #f5f6f6;} @media screen and (max-width: 1200px){ #part-nine .bottom{padding: 50px 25px;} } @media screen and (max-width: 1024px){ #part-nine .back{height: 500px;} } @media screen and (max-width: 750px){ #part-nine .data .d .num{font-size: 44px;} #part-nine .data .d .txt{color: rgba(255,255,255,.8);} #part-nine .bottom .intro{font-size: 24px;} #part-nine .bottom .partner-list{width: 100%; overflow: auto; margin-right: 140px;} #part-nine .bottom .partner-list::before{content: ""; width: 90%; height: 1px; background: #d0d0d0; position: absolute;top: 24%; left: 50%; transform: translateX(-50%)} #part-nine .bottom .partner-list .partner-item { margin-right: 140px;} #part-nine .bottom .partner-list .partner-item .cate-name{width: max-content;padding: 0 17px;font-size: 20px; /*border-bottom: 2px solid #0d3cf3;*/ padding-bottom: 19px;} #part-nine .bottom .partner-list .partner-item .part .p{margin: 0 auto 15px;} } /* 第十部分 */ #part-ten{padding: 82px 0;background: url(/static/images/pic29.png) no-repeat center center/cover;} #part-ten .big-title{margin-bottom: 47px; color: #fff;} #part-ten .big-title .p1{font-size: 34px; font-family: APR; line-height: 52px; margin-bottom: 11px;} #part-ten .list{width: 990px; margin: 0 auto; display: flex; flex-wrap: wrap;} #part-ten .list .item{width: 32.02%; margin: 0 1.01% 2.01% 0; padding: 2.8% 3%; border: 2px solid #6b6b6c;} #part-ten .list .item:nth-of-type(3n){margin-right: 0;} #part-ten .list .item>div{font-size: 16px; color: rgba(255,255,255,.5); line-height: 27px; font-family: APL;} #part-ten .list .item .p1{font-size: 14px;} #part-ten .list .item:hover{background: #2977fb; border: 2px solid #2977fb;} #part-ten .list .item:hover>div{color: #fff;} @media screen and (max-width: 1024px){ #part-ten .list{width: 94%;} } @media screen and (max-width: 750px){ #part-ten .list{width: 646px;} #part-ten .list .item{width: 48.02%; padding: 32px 25px; margin: 0 22px 24px 0;} #part-ten .list .item:nth-of-type(2n){margin-right: 0;} #part-ten .list .item:nth-of-type(3n){margin-right: auto;} #part-ten .list .item .p1{font-size: 18px; margin-bottom: 18px} #part-ten .list .item .p2{font-size: 20px;} } /* 第十一部分 */ #part-eleven{padding: 96px 0 100px; background: #f3f5f8;} #part-eleven .big-title{margin-bottom: 47px;} #part-eleven .big-title .p1{font-size: 34px; font-family: APM; line-height: 52px; margin-bottom: 11px; font-weight: bold;} #part-eleven .big-title .p2{font-size: 16px; font-family: APR; line-height: 25px; font-weight: bold;} #part-eleven .main{width: 100%; display: flex; justify-content: center;} #part-eleven .main .pic{transition: all .3s ease; margin-right: 30px;} #part-eleven .main .pic:last-child{margin-right: 0;} #part-eleven .main .pic .i1{display: inline-block;} #part-eleven .main .pic .i2{display: none;} #part-eleven .main .pic:hover{box-shadow: 0 0 15px rgba(0,27,135, 0.15);} #part-eleven .main .pic:hover .i1{display: none;} #part-eleven .main .pic:hover .i2{display: inline-block;} @media screen and (max-width: 750px){ #part-eleven{padding: 110px 0 80px;} #part-eleven .big-title{ margin-bottom: 60px;} #part-eleven .big-title .p1{width: 75%; margin: 0 auto 16px; font-size: 40px; line-height: 57px;} #part-eleven .big-title .p2{width: 85%; margin: 0 auto; font-size: 20px; font-family: APL; line-height: 32px;} #part-eleven .pic-list{} #part-eleven .pic-list .pic{margin-bottom: 36px;} #part-eleven .pic-list .pic:last-child{margin-bottom: 0;} } #apply-form .cont{width: 100%;background: url(/static/images/pic34.png) no-repeat center center/cover; padding: 84px 0;} #apply-form .cont .info{width: 51.52%; margin: 0 auto; display: flex;} #apply-form .cont .left{width: 489px; background: url(/static/images/pic39.png) no-repeat center center/cover; padding: 33px 45px; margin-right: 10px;} #apply-form .cont .left .top{margin-bottom: 95px;} #apply-form .cont .left .top .p1{font-size: 22px; font-family: APR; color: #282828; line-height: 33px; font-weight: bold;} #apply-form .cont .left .top .p2{font-size: 54px; font-family: APB; color: #2183ff; line-height: 67px; margin-bottom: 16px; font-weight: bold;} #apply-form .cont .left .icon-list .item{width: 40%; display: flex; align-items: center; margin-right: 79px; margin-bottom: 15px; position: relative;} #apply-form .cont .left .icon-list .item::before{content: ""; display: block; width: 1px; height: 25px; background: #dedede; position: absolute; top: 50%; right: -35px; transform: translateY(-50%);} #apply-form .cont .left .icon-list .item:nth-of-type(2n){ margin-right: 0;} #apply-form .cont .left .icon-list .item:nth-of-type(2n)::before{display: none;} #apply-form .cont .left .icon-list .item .icon{margin-right: 15px;} #apply-form .cont .left .icon-list .item .txt{font-family: PFL; font-size: 16px; color: #0f1a34; font-weight: bold;} #apply-form .cont .right{width: 473px;background: #fff; padding: 33px 45px;} #apply-form .cont .right .p1{font-size: 26px; font-family: APM; line-height: 31px; color: #2183ff; font-weight: bold;} #apply-form .cont .right .p2{font-size: 14px; font-family: APL; line-height: 30px; color: #000000; margin-bottom: 14px;} #apply-form .cont .right .text .input{width: 100%; margin-bottom: 4px;} #apply-form .cont .right .text .input .txt{font-size: 14px; font-family: APL; line-height: 31px; color: #646464; position: relative;} #apply-form .cont .right .text .input .txt.inpro:before{content:""; display: block; width: 7px; height: 7px; background: url(/static/images/pic47.png) no-repeat center center; position: absolute; top: 50%; left: -12px; transform: translateY(-50%);} #apply-form .cont .right .text .input input{width: 100%; height: 29px; line-height: 29px; padding: 0 5px; border: 1px solid #dddddd; border-radius: 5px;} #apply-form .cont .right .text .input select{width: 100%; height: 29px; padding: 0 5px; border: 1px solid #dddddd; border-radius: 5px; font-size: 14px; font-family: APL; color: #c8c8c8; line-height: 29px;} #apply-form .cont .right .text .input select option{font-size: 14px; font-family: APL; color: #c8c8c8; line-height: 29px;} #apply-form .cont .right .text .input textarea{width: 100%; height: 74px; padding: 0 10px 0; border: 1px solid #dddddd; border-radius: 4px; font-size: 14px; font-family: APL; color: #c8c8c8; line-height: 36px; resize: none;} #apply-form .cont .right .text .addr{color: #646464; width: 100%; display: flex; justify-content: space-between;} #apply-form .cont .right .text .addr .se1{width: 48%;} #apply-form .cont .right .text .addr .se1 .txt{font-size: 14px; font-family: APL; line-height: 31px; color: #646464; position: relative;} #apply-form .cont .right .text .addr .se1 .txt::before{content:""; display: block; width: 7px; height: 7px; background: url(/static/images/pic47.png) no-repeat center center; position: absolute; top: 50%; left: -12px; transform: translateY(-50%);} #apply-form .cont .right .text .addr select{width: 100%; height: 29px; padding: 0 5px; border: 1px solid #dddddd; border-radius: 5px; font-size: 14px; font-family: APL; color: #c8c8c8; line-height: 29px;} #apply-form .cont .right .text .addr select option{font-size: 14px; font-family: APL; color: #c8c8c8; line-height: 29px;} #apply-form .cont .right .btn_box{margin-bottom: 13px;} #apply-form .cont .right .btn_box input{width: 100%; margin-top: 15px; padding: 13px 0; font-size: 16px; text-align: center; border: 1px solid transparent; border-top: 1px solid #146cfb; border-radius: 5px; color: #fff; box-shadow: 0 0 5px rgba(2,120,252,.2); background: #146cfb; transition: all .3s ease;} #apply-form .cont .right .btn_box input:hover{ background: linear-gradient(to bottom, #25bbfc, #1c63fb);} #apply-form .cont .right .pri{font-size: 12px; font-family: APL; line-height: 20px; color: #646464;} #apply-form .cont .right .pri span{color: #0056fb;} #apply-form .cont .ri2{display: none;} @media screen and (max-width: 1876px){ #apply-form .cont .left .icon-list .item{margin-right: 73px;} #apply-form .cont .left .icon-list .item::before {right: -30px;} } @media screen and (max-width: 1680px){ #apply-form .cont .info{width: 58.52%;} } @media screen and (max-width: 1550px){ #apply-form .cont .info {width: 61.52%;} #apply-form .cont .left .icon-list .item{margin-right: 75px;} #apply-form .cont .left .icon-list .item::before{right: -23px;} } @media screen and (max-width: 1440px){ #apply-form .cont .info{width: 66.52%;} #apply-form .cont .left .icon-list .item{margin-right: 70px;} #apply-form .cont .left .icon-list .item::before{right: -25px;} } @media screen and (max-width: 1366px){ #apply-form .cont .info{width: 69.52%;} #apply-form .cont .left .icon-list .item{margin-right: 44px;} #apply-form .cont .left .icon-list .item::before {right: -15px;} } @media screen and (max-width: 1280px){ #apply-form .cont .info {width: 72.52%;} } @media screen and (max-width: 1200px){ #apply-form .cont .info {width: 79.52%;} #apply-form .cont .left{padding: 33px 42px;} #apply-form .cont .left .icon-list .item{margin-right: 34px;} #apply-form .cont .left .icon-list .item::before {right: -4px;} } @media screen and (max-width: 1024px){ #apply-form .cont .info {width: 94%;} } @media screen and (max-width: 750px){ #apply-form{height: auto;} #apply-form .cont{width: 100%; } #apply-form .cont .info{width: 94%;flex-direction: column;} #apply-form .cont .left{width: 100%; margin: 0 0 44px 0; border-radius: 15px; padding: 40px 47px;} #apply-form .cont .left .top .p1{font-size: 22px;} #apply-form .cont .left .top .p2{font-size: 56px; font-family: APM; font-weight: bold;} #apply-form .cont .left .icon-list .item{width: 22%;border: 0; flex-direction: column;} #apply-form .cont .left .icon-list .item:nth-of-type(4n){margin-right: 0;} #apply-form .cont .left .icon-list .item::before{display: none} #apply-form .cont .left .icon-list .item .icon{margin: 0 0 17px 0;} #apply-form .cont .left .icon-list .item .txt{font-family: PFL; font-weight: bold; font-size: 18px; color: #0f1935;} #apply-form .cont .ri1{display: none;} #apply-form .cont .ri2{display: block;} #apply-form .cont .ri2.cur{display: none;} #apply-form .cont .ri2 .tit .close{top:0; right: 0; z-index: 0;} #apply-form .cont .ri2{width: 100%; border-radius: 15px; padding: 60px 48px;} #apply-form .cont .ri2 .tit .close{display: block; top: -30px; right: -20px;} #apply-form .cont .ri2 .p1{font-size: 40px; margin-bottom: 18px; font-weight: bold; color: #1da2ff;} #apply-form .cont .ri2 .p2{font-size: 18px; font-family: APR; padding-bottom: 42px; margin-bottom: 42px; border-bottom: 1px solid #dcdcdc;} #apply-form .cont .ri2 .text .input{height: 48px; border-radius: 10px;padding: 0 23px; border: 0; background: #f3f6f8; margin: 0 0 23px 0;} #apply-form .cont .ri2 .text .input input, #apply-form .cont .ri2 .text .input input[type=text]::-webkit-input-placeholder{height: 100%;font-family: APL; font-size: 18px; color: #b4b4b4; padding: 16px 0; border: 0;} #apply-form .cont .ri2 .text .input select, #apply-form .cont .right .text .addr select{width: 100%; height: 100%; border: 0; font-family: APL; font-size: 18px; color: #b4b4b4;} #apply-form .cont .ri2 .text .input select option, #apply-form .cont .right .text .addr select option{height: 100%;font-family: APL; padding: 0; font-size: 18px; color: #b4b4b4; border: 0;} #apply-form .cont .ri2 .text .mes{height: 48px; font-size: 18px; color: #b4b4b4;} #apply-form .cont .ri2 .text .input textarea{height: 100%; font-family: APL;padding: 5px 0; font-size: 18px; color: #b4b4b4; border: 0;} #apply-form .cont .ri2 .btn_box {margin-top: 43px; border-radius: 15px;} #apply-form .cont .ri2 .btn_box input{background: linear-gradient(to bottom, #00e2fe, #0e6bff); font-size: 20px;} #apply-form .cont .ri2 .pri{width: 80%; margin: 0 auto;font-size: 14px; font-family: APL; color: #646464; line-height: 26px;} #apply-form .cont .right .text .addr{margin-bottom: 23px;} #apply-form .cont .right .text .addr select{padding: 10px 23px; background: #f3f5f8; border: 0; } #apply-form .cont .ri2 .btn_box{box-shadow: 0 5px 24px rgba(5,120,251,0.2); margin-bottom: 28px;} #apply-form .cont .ri2 .btn_box input{margin-top: 0;} } /* 弹出 */ #pop-box{width: 100%; position: fixed; bottom: 0; left: 0; z-index: 50; padding: 33px 0; background: linear-gradient(to bottom, #25bafc, #0459fb);} #pop-box:hover{background: linear-gradient(to bottom, #25bcfc, #0253fb);} #pop-box .close{width: 12px; height: 14px; position: absolute; top: 10px; right: 5px; z-index: 5; cursor: pointer;} #pop-box.close, #pop-box.cur{left: -100% !important;} /*#pop-box.open{left: 0% !important;}*/ #pop-box .box1{display: flex; justify-content: space-between;} #pop-box .box1 .logo{margin-top:5px;} #pop-box .box1 .apply{width: 86.42%; color: #fff; } #pop-box .box1 .apply .top{width: 100%; display: flex; justify-content: space-between;margin-bottom: 4px;} #pop-box .box1 .apply .top .left{font-size: 20px; font-family: APR; line-height: 40px; margin-left:17px;} #pop-box .box1 .apply .top .right{display: flex; align-items: center;} #pop-box .box1 .apply .top .right .free{width: 208px; height: 31px; background: #ffae1e; font-size: 16px; font-family: APL; color: #000000; text-align: center; line-height: 31px; border-radius: 5px; margin-right: 17px;} #pop-box .box1 .apply .top .right .phone{font-size: 20px; font-family: APR; line-height: 40px;} #pop-box .box1 .apply .bottom .text{width: 100%; display: flex; justify-content: space-between;} #pop-box .box1 .apply .bottom .text .input{width: 19.09%; background: linear-gradient(to bottom, #4298fc, #68a1fd); padding: 0 12px; line-height: 30px; border-radius: 5px; font-size: 14px; font-family: APL; color: #fff;} #pop-box .box1 .apply .bottom .text .input input[type=text]{width: 100%;} #pop-box .box1 .apply .bottom .text .input input[type=text]::-webkit-input-placeholder{font-size: 14px; font-family: APL; color: #fff; line-height: 30px;} #pop-box .box1 .apply .bottom .text .input.sel1{position: relative;} #pop-box .box1 .apply .bottom .text .input.sel1 select{width: 100%; color: #fff; outline: none;-webkit-appearance: none; } #pop-box .box1 .apply .bottom .text .input.sel1 select option{font-size: 14px; font-family: APL; color: #000;} #pop-box .box1 .apply .bottom .text .input.sel1:before{content:""; display: block; width: 10px; height: 4px; background: url(/static/images/process/process14.png) no-repeat center; position: absolute; top: 50%; right: 12px; transform: translateY(-50%);} #pop-box .box1 .apply .bottom .text .btn_box{width: 19.09%; border: 1px solid #004ad3; border-radius: 5px; background: #146cfb; transition: all .3s ease; text-align: center;} #pop-box .box1 .apply .bottom .text .btn_box input{width: 100%; line-height: 30px; font-size: 14px; font-family: APR; text-align:center;} #pop-box .box1 .apply .bottom .text .btn_box:hover{ background: #146cfb; } #pop-box .box1 .apply .bottom.p-bot .text .input{width: 12.4%;} #pop-box .box1 .apply .bottom.p-bot .text .input.addr{width: 29%; display: flex; background: transparent; padding: 0;} #pop-box .box1 .apply .bottom.p-bot .text .input.addr .se1{width: calc(49% - 5px);background: linear-gradient(to bottom, #4298fc, #68a1fd); padding: 0 12px; margin-right: 5px; border-radius: 5px; position: relative;} #pop-box .box1 .apply .bottom.p-bot .text .input.addr select{width: 100%;line-height: 30px; font-size: 14px; font-family: APL; color: #fff; outline: none;-webkit-appearance: none; outline: none;-webkit-appearance: none;} #pop-box .box1 .apply .bottom.p-bot .text .input.addr select option{font-size: 14px; font-family: APL; color: #000;} #pop-box .box1 .apply .bottom.p-bot .text .input.addr .se1:before{content:""; display: block; width: 10px; height: 4px; background: url(/static/images/process/process14.png) no-repeat center; position: absolute; top: 50%; right: 12px; transform: translateY(-50%);} @media screen and (max-width: 1200px){ #pop-box .box1 .apply .top .right .free{width: 175px;} } @media screen and (max-width: 1024px){ #pop-box .box1 .apply .top .left{font-size: 26px;} #pop-box .box1 .apply .top .right{align-items: flex-end;} #pop-box .box1 .apply .top .right .free{width: 147px;} #pop-box .box1 .apply .top .right .phone{font-size: 26px;} } @media screen and (max-width: 750px){ #pop-box{background: linear-gradient(to bottom, #35c8ff, #68ccff)} #pop-box .box1 .logo{display: none;} #pop-box .close{width: 27px; height: 27px; top: 30px; right: 26px;} #pop-box .box1 .apply{width: 90%;margin: 0 auto;} #pop-box .box1 .apply .top{flex-direction: column;} #pop-box .box1 .apply .top .left{width: 100%; margin-bottom: 20px; margin-left:0px;} #pop-box .box1 .apply .top .right .free{width: 139px; height: 39px; margin-bottom: 0px;} #pop-box .box1 .apply .top .right .phone{display: none;} #pop-box .box1 .apply .bottom .text{justify-content: inherit;flex-wrap: wrap; } #pop-box .box1 .apply .bottom .text .input{margin-right: 46px; width: 46%; margin-bottom: 15px; font-size: 18px;} #pop-box .box1 .apply .bottom .text .input input[type=text]::-webkit-input-placeholder, #pop-box .box1 .apply .bottom .text .input select option{font-size: 18px;} #pop-box .box1 .apply .bottom .text .input:nth-of-type(2n){margin-right: 0;} #pop-box .box1 .apply .bottom .text .btn_box{width: 100%; background:linear-gradient(to bottom, #08c4ff,#0067dd); color: #fff; } #pop-box .box1 .apply .bottom .text .btn_box input{font-size: 22px; font-family: APL;} } #right-list{width: 74px; height: 224px; top: 50%; right: 22px; z-index: 50; transform: translateY(-50%); background: #fff; box-shadow: 0 0 40px 10px rgba(194,196,198,0.3); border: 1px solid #f5f5f5; border-radius: 35px; text-align: center;} #right-list .nav{margin: 33px 0;} #right-list .nav .pic{margin: 0 auto 6px;} #right-list .contact .pic{width: 28px; height: 29px;} #right-list .pic .i1, #right-list .contact .pic .i1{display: inline-block;} #right-list .pic .i2, #right-list .contact .pic .i2{display: none;} #right-list .pic:hover .i1, #right-list .contact:hover .pic .i1{display: none;} #right-list .pic:hover .i2, #right-list .contact:hover .pic .i2{display: inline-block;} #right-list .nav .txt{font-size: 12px; font-family: APL; line-height: 22px; color: #fff; opacity: .7;} #right-list .contact:hover .txt{opacity: 1;} #right-list .contact .one, #right-list .contact .two>div{font-size: 12px; font-family: APL; color: #fff;} #right-list .contact .two{opacity: 0; top: 0; left: -205px; padding: 10px 20px; background: #fff;box-shadow: 0 0 10px rgba(16,127,252,0.1); text-align: left;} #right-list .contact .two::before{content:""; width: 11px; height: 19px; background: url(/static/images/sanjiao.png) no-repeat center center; position: absolute; top: 50%; right: -11px; transform: translateY(-50%); } #right-list .contact .two .p1{font-size: 12px; font-family: APL;line-height: 20px; color: #000;} #right-list .contact .two .p2{font-size: 22px; font-family: APM;line-height: 20px; color: #3665fa; margin-bottom: 9px;} #right-list .contact:hover .two{opacity: 1;} #right-list .nav.back{cursor: pointer;} #right-list .now .two{width: 171px; height: 49px; padding: 14px 20px; left: -190px;} #right-list .now .two .p1{font-size: 20px; font-family: APM; color: #146cfb; font-weight: bold; } #right-list .now .two::before{display: none;} /*留资弹窗*/ #ap-box { width: 60.94%; height: 0; overflow: hidden; top: 50%;left: 50%;margin: auto; z-index: 999; transform: translate(-50%, -50%); } #ap-box .black{width: 100%; top: 0;left: 0;right: 0;bottom: 0;margin: auto;background: rgba(0,0,0,.5);} #ap-box.open{height: 836px;} #ap-box .info{ background: rgba(243,245,252,1); display: flex; justify-content: space-between; padding: 50px 95px;} #ap-box .info .close{width: 17px; height: 17px; background: url(/static/images/close4.png) no-repeat center center/cover; top: 19px; right: 18px;} #ap-box .info .box{width: 100%; color: #646464; display: flex; justify-content: space-between;} #ap-box .info .left{width: 490px; height: 665px; padding: 38px 42px; margin-right: 10px; line-height: 40px; background: url(/static/images/pic39.png) no-repeat center center/cover;} #ap-box .info .left .top{margin-bottom: 108px;} #ap-box .info .left .top .p1{font-size: 22px; font-family: APR; color: #282828; line-height: 35px; font-weight: bold;} #ap-box .info .left .top .p2{font-size: 54px; font-family: APB; color: #2183ff; line-height: 63px; margin-bottom: 18px; font-weight: bold;} #ap-box .info .left .icon-list .item{width: 40%; display: flex; align-items: center; margin-right: 60px; margin-bottom: 15px; position: relative;} #ap-box .info .left .icon-list .item::before{content: ""; display: block; width: 1px; height: 25px; background: #dedede; position: absolute; top: 50%; right: -20px; transform: translateY(-50%);} #ap-box .info .left .icon-list .item:nth-of-type(2n){ margin-right: 0;} #ap-box .info .left .icon-list .item:nth-of-type(2n)::before{display: none;} #ap-box .info .left .icon-list .item .icon{margin-right: 15px;} #ap-box .info .left .icon-list .item .txt{font-family: PFL; font-size: 16px; color: #0f1a34; font-weight: bold;} #ap-box .info .ri1{display: block;} #ap-box .info .ri2{display: none;} #ap-box .info .right{width: 475px; height: 665px; background: #fff; padding: 33px 45px;} #ap-box .info .right .tit{width: 100%;} #ap-box .info .right .tit .p1{font-size: 26px; font-family: APM; line-height: 31px; color: #2183ff; font-weight: bold;} #ap-box .info .right .tit .p2{font-size: 14px; font-family: APL; line-height: 30px; color: #000000; margin-bottom: 14px;} #ap-box .info .right form{width: 100%;} #ap-box .info .right .text .input{width: 100%; margin-bottom: 4px;} #ap-box .info .right .text .input .txt{font-size: 14px; font-family: APL; line-height: 31px; color: #646464; position: relative;} #ap-box .info .right .text .input .txt.inpro:before{content:""; display: block; width: 7px; height: 7px; background: url(/static/images/pic47.png) no-repeat center center; position: absolute; top: 50%; left: -12px; transform: translateY(-50%);} #ap-box .info .right .text .input input{width: 100%; height: 29px; line-height: 29px; padding: 0 5px; border: 1px solid #dddddd; border-radius: 4px;} #ap-box .info .right .text .addr{color: #646464; width: 100%; display: flex; justify-content: space-between;} #ap-box .info .right .text .addr .se1{width: 48%;} #ap-box .info .right .text .addr .se1 .txt{font-size: 14px; font-family: APL; line-height: 31px; color: #646464; position: relative;} #ap-box .info .right .text .addr .se1 .txt::before{content:""; display: block; width: 7px; height: 7px; background: url(/static/images/pic47.png) no-repeat center center; position: absolute; top: 50%; left: -12px; transform: translateY(-50%);} #ap-box .info .right .text .addr select, #ap-box .info .right .text .input select{width: 100%; height: 29px; padding: 0 5px; border: 1px solid #dddddd; border-radius: 4px; font-size: 14px; font-family: APL; color: #c8c8c8; line-height: 29px;} #ap-box .info .right .text .addr select option, #ap-box .info .right .text .input select option{font-size: 14px; font-family: APL; color: #c8c8c8; line-height: 29px;} #ap-box .info .right .text .input textarea{width: 100%; height: 74px; padding: 0px 10px 0; border: 1px solid #dddddd; border-radius: 4px; font-size: 14px; line-height: 36px; font-family: APL; color: #c8c8c8; resize: none;} #ap-box .info .right .btn_box{margin-bottom: 13px;} #ap-box .info .right .btn_box input{width: 100%; margin-top: 15px; padding: 13px 0; font-size: 16px; text-align: center; border: 1px solid transparent; border-top: 1px solid #25bbfc; border-radius: 5px; color: #fff; box-shadow: 0 0 5px rgba(2,120,252,.2); background: #146cfb; transition: all .3s ease;} #ap-box .info .right .btn_box input:hover{background: linear-gradient(to bottom, #25bbfc, #1c63fb); } #ap-box .info .right .pri{font-size: 12px; font-family: APL; line-height: 20px; color: #646464;} #ap-box .info .right .pri span{color: #0056fb;} @media screen and (max-width: 1680px) { #ap-box{width: 76.94%;} #ap-box.open{width: 76.94%; height: 85vh; overflow: auto;} #ap-box .info{justify-content: center; padding: 5vh 6%;} #ap-box .info .box{justify-content: center;} #ap-box .info .left .top .p2{font-size: 52px;} } @media screen and (max-width: 1440px){ /* #ap-box{width: 71.94%;;} */ /* #ap-box .info{padding: 50px 25px;} */ #ap-box .info{justify-content: center; padding: 5vh 6%; height: 100% !important;} #ap-box .info .left, #ap-box .info .right{height: 100%;} #ap-box .info .left .top .p2{font-size: 42px; margin-bottom: 5px;} } @media screen and (max-width: 1366px){ #ap-box.open{width: 88.94%;} #ap-box .info{padding: 5vh 7%;} #ap-box .info .left, #ap-box .info .right{width: 48%;} } @media screen and (max-width: 1280px){ /* #ap-box{top: 13px;} */ #ap-box.open{height: 75vh;} #ap-box .info{padding: 5vh 5%; height: 100% !important;} /* #ap-box .info .box{height: 430px;} */ #ap-box .info .left{height: 100%;} #ap-box .info .right{height: 100%; overflow: auto;} #ap-box .info .close {top: 25px; right: 55px;} } /* @media screen and (max-width: 1200px){ #ap-box.open{width: 81.94%;} } */ @media screen and (max-width: 1024px){ #ap-box.open{width: 91.94%;} #ap-box .info .right .text .input textarea{line-height: 1.5em;} } @media screen and (max-width: 750px){ /* #ap-box {top: 50%; transform: translate(-50%,-50%);} */ #ap-box .info .box{height: 100%;flex-direction: column; overflow: auto;} #ap-box.open{height: auto; max-height: 55vh;} /*#ap-box .info .left{width: 100%; margin-bottom: 15px; margin-right: 0;}*/ /*#ap-box .info .left .top .p1{font-size: 22px;}*/ /*#ap-box .info .left .top .p2{font-size: 56px; font-family: APM; font-weight: bold;}*/ /*#ap-box .info .left .icon-list .item{width: 40%;border: 0; flex-direction: column;}*/ /*#ap-box .info .left .icon-list .item:before{display:none;}*/ /*#ap-box .info .left .icon-list .item:nth-of-type(4n){margin-right: 0;}*/ /*#ap-box .info .left .icon-list .item .icon{margin: 0 0 17px 0;}*/ /*#ap-box .info .left .icon-list .item .txt{font-family: PFL; font-weight: bold; font-size: 18px; color: #0f1935;}*/ #ap-box .info .ri1{display: none;} #ap-box .info .ri2{display: block;} #ap-box .info{background: #fff; padding: 55px 40px;} #ap-box .info .left{display: none;} #ap-box .info .right{width: 100%; padding: 0; } #ap-box .info .right .tit {padding-bottom: 35px; margin-bottom: 35px; border-bottom: 1px solid #dcdcdc;} #ap-box .info .right .tit .p1{font-size: 40px; font-family: APM; color: #2183fb; margin-bottom: 18px; line-height: inherit;} #ap-box .info .right .tit .p2{font-size: 18px; font-family: APR; color: #000000; margin-bottom: 0;} #ap-box .cont .ri1{display: none;} #ap-box .cont .ri2{display: block;} #ap-box .info .ri2.cur{display: none;} #ap-box .info .close{background: url(/static/images/close-b.png) no-repeat center center/cover; top: 23px; right: 21px;} #ap-box .info .ri2 .text .input{height: 48px; border-radius: 10px;padding: 0 23px; border: 0; background: #f3f6f8; margin: 0 0 23px 0;} #ap-box .info .ri2 .text .input input, #ap-box .info .ri2 .text .input input[type=text]::-webkit-input-placeholder{height: 100%;font-family: APL; font-size: 18px; color: #b4b4b4; padding: 16px 0; border: 0;} #ap-box .info .ri2 .text .input select, #ap-box .info .ri2 .text .addr select{width: 100%; height: 100%; border: 0; font-family: APL; font-size: 18px; color: #b4b4b4;} #ap-box .info .ri2 .text .input select option, #ap-box .info .ri2 .text .addr select option{height: 100%;font-family: APL; padding: 0; font-size: 18px; color: #b4b4b4; border: 0;} #ap-box .info .ri2 .text .mes{height: 48px; font-size: 18px; color: #b4b4b4;} #ap-box .info .ri2 .text .input textarea{height: 100%; font-family: APL;padding: 5px 0; font-size: 18px; color: #b4b4b4; border: 0;} #ap-box .info .ri2 .btn_box {margin-top: 43px; border-radius: 15px;} #ap-box .info .ri2 .btn_box input{background: linear-gradient(to bottom, #00e2fe, #0e6bff); font-size: 20px;} #ap-box .info .ri2 .pri{width: 80%; margin: 0 auto;font-size: 14px; font-family: APL; color: #646464; line-height: 26px;} #ap-box .info .ri2 .text .addr{margin-bottom: 23px;} #ap-box .info .ri2 .text .addr select{padding: 10px 23px; background: #f3f5f8; border: 0; } #ap-box .info .ri2 .btn_box{box-shadow: 0 5px 24px rgba(5,120,251,0.2); margin-bottom: 28px;} #ap-box .info .ri2 .btn_box input{margin-top: 0;} } #navigation{padding: 20px; background: #fff; box-shadow: 0 7px 40px rgba(243, 245, 248, 0.07);} #navigation .list{width: 100%; display: flex; justify-content: space-around;} #navigation .list a{font-size: 16px; font-family: APL; color: #000;} #navigation .list a:first-child, #navigation .list a:hover{color: #0052d9;} @media screen and (max-width: 750px){ #navigation .list a{font-size: 18px;} } #edifice-one{padding: 86px 0 150px; background: #f3f5f8; max-height: 758px;} #edifice-one .big-title{ margin-bottom: 115px;} #edifice-one .big-title .p1{font-size: 36px; font-family: APR; color:#18181a;} #edifice-one .list{width: 100%; display: flex;} #edifice-one .list .item{width: 25.17%; padding: 52px 3.1% 43px; background: #fff; border-radius: 10px; transition: all .4s ease; box-shadow: 0 0 40px 10px rgba(130,139,165,0.3);} #edifice-one .list .item .title .icon{margin-bottom: 40px;} #edifice-one .list .item .title .icon .i1{display: inline-block;} #edifice-one .list .item .title .icon .i2{display: none;} #edifice-one .list .item .title .tit{font-size: 20px; font-family: APR; color:#18181a; margin-bottom: 12px;} #edifice-one .list .item .info{font-size: 14px; font-family: APL; color:#495770; line-height: 36px; margin-bottom: 32px;} #edifice-one .list .item .more{font-size: 14px; font-family: APL; color:#495770;} #edifice-one .list .item{height: 360px;} #edifice-one .list .item:hover{height: 440px;} #edifice-one .list .item:hover{ background: url(/static/images/edifice5.png) no-repeat center/cover; transform: translateY(-40px);} #edifice-one .list .item:hover .title .icon .i1{display: none;} #edifice-one .list .item:hover .title .icon .i2{display: inline-block;} #edifice-one .list .item:hover .title .tit{color: #fff;} #edifice-one .list .item:hover .info{color: #fff;} #edifice-one .list .item:hover .more{color: #fff;} @media screen and (max-width: 1280px){ #edifice-one{padding: 86px 0 100px; max-height: inherit;} #edifice-one .big-title{margin-bottom: 70px;} #edifice-one .list .item{height: 390px;} } @media screen and (max-width: 750px){ #edifice-one{padding: 105px 0 55px;} #edifice-one .big-title{text-align: left; margin-bottom: 82px; } #edifice-one .big-title .p1{font-size: 50px; } #edifice-one .list{flex-wrap: wrap; justify-content: space-between;} #edifice-one .list .item{width: 48.36%; height: auto; margin-bottom: 47px; padding: 35px 6.1% 37px; box-shadow: 0 10px 30px rgba(76,81,100,0.14);} #edifice-one .list .item .title .icon{margin-bottom: 34px;} #edifice-one .list .item .title .tit{margin-bottom: 11px; font-size: 26px;} #edifice-one .list .item .info{font-size: 18px; line-height: 38px; color: #495770; margin-bottom: 54px;} #edifice-one .list .item .more{width: 129px; padding: 15px 0; color: #495770; font-size: 18px; text-align: center; border: 1px solid #dcdcdc; border-radius: 5px;} #edifice-one .list .item:hover{height: auto; background: #fff; transform: translateY(-20px);} #edifice-one .list .item:hover .title .tit{color: #18181a;} #edifice-one .list .item:hover .info{color: #495770;} #edifice-one .list .item:hover .more{color: #fff; background: #0049ef; border-radius: 10px;} } #edifice-two{padding: 85px 0 37px;} #edifice-two .big-title{ margin-bottom: 40px;} #edifice-two .big-title .p1{font-size: 36px; font-family: APR; color:#18181a;} #edifice-two .cate-list{display: flex; justify-content: center; margin-bottom: 24px;} #edifice-two .cate-list .cate{margin-right: 98px; padding: 14px 39px; background: transparent; border-radius: 4px; border: 1px solid #c8c8c8; font-size: 16px; font-family: APR; color:#18181a;} #edifice-two .cate-list .cate:last-child{margin-right: 0;} #edifice-two .cate-list .cate:hover, #edifice-two .cate-list .cate.cur{border: 1px solid #0055fb; background: #0055fb; color: #fff;} #edifice-two .info-list{margin-bottom: 26px; } #edifice-two .info-list .item .brief{margin-bottom: 19px; font-size:14px; font-family: APL; color: #495770; line-height: 30px;} #edifice-two .info-list .item .pic{padding: 29px 32px; border: 1px dashed #bfbfbf;} #edifice-two .more{width: 119px; padding: 12px 0; margin: 0 auto; border: 1px solid #aaaaaa; border-radius: 5px; font-size:14px; font-family: APR; color: #6b768b;} #edifice-two .more:hover{border-color: #146cfb; background: #146cfb; color: #fff;} @media screen and (max-width: 750px){ #edifice-two{padding: 108px 0 56px;} #edifice-two .big-title{text-align: left; margin-bottom: 52px;} #edifice-two .big-title .p1{line-height: 48px; } #edifice-two .big-title .p1 span{font-size: 50px;} #edifice-two .cate-list{justify-content: inherit; margin-bottom: 44px;} #edifice-two .cate-list .cate{padding: 21px 53px; font-size: 18px; margin-right: 70px; margin-bottom: 42px;} #edifice-two .cate-list .cate:hover, #edifice-two .cate-list .cate.cur{box-shadow: 0 10px 26px rgba(0,85,251,.3);} #edifice-two .info-list .item .brief{text-align: left; line-height: 37px; font-size: 18px; color: #141b26; margin-bottom: 30px;} #edifice-two .info-list .item .pic{border: 0; padding: 0;} #edifice-two .more{width: 256px; font-size:18px;} #edifice-two .more:hover{border: 1px solid #fff; background: #0953ff; color: #fff;} } #edifice-three{padding: 85px 0 64px; background: #f3f5f8;} #edifice-three .big-title{ margin-bottom: 50px;} #edifice-three .big-title .p1{font-size: 36px; font-family: APR; color:#18181a; margin-bottom: 26px;} #edifice-three .big-title .p2{font-size: 14px; font-family: APL; color:#495770; line-height: 30px;} #edifice-three .bot{width: 100%; display: flex; justify-content: space-between;} #edifice-three .bot .cate-box{width: 17.83%;} #edifice-three .bot .cate-list{width: 100%;} #edifice-three .bot .cate-box .cate-list .cate, #edifice-three .bot .cate-box .more{width: 100%; margin-bottom: 27px; padding: 14px 0; border: 1px solid #eeeeef; border-radius: 5px; background: #fff; font-size: 14px; font-family: APL; color:#18181a;} #edifice-three .bot .cate-box .cate-list .cate:hover, #edifice-three .bot .cate-box .cate-list .cate.cur, #edifice-three .bot .cate-box .more:hover{background: #0055fb; color: #fff;} #edifice-three .bot .info-list{width: 78.75%; padding: 34px 4%; background: #fff; border-radius: 5px;} #edifice-three .bot .info-list .item .brief{font-size: 14px; font-family: APL; color:#18181a;} #edifice-three .bot .info-list .item .pic{padding: 30px 3.1% 50px;} @media screen and (max-width: 750px){ #edifice-three{padding: 108px 0 56px;} #edifice-three .big-title{text-align: left; margin-bottom: 52px;} #edifice-three .big-title .p1{line-height: 48px; margin-bottom: 30px;} #edifice-three .big-title .p1 span{font-size: 50px;} #edifice-three .big-title .p2{line-height: 33px; font-size: 18px; color: #495770;} #edifice-three .bot{flex-direction: column;} #edifice-three .bot .cont{width: 590px; margin-bottom: 51px; padding: 0 0 43px;} #edifice-three .bot .cont .item{width: 42.54% !important; margin: 0 20px; padding: 20px 0; text-align: center; border-radius: 5px; border: 1px solid #c8c8c8; font-size: 18px; font-family: APL; color: #495770; } #edifice-three .bot .cont .swiper-slide-thumb-active{border-color: #0055fb; background: #0055fb; color: #fff; box-shadow: 0 10px 26px rgba(0,85,251,0.3);} #edifice-three .bot .btn {width: 20px; height: 34px; top: 15px;} #edifice-three .bot .btn.swiper-button-disabled{display: none;} #edifice-three .bot .btn.prev{left: 25px; transform: rotate(180deg);} #edifice-three .bot .btn.next{right: 25px;} #edifice-three .swiper-pagination-bullet{width: 9px; height: 9px; border: 1px solid #b7b8b8; background: transparent; opacity: 1; border-radius: 50%;} #edifice-three .swiper-pagination-bullet.swiper-pagination-bullet-active{border-color: #0055fb; background: #0055fb;} #edifice-three .bot .cont2{width: 100%; background: #fff; } #edifice-three .bot .cont2 .li{width: 100% !important; padding: 35px 20px; } #edifice-three .bot .cont2 .li .brief{font-size: 18px; font-family: APL; color: #495770; margin-bottom: 29px;} #edifice-three .bot .more{width: 286px; height: 58px; margin: 47px auto 0; border: 1px solid #c8c8c8; border-radius: 5px; text-align: center; line-height: 58px; font-size: 18px; font-family: APL; color: #495770;} #edifice-three .bot .more:hover{border: 1px solid #fff; background: #0953ff; color: #fff;} } #edifice-four{padding: 83px 0 134px; background: #fff; max-height: 756px;} #edifice-four .big-title{ margin-bottom: 89px;} #edifice-four .big-title .p1{font-size: 36px; font-family: APR; color:#18181a; } #edifice-four .list{width: 100%; display: flex; justify-content: space-between;} #edifice-four .list .item{width: 23.5%; margin-right: 2%; padding: 38px 2.6%; background: linear-gradient(to bottom, #f3f5f8, #fdfefe); border-radius: 10px; transition: all .4s ease; box-shadow: 0 8px 36px rgba(179, 197, 221, .2);} #edifice-four .list .item:last-child{margin-right: 0;} #edifice-four .list .item .title .icon{margin-bottom: 29px;} #edifice-four .list .item .title .icon .i1{display: inline-block;} #edifice-four .list .item .title .icon .i2{display: none;} #edifice-four .list .item .title .tit{font-size: 20px; font-family: APR; color:#18181a; margin-bottom: 10px;} #edifice-four .list .item .info{height: 180px; margin-bottom: 22px; font-size: 14px; font-family: APL; color:#495770; line-height: 36px;} #edifice-four .list .item .more{font-size: 14px; font-family: APL; color:#495770;} #edifice-four .list .item{height: 403px;} #edifice-four .list .item:hover{height: 445px; transform: translateY(-22px);} #edifice-four .list .item.bg1:hover{background:url(/static/images/edifice10.png) no-repeat center/cover;} #edifice-four .list .item.bg2:hover{background:url(/static/images/edifice11.png) no-repeat center/cover;} #edifice-four .list .item.bg3:hover{background:url(/static/images/edifice12.png) no-repeat center/cover;} #edifice-four .list .item.bg4:hover{background:url(/static/images/edifice13.png) no-repeat center/cover;} #edifice-four .list .item:hover .title .icon .i1{display: none;} #edifice-four .list .item:hover .title .icon .i2{display: inline-block;} #edifice-four .list .item:hover .title .tit, #edifice-four .list .item:hover .info, #edifice-four .list .item:hover .more{color: #fff;} @media screen and (max-width: 1200px){ #edifice-four .list .item{height: 430px;} #edifice-four .list .item .title .icon{margin-bottom: 15px;} #edifice-four .list .item .info{height: 210px;} } @media screen and (max-width: 1024px){ #edifice-four .list .item{height: 450px;} #edifice-four .list .item .info{height: 240px;} } @media screen and (max-width: 750px){ #edifice-four{padding: 108px 0 58px; max-height: inherit;} #edifice-four .big-title{text-align: left; margin-bottom: 70px;} #edifice-four .big-title .p1{line-height: 57px; } #edifice-four .big-title .p1 span{font-size: 50px;line-height: 57px; } #edifice-four .list{flex-wrap: wrap; justify-content: space-between;} #edifice-four .list .item{width: 47.36%; height: auto; margin-bottom: 40px; padding: 38px 5.6%; background: #fff;} #edifice-four .list .item .title .tit{font-size: 26px; margin-bottom: 10px;} #edifice-four .list .item .info{height: 215px; font-size: 18px; color: #495770; line-height: 37px;} #edifice-four .list .item .more{width: 129px; height: 49px; text-align: center; line-height: 49px; border: 1px solid #dcdcdc; border-radius: 5px; font-size: 18px; color: #495770;} } #edifice-five{padding: 83px 0 100px; background: #f3f5f8;} #edifice-five .big-title{ margin-bottom: 80px;} #edifice-five .big-title .p1{font-size: 36px; font-family: APR; color:#18181a;} #edifice-five .list{width: 100%; display: flex; justify-content: space-between;} #edifice-five .list .item{width: 28.33%; padding: 78px 0 53px; background: #fff; border-radius: 10px; transition: all .4s ease; box-shadow: 0 8px 36px rgba(179, 197, 221, .2);} #edifice-five .list .item:last-child{margin-right: 0;} #edifice-five .list .item .title .icon{margin-bottom: 52px;} #edifice-five .list .item .title .icon .i1{display: inline-block;} #edifice-five .list .item .title .icon .i2{display: none;} #edifice-five .list .item .title .tit{font-size: 26px; font-family: APR; color:#000; margin-bottom: 20px;} #edifice-five .list .item .num{margin-bottom: 75px; font-size: 60px; font-family: APL; color:#000;} #edifice-five .list .item .more{font-size: 14px; font-family: APL; color:#495770;} #edifice-five .list .item:hover{background: #146cfb;} #edifice-five .list .item:hover .title .icon .i1{display: none;} #edifice-five .list .item:hover .title .icon .i2{display: inline-block;} #edifice-five .list .item:hover .title .tit, #edifice-five .list .item:hover .num, #edifice-five .list .item:hover .more{color: #fff;} @media screen and (max-width: 1024px){ #edifice-five .list .item{width: 32.33%;} } @media screen and (max-width: 750px){ #edifice-five{padding: 108px 0 69px;} #edifice-five .big-title{text-align: left; margin-bottom: 70px;} #edifice-five .big-title .p1{line-height: 57px; } #edifice-five .big-title .p1 span{font-size: 50px;line-height: 57px; } #edifice-five .list{flex-wrap: wrap;} #edifice-five .list .m-item{width: 100%; margin-bottom: 47px; padding: 54px 39px 46px 37px; background: url(/static/images/edifice/m-edifice10.png) no-repeat center/cover; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 8px 36px rgba(179, 197, 221, 0.2);} #edifice-five .list .m-item .title{width: 16%;} #edifice-five .list .m-item .title .i1{display: inline-block;} #edifice-five .list .m-item .title .i2{display: none;} #edifice-five .list .m-item:hover .title .i1{display: none;} #edifice-five .list .m-item:hover .title .i2{display: inline-block;} #edifice-five .list .m-item .cen{width: 65%;} #edifice-five .list .m-item .cen .tit{font-size: 30px; font-family: APL; color:#18181a; margin-bottom: 0;} #edifice-five .list .m-item .cen .num{font-size: 80px; font-family: APR; color:#18181a; margin-bottom: 0;} #edifice-five .list .m-item:hover .cen .tit, #edifice-five .list .m-item:hover .cen .num{color: #fff;} #edifice-five .list .m-item .more{width: 7%;} } #part-six.edifice-six{padding: 85px 0 72px;background: #fff; max-height: 794px ;} #part-six.edifice-six .big-title{margin-bottom: 58px;} #part-six.edifice-six .big-title .p1{font-size: 36px; font-family: APR; color:#18181a; margin-bottom: 34px;} #part-six.edifice-six .big-title .p2{font-size: 16px; font-family: APL; color:#495770;} #part-six.edifice-six .list .item{height: 208px; box-sizing: box-sizing; background: linear-gradient(to bottom, #fff,#f4f4f4);} #part-six.edifice-six .list .item:hover{height: 228px;background: #0069fb; box-shadow: inherit;} #part-six.edifice-six .list .item:hover .icon::before{display: none;} #part-six.edifice-six .list .item:hover .icon .pic{background: transparent;} #part-six.edifice-six .list .item:hover .more{margin-top: 29px;} @media screen and (max-width: 1024px){ #part-six.edifice-six .list .item, #part-six.edifice-six .list .item:hover{height: 245px;} #part-six.edifice-six .list .item:hover .more{margin-top: 15px;} } @media screen and (max-width: 750px){ #part-six.edifice-six{padding: 108px 0 50px; max-height: inherit;} #part-six.edifice-six .big-title{text-align: left; margin-bottom: 53px;} #part-six.edifice-six .big-title .p1{line-height: 57px; } #part-six.edifice-six .big-title .p1 span{font-size: 50px;line-height: 57px;} #part-six.edifice-six .big-title .p2{line-height: 33px; font-size: 18px; color: #495770;} #part-six.edifice-six .list{width: 100%; display: flex; justify-content: space-between;} #part-six.edifice-six .list .m-item{width: 48.36%; margin-bottom: 35px; padding: 40px 36px 26px; background: #f3f5f8;} #part-six.edifice-six .list .m-item .icon{margin-bottom: 20px;} #part-six.edifice-six .list .m-item .title{margin-bottom: 14px; font-size: 22px; font-family: APR; color:#18181a;} #part-six.edifice-six .list .m-item .brief{margin-bottom: 27px; font-size: 18px; font-family: APL; color:#3d485d; line-height: 33px;} } #part-seven.edifice-seven{padding: 87px 0 55px;background: #f3f5f8; max-height: 759px;} #part-seven.edifice-seven .big-title{margin-bottom: 29px;} #part-seven.edifice-seven .big-title .p1{font-size: 36px; font-family: APR; color:#18181a; margin-bottom: 33px;} #part-seven.edifice-seven .list .item{background: transparent; margin-bottom: 10px;} #part-seven.edifice-seven .list .item:hover{padding-bottom: 34px; height: 248px; background: #0069fb;} #part-seven.edifice-seven .list .item:hover .more{margin-top: 29px;} @media screen and (max-width: 1024px){ #part-seven.edifice-seven .list .item .brief{height: 75px;} } @media screen and (max-width: 750px){ #part-seven.edifice-seven{padding: 108px 0 50px; max-height: inherit;} #part-seven.edifice-seven .big-title{text-align: left; margin-bottom: 53px;} #part-seven.edifice-seven .big-title .p1{line-height: 53px; } #part-seven.edifice-seven .big-title .p1 span{font-size: 50px;line-height: 57px;} #part-seven.edifice-seven .big-title .p2{line-height: 33px; font-size: 18px; color: #495770;} #part-seven.edifice-seven .list {display: flex; justify-content: space-between;} #part-seven.edifice-seven .list .item{width: 48.51%; padding: 51px 37px 28px; flex-direction: column; background: #fff; margin-bottom: 35px;} #part-seven.edifice-seven .list .item .icon{margin: 0 0 35px;} #part-seven.edifice-seven .list .item .info .title{text-align: center; font-size: 22px; font-family: APR; color: #18181a; margin-bottom: 11px;} #part-seven.edifice-seven .list .item .info .brief{text-align: center; font-size: 18px; font-family: APL; color: #3d485d; height: 112px; line-height: 33px;} #part-seven.edifice-seven .list .item:hover{height: auto;} #part-seven.edifice-seven .list .item:hover .info .title, #part-seven.edifice-seven .list .item:hover .info .brief{color: #fff;} } #part-nine.edifice-nine{height: 845px;} #part-nine.edifice-nine .bottom{top: 102px; padding: 77px 3.83% 67px;} #part-nine.edifice-nine .bottom .intro{font-size: 36px; font-family: APR; color:#000000; margin-bottom: 64px;} #part-nine.edifice-nine .bottom .partner-list{display: flex; flex-wrap: wrap;} #part-nine.edifice-nine .bottom .partner-list::before{display: none;} #part-nine.edifice-nine .bottom .partner-list .item{width: 19%; height: 64px; line-height: 64px; margin-bottom: 28px; border: 1px solid #eeeeee; filter: grayscale(65%); font-size: 14px; font-family: APR; color:#18181a; } #part-nine.edifice-nine .bottom .partner-list .item:hover{filter: grayscale(0); box-shadow: 0 10px 25px rgba(76,81,100, 0.14);} #part-nine.edifice-nine .bottom .partner-list .item.more:hover{background: #2977fb; color: #fff;} @media screen and (max-width: 1200px){ #part-nine.edifice-nine{height: 890px;} } @media screen and (max-width: 750px){ #part-nine.edifice-nine{height: 980px;} #part-nine.edifice-nine .bottom{top: 89px; padding: 65px 4.83% 57px; } #part-nine.edifice-nine .bottom .intro{margin-bottom: 51px;} #part-nine.edifice-nine .bottom .partner-list .item{width: 24%; margin-bottom: 21px;} #part-nine.edifice-nine .bottom .partner-list .item.more{width: 129px; height: 49px; text-align: center; line-height: 49px; border: 1px solid #dcdcdc; border-radius: 5px; font-size: 18px; color: #495770; margin: 30px auto 0;} } #part-ten.edifice-ten{padding: 82px 0 102px;} #part-ten.edifice-ten .list .item{padding: 24px 3%;} #part-ten.edifice-ten .list .item>div{font-family: APL; color: #fff;} #part-ten.edifice-ten .list .item .p1{font-size: 14px;} #part-ten.edifice-ten .list .item .p2{font-size: 16px;} #part-ten.edifice-ten .list .item .p3{font-size: 14px; color: #c8c8c8;} #part-ten.edifice-ten .list .item:hover .p3{color: #fff;} @media screen and (max-width: 750px){ #part-ten.edifice-ten{padding: 118px 0 95px;} #part-ten.edifice-ten .big-title{margin-bottom: 82px;} #part-ten.edifice-ten .big-title .p1{text-align: left; font-size: 50px; font-family: APR;} #part-ten.edifice-ten .list{width: 630px;} #part-ten.edifice-ten .list .item .p1{font-size: 18px; margin-bottom: 18px;} #part-ten.edifice-ten .list .item .p2{font-size: 20px;} #part-ten.edifice-ten .list .item .p3{display: none;} #part-ten.edifice-ten .list .item.more{color: #fff; font-size: 18px; font-family: APL; line-height: 95px;} } #part-eleven.edifice-eleven .big-title{margin-bottom: 60px;} #part-eleven.edifice-eleven .big-title .p1{font-size: 34px; font-family: APR; color:#18181a; margin-bottom: 24px;} #part-eleven.edifice-eleven .big-title .p2{font-size: 16px; font-family: APL; color:#495770; line-height: 30px;} @media screen and (max-width: 750px){ #part-eleven.edifice-eleven{padding: 108px 0 57px;} #part-eleven.edifice-eleven .big-title{text-align: left; margin-bottom: 53px;} #part-eleven.edifice-eleven .big-title .p1{width: 100%; line-height: 57px; font-size: 50px;} #part-eleven.edifice-eleven .big-title .p2{width: 100%; line-height: 33px; font-size: 18px; color: #495770;} #part-eleven.edifice-eleven .pic-list .pic{box-shadow: 0 0 24px rgba(0,27,138,0.08);} } /*流程中台*/ #process-one{padding: 90px 0 70px;} #process-one .big-title{margin-bottom: 53px;} #process-one .big-title .p1{font-size: 36px; font-family: APR; color:#000000; margin-bottom: 26px;} #process-one .big-title .p2{font-size: 16px; font-family: APR; color:#3d485d; line-height: 29px;} #process-one .list{width: 100%; display: flex; justify-content: space-around;} #process-one .list .item{width: 25.5%;} #process-one .list .item .up .icon{top: -49px; left: 50%; transform: translateX(-50%); z-index: 1; } #process-one .list .item .up .back{margin: 53px 0 42px;} #process-one .list .item .tit{font-size: 25px; font-family: APR; color:#000000; margin-bottom: 15px;} #process-one .list .item .info{font-size: 16px; font-family: APR; color:#3d485d; margin-bottom: 26px; line-height: 35px;} #process-one .list .item .more{font-size: 14px; font-family: APR; color:#6b768b; } #process-one .list .item:hover .tit, #process-one .list .item:hover .more{color: #146cfb;} #process-one .list .item:hover .up .icon{animation: updown 2s linear infinite;} @media screen and (max-width: 750px){ #process-one{padding: 111px 0 69px;} #process-one .big-title{text-align: left; margin-bottom: 53px;} #process-one .big-title .p1{width: 100%; line-height: 61px; font-size: 50px; margin-bottom: 26px;} #process-one .big-title .p2{width: 100%; line-height: 33px; font-size: 20px; color: #000000;} #process-one .list{flex-wrap: wrap;} #process-one .list .item{width: 100%; margin-bottom: 32px; padding: 19px 42px; display: flex; align-items: center; border: 1px solid #f3f5f8; border-radius: 10px; box-shadow: 0 8px 50px rgba(50,162,250,0.15);} #process-one .list .item .up{width: 22%;} #process-one .list .item .up .icon{top: 5px;} #process-one .list .item:hover .up .icon{animation: inherit;} #process-one .list .item .box{width: calc(60% - 46px); padding-left: 46px;} #process-one .list .item .box .tit{text-align: left; font-size: 24px;} #process-one .list .item .box .info{text-align: left; font-size: 18px; color: #3d485d;} #process-one .list .item .box .more{width: 26px; height: 26px;} #process-one .list .item .box .more .i1{display: inline-block;} #process-one .list .item .box .more .i2{display: none;} #process-one .list .item .box .more:hover .i1{display: none;} #process-one .list .item .box .more:hover .i2{display: inline-block;} } @keyframes updown{ 0%{top: -55px;} 50%{top: -49px;} 100%{top: -55px;} } #process-two{padding: 92px 0 70px; max-height: 780px; background: #f5f7fa;} #process-two .big-title{margin-bottom: 53px;} #process-two .big-title .p1{font-size: 36px; font-family: APR; color:#000000; margin-bottom: 23px;} #process-two .big-title .p2{font-size: 16px; font-family: APR; color:#3d485d; line-height: 29px;} #process-two .list{display: flex; justify-content: center;} #process-two .list .item{width: 24.58%; height: 437px; background: #fff; border: 1px solid #eeeeee; border-right: 0; transition: all .4s ease;} #process-two .list .item:last-child{border-right: 1px solid #eeeeee;} #process-two .list .item .title{display: flex; align-items: center; padding: 25px 19px; border-bottom: 1px solid #eeeeee; } #process-two .list .item .title .icon{width: 43px;} #process-two .list .item .title .icon .i1{display: inline-block;} #process-two .list .item .title .icon .i2{display: none;} #process-two .list .item .title .name{width: calc(100% - 59px); padding-left: 16px; font-size: 22px; font-family: APR; color:#000000;} #process-two .list .item .data-list{height: 290px; margin-bottom: 19px; padding: 0 9.03% 0 27%;} #process-two .list .item .data-list .li{padding: 6px 0; border-bottom: 1px solid #eee; font-size: 16px; font-family: APL; color:#3d485d;} #process-two .list .item .more{width: 100%; padding-left: 26.03%; font-size: 14px; font-family: APL; color:#6b768b;} #process-two .list .item:hover{height: 477px; transform: translateY(-20px); box-shadow: 0 8px 35px rgba(183,183,183,0.35);} #process-two .list .item:hover .title{background: url(/static/images/process/process8.png) no-repeat center/cover; padding: 16px 20px 18px; box-shadow: 0 6px 18px rgba(89, 185, 252, .28);} #process-two .list .item:hover .title .icon .i1{display: none;} #process-two .list .item:hover .title .icon .i2{display: inline-block;} #process-two .list .item:hover .title .name{font-size: 24px; color: #fff;} #process-two .list .item .data-list .li:hover{color: #000;} #process-two .list .item:hover .data-list{height: 343px;} #process-two .list .item:hover .data-list .li{padding: 9px 0;} #process-two .list .item:hover .more{font-size: 16px; font-family: APR; color:#146cfb;} @media screen and (max-width: 750px){ #process-two{padding: 111px 0 38px; max-height: inherit;} #process-two .big-title{text-align: left; margin-bottom: 53px;} #process-two .big-title .p1{width: 100%; line-height: 61px; font-size: 50px; margin-bottom: 26px;} #process-two .big-title .p2{width: 100%; line-height: 33px; font-size: 20px; color: #000000;} #process-two .list{flex-wrap: wrap; justify-content: space-between;} #process-two .list .item{width: 46%; height: auto; margin-bottom: 38px; border-radius: 15px; overflow: hidden;} #process-two .list .item .title{flex-direction: row-reverse; padding: 25px 24px;} #process-two .list .item .title .name{font-size: 24px;} #process-two .list .item .data-list{height: 380px; padding: 0 21.03% 0 13%;} #process-two .list .item .data-list .li{font-size: 18px; padding: 10px 0;} #process-two .list .item .more{padding-left: 13%; margin-bottom: 25px;} #process-two .list .item .more .i1{display: inline-block;} #process-two .list .item .more .i2{display: none;} #process-two .list .item:hover .more .i1{display: none;} #process-two .list .item:hover .more .i2{display: inline-block;} } #process-three{padding: 90px 0 62px;} #process-three .big-title{margin-bottom: 34px;} #process-three .big-title .p1{font-size: 34px; font-family: APR; color:#000000; margin-bottom: 17px;} #process-three .big-title .p2{font-size: 16px; font-family: APR; color:#3d485d; line-height: 34px;} #process-three .list{width: 100%; display: flex; justify-content: space-between;} #process-three .list .item{width: 30.33%; padding: 36px 0 34px; border-radius: 15px;} #process-three .list .item .up .icon{top: -40px; left: 50%; transform: translateX(-50%); z-index: 1; } #process-three .list .item .up .back{margin: 53px 0 42px;} #process-three .list .item .tit{font-size: 22px; font-family: APR; color:#000000; margin-bottom: 16px;} #process-three .list .item .info{font-size: 14px; font-family: APR; color:#3d485d; margin-bottom: 23px; line-height: 26px;} #process-three .list .item .more{font-size: 14px; font-family: APR; color:#6b768b; } #process-three .list .item:hover{box-shadow: 0 5px 30px rgba(143,146,151,0.19);} #process-three .list .item:hover .tit, #process-three .list .item:hover .more{color: #146cfb;} #process-three .list .item:hover .up .icon{animation: updown2 2s linear infinite;} @keyframes updown2{ 0%{top: -45px;} 50%{top: -40px;} 100%{top: -45px;} } @media screen and (max-width: 750px){ #process-three{padding: 111px 0 38px; max-height: inherit;} #process-three .big-title{text-align: left; margin-bottom: 53px;} #process-three .big-title .p1{width: 100%; line-height: 61px; font-size: 50px; margin-bottom: 26px;} #process-three .big-title .p2{width: 100%; line-height: 33px; font-size: 20px; color: #000000;} #process-three .list{flex-wrap: wrap; justify-content: space-between;} #process-three .list .item{width: 100%; height: auto; margin-bottom: 45px; padding: 26px 37px; border-radius: 10px; overflow: hidden; border: 1px solid #f3f5f8; box-shadow: 0 8px 25px rgba(50,162,250,0.15); display: flex;} #process-three .list .item .up{width: 30%;} #process-three .list .item .up .icon{top: 13px;} #process-three .list .item .up .back{margin: 40px 0 0;} #process-three .list .item:hover{box-shadow: 0 8px 25px rgba(50,162,250,0.15);} #process-three .list .item:hover .up .icon{animation: inherit;} #process-three .list .item .box{width: calc(75% - 42px); padding-left: 42px;} #process-three .list .item .tit{text-align: left; font-size: 24px; margin-bottom: 15px;} #process-three .list .item .info{ text-align: left; font-size: 18px; font-family: APL; line-height: 34px;} #process-three .list .item .more .i1{display: inline-block;} #process-three .list .item .more .i2{display: none;} #process-three .list .item:hover .more .i1{display: none;} #process-three .list .item:hover .more .i2{display: inline-block;} } #process-four{padding: 90px 0 34px; background: url(/static/images/process/process12.png) no-repeat center/cover ; color: #fff;} #process-four .big-title{margin-bottom: 47px;} #process-four .big-title .p1{font-size: 36px; font-family: APR; margin-bottom: 24px;} #process-four .big-title .p2{font-size: 16px; font-family: APR; line-height: 26px;} #process-four .cont{} #process-four .m-cont{display: none;} #process-four .cont .line{width: calc(100% - 140px);height: 5px;background: #5299d2;left: 50%;right: 0;margin: 0 auto;top: 50%; transform: translateX(-50%);} #process-four .cont .container{width: 100%;} #process-four .cont .container >.wrapper{justify-content: center;} #process-four .cont .slide{width: 7.5% !important;height: 380px;} #process-four .cont .slide .li .txt{font-family: APR; line-height: 27px; color: #fff;} #process-four .cont .slide .li{width: 100%;bottom: 50%;padding: 0 0 140px;} #process-four .cont .slide .li .i1{width: 21px;height: 21px;background: #003dbc; border: 2px solid #78f7fb; border-radius: 100%; bottom: -14px; z-index: 3; left: 50%; transform: translateX(-50%);} #process-four .cont .slide .li .i1:before{content:""; display: block; width: 30px; height: 30px; border: 2px dashed #78f7fb; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #process-four .cont .slide .li .i1-1{content:""; display: block; width: 44px; height: 44px; border-radius: 50%; background: #2156f2; border: 4px solid #b2badd; position: absolute; top: 89%; left: 50%; transform: translateX(-50%); display: none; z-index: 2;} #process-four .cont .slide .li .i2{width: 1px;height: 120px; border: 1px dashed #5790de; bottom: 20px;left: 50%; transform: translateX(-50%);} #process-four .cont .slide .li:nth-child(2n) .icon{top: auto;bottom: -30px;} #process-four .cont .slide .li .i3{width: 12px; height: 12px; border: 2px solid #fff; background: #36d9fc; border-radius: 50%; top: 16.2%; bottom: 0; left: 50%; transform: translateX(-50%);} #process-four .cont .slide .li.mt{top: 50%;padding: 95px 0 0;} #process-four .cont .slide .li.mt .i1{bottom: auto;top: -12px; width: 25px; height: 25px;} #process-four .cont .slide .li.mt .i1:before{display: none;} #process-four .cont .slide .li.mt .i1-1{top: -22%;} #process-four .cont .slide .li.mt .i2{bottom: auto;top: 0; height: 52px;} #process-four .cont .slide .li.mt .i3{border: 2px solid #b2b9d9; background: #262c55; top: 84%;} #process-four .cont .slide:hover .li .i1{background: #fff; border-color: #fff;} #process-four .cont .slide:hover .li .i1-1{display: block;} #process-four .cont .slide:hover .li .i1:before{display: none;} #process-four .cont .slide:nth-of-type(1) .li .txt{width: max-content; position: absolute; left: 50%; transform: translateX(-50%);} #process-four .cont .slide:nth-of-type(1) .li .year{top: -65%; left: 50%; transform: translateX(-50%);} #process-four .cont .slide:nth-of-type(1) .li, #process-four .cont .slide:nth-of-type(5) .li , #process-four .cont .slide:nth-of-type(9) .li {padding-top: 70px;} #process-four .cont .slide:nth-of-type(1) .li .i1-1, #process-four .cont .slide:nth-of-type(5) .li .i1-1, #process-four .cont .slide:nth-of-type(9) .li .i1-1{top: -30%;} #process-four .cont .slide:nth-of-type(1) .li .i2, #process-four .cont .slide:nth-of-type(5) .li .i2, #process-four .cont .slide:nth-of-type(9) .li .i2{height: 44px; bottom: 0; top: 20px;} #process-four .cont .slide:nth-of-type(2) .li .i1-1, #process-four .cont .slide:nth-of-type(10) .li .i1-1, #process-four .cont .slide:nth-of-type(12) .li .i1-1{top:88.5%;} #process-four .cont .slide:nth-of-type(2) .li .i2, #process-four .cont .slide:nth-of-type(10) .li .i2, #process-four .cont .slide:nth-of-type(12) .li .i2 {height: 110px; bottom: 0; top: 38px;} #process-four .cont .slide:nth-of-type(3) .li , #process-four .cont .slide:nth-of-type(7) .li{padding-top: 130px;} #process-four .cont .slide:nth-of-type(3) .li .i1-1, #process-four .cont .slide:nth-of-type(7) .li .i1-1 {top: -16.5%;} #process-four .cont .slide:nth-of-type(3) .li .i2, #process-four .cont .slide:nth-of-type(7) .li .i2 {height: 100px; bottom: 0; top: 20px;} #process-four .cont .slide:nth-of-type(4) .li, #process-four .cont .slide:nth-of-type(8) .li{padding-bottom: 90px;} #process-four .cont .slide:nth-of-type(4) .li .i1-1 , #process-four .cont .slide:nth-of-type(8) .li .i1-1{top: 83.5%;} #process-four .cont .slide:nth-of-type(4) .li .i2 , #process-four .cont .slide:nth-of-type(8) .li .i2{height: 60px; bottom: 0; top: 33%;} #process-four .cont .slide:nth-of-type(4) .li .i3, #process-four .cont .slide:nth-of-type(8) .li .i3{top: 23.2%;} #process-four .cont .slide:nth-of-type(11) .li, #process-four .cont .slide:nth-of-type(13) .li{padding-top: 110px;} #process-four .cont .slide:nth-of-type(11) .li .i1-1, #process-four .cont .slide:nth-of-type(13) .li .i1-1{top: -20%;} #process-four .cont .slide:nth-of-type(11) .li .i2, #process-four .cont .slide:nth-of-type(13) .li .i2{height: 83px; top: 20px;} #process-four .more{margin: 30px auto 0; width: 119px; height: 40px; border-radius: 5px; border: 1px solid #aaaaaa; line-height: 40px; text-align: center; font-size: 14px; font-family: APR;} #process-four .more:hover{background: #24b8fc; border-color: #24b8fc;} @media screen and (max-width: 750px){ #process-four{padding: 111px 0 38px; background: url(/static/images/process/m-process3.png) no-repeat center/cover ;} #process-four .big-title{width: 84%; margin: 0 auto 30px; text-align: left;} #process-four .big-title .p1{width: 100%; line-height: 61px; font-size: 50px; margin-bottom: 26px; color: #fff;} #process-four .big-title .p2{width: 100%; line-height: 40px; font-size: 20px; color: #fff;} #process-four .cont{display: none;} #process-four .m-cont{display: block;} #process-four .m-cont .box{height: 100%;} #process-four .m-cont .back{width: 100%; height: 64px; background: url(/static/images/process/m-process5.png) no-repeat center; top: 50%; left: 0; transform: translateY(-50%); } #process-four .m-cont .container{height: 100%;} #process-four .m-cont .slide .li .txt{font-size: 20px; font-family: APR; background: url(/static/images/process/m-process6.png) no-repeat center / cover; padding: 22px 27px; border-radius: 15px;} #process-four .m-cont .slide{width: 100%;} /*#process-four .m-cont .slide:first-child{width: 32%;margin-left: 60px;}*/ /*#process-four .m-cont .slide:nth-of-type(2){width: 27%;margin-left: 40px; padding-top: 322px ;}*/ /*#process-four .m-cont .slide:nth-of-type(3){width: 24%; margin-right: 90px;}*/ /*#process-four .m-cont .slide:nth-of-type(4){margin-left: 40px; padding-top: 63px;}*/ #process-four .more{margin-top:0; width: 256px; height: 58px; line-height: 58px; background: #0953ff; border: 1px solid #0953ff; font-size: 18px; font-family: APL; } } #part-five.process-five{padding: 90px 0 34px; color: #fff;} #part-five.process-five .big-title{margin-bottom: 30px;} #part-five.process-five .big-title .p1{font-size: 34px; font-family: APR; margin-bottom: 24px; color: #000;} #part-five.process-five .big-title .p2{font-size: 16px; font-family: APR; line-height: 26px; color: #3d485d;} #part-five.process-five .info{box-shadow: 0 4px 43px rgba(147,155,188,.26);} @media screen and (max-width: 750px){ #part-five.process-five{padding: 111px 0 38px; } #part-five.process-five .big-title{width: 90%; margin: 0 auto 67px; text-align: left;} #part-five.process-five .big-title .p1{width: 100%; line-height: 61px; font-size: 50px; margin-bottom: 26px;} #part-five.process-five .big-title .p2{width: 100%; line-height: 40px; font-size: 20px; color: #000000;} #part-five .more{margin-top:57px; padding: 0; width: 256px; height: 58px; line-height: 58px; background: transparent; border: 1px solid #c8c8c8; font-size: 18px; font-family: APL; } } #part-six.process-six{background: #f3f5f8; max-height: 794px;} @media screen and (max-width: 750px){ #part-six.process-six{max-height: inherit;} #part-six.process-six .big-title{width: 90%; margin: 0 auto 67px; text-align: left;} #part-six.process-six .big-title .p1{width: 100%; line-height: 61px; font-size: 50px; font-family: PFR; margin-bottom: 26px;} #part-six.process-six .big-title .p2{width: 100%; line-height: 40px; font-size: 20px; font-family: APL; color: #000000;} #part-six.process-six .list .item, #part-six.process-six .list .item:hover{height: 297px;} #part-six.process-six .list .item{width: 46%;padding: 40px; background: #fff;} #part-six.process-six .list .item:nth-of-type(4n){margin: 0 3.33% 35px 0;} #part-six.process-six .list .item .icon{margin-bottom:20px;} #part-six.process-six .list .item .icon::before{display: none;} #part-six.process-six .list .item .brief{line-height: 33px; color: #3d485d;} #part-six.process-six .list .item:hover .brief{color: #fff;} #part-six .list .item .more {margin-top: 25px;} #part-six .list .item .more .i1{display: inline-block;} #part-six .list .item .more .i2{display: none;} #part-six .list .item:hover .more .i1{display: none;} #part-six .list .item:hover .more .i2{display: inline-block;} } #part-eight.process-eight{background: #fff;} @media screen and (max-width: 750px){ #part-eight.process-eight .big-title{text-align: left;} #part-eight.process-eight .big-title .p1{width: 100%; line-height: 61px; font-size: 50px; font-family: PFR; margin-bottom: 26px;} #part-eight.process-eight .big-title .p2{width: 100%; line-height: 40px; font-size: 20px; font-family: APL; color: #000000;} #part-eight .cont1{margin-bottom: 40px;} #part-eight .cont1 .item{font-size: 20px;} #part-eight .btn-box .btn{top: 12px;} #part-eight .cont1 .item.swiper-slide-thumb-active{font-size: 20px;} } @media screen and (max-width: 750px){ #part-ten.process-ten .big-title{width: 80%; margin: 0 auto 82px;} } #message{display: none;width: 100%;height: 100%; position: fixed; top: 0; left: 0; margin: auto; z-index: 200; background-color: rgba(0, 0, 0, 0.7);} #message .cont .info{ width: 480px; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; background: #FFFFFF; border: 1px solid #E6EBF2; border-radius: 2px; border-radius: 2px; position: relative; padding: 2% 0; overflow-y: auto;height: 100vh;font-family: 'APR';font-size: 14px;} #message .cont .confirm-btn{width: 60px;display: block;line-height: 40px;border: 1px solid #004BFF;-webkit-border-radius: 2px;border-radius: 2px;font-family: 'APR';font-size: 14px;color: #004BFF;margin: 8px auto 0;-webkit-transition: all 0.5s;transition: all 0.5s;} #message .cont .confirm-btn:hover {background-color: #004BFF;color: #fff;} @media screen and (max-width: 750px){ #message .cont .info{width: 100%; font-size: 26px;} #message .cont .confirm-btn{width: 150px; text-align: center; padding: 15px 0; font-size: 26px;} #pop-box.m-pop{background: #004ffb; padding: 24px 40px;} #pop-box.m-pop .m-box{ display: flex; justify-content: space-between; align-items: center;} #pop-box.m-pop .m-box .left-txt{font-size: 24px; font-family: APL; color: #fff;} #pop-box.m-pop .m-box .right-btn{width: 159px; height: 48px; text-align: center; line-height: 50px; border-radius: 10px; font-size: 18px; font-family: APL; color: #000000; background: linear-gradient(to bottom, #feda32, #fcb32b);} } /* 解决方案 */ .obj{object-fit: cover;} .border-radius25{border-radius: 25px;} .border-radius18{border-radius: 18px;} .border-radius14{border-radius: 14px;} .border-radius10{border-radius: 10px;} .text-over{overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} .text-line2{overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .text-line3{overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} .text-line4{overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4;} .text-line5{overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 5;} .sTilte{font-size: 46px; line-height: 64px; color: #333;} .sBrief{margin: 14px auto 0; width: 70.83%; font-size: 14px; line-height: 26px; color: #333; font-weight: 300;} .solution_btns{margin-top: 55px; display: flex; justify-content: center;} .solution_btns .btn{padding: 0 20px; margin: 0 9px; width: 170px; height: 50px; border: 1px solid #b9babc; background-color: #fff; font-size: 14px; line-height: 48px; color: #333; text-align: center;} /* .solution_btns .btn:hover{border-color: #0055fb; background: #0055fb; color: #fff;} */ .solution_btns .btn:first-child{background-color: #0055fb; color: #fff; border-color: #0055fb;} .solution_btns .btn:first-child:hover{background: #4682FF; border-color: #4682FF;} .solution_btns .btn:last-child{background-color: #fff; color: #0055fb; border-color: #0055fb;} .solution_btns .btn:last-child:hover{background: rgb(159, 191, 255, 0.15);} @media (max-width: 1536px) { .sTilte{font-size: 44px;} } @media (max-width: 1440px) { .sTilte{font-size: 42px;} } @media (max-width: 1366px) { .solution_btns{margin-top: 45px;} } @media (max-width: 1280px) { .sTilte{font-size: 40px;} } @media (max-width: 1024px) { .solution_btns .btn{width: 155px; height: 45px; line-height: 43px;} } @media (max-width: 750px) { .sTilte{font-size: 40px; line-height: 57px; margin-bottom: 16px; font-weight: bold;} .sBrief{width: 90%; font-size: 22px; line-height: 1.8;} .solution_btns .btn{min-width: 270px; height: 55px; font-size: 20px; line-height: 53px; } } #header .solution_head{} #header .solution_head .logo{margin: 18px 0; display: inline-flex;} #header .solution_head .logo .pic{width: 122px;} #header .solution_head .logo .name{font-size: 14px; color: #333;} #header .solution_head .phone{font-size: 22px; line-height: 1; color: #000; font-weight: 600;} #header .solution_head .btn{margin-left: 13px; width: max-content!important; min-width: 115px!important; height: 34px!important; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 17px;} #header .solution_head .caseBtn{border: 1px solid #333; color: #333;} #header .solution_head .caseBtn:hover{border-color: #0064ff; color: #0064ff;} #header .solution_head .applyBtn{background-color: #0064ff; color: #fff;} #header .solution_head .applyBtn:hover{opacity: 0.8;} @media (max-width: 1024px) { #header .solution_head .logo{margin: 27px 0;} #header .solution_head .logo .name{font-size: 16px; color: #fff;} } #solution_banner{width: 100%;} #solution_banner .main{width: 100%;} #solution_banner .pic{width: 100%; height: 590px;} #solution_banner .box{height: max-content; top: 20.34%; z-index: 2;} #solution_banner .title{font-size: 50px; line-height: 68px; color: #222; font-weight: 600;} #solution_banner .brief{margin-top: 10px; width: 43%; font-size: 18px; line-height: 27px; color: #222;} #solution_banner .btn-list{width: 100%; height: max-content; /*margin-top: 124px;*/ transform: translateX(0); left: 0; position: absolute; bottom: 24%;} #solution_banner .btn-list .btn{padding: 0 20px; margin-right: 20px; width: 170px; height: 50px;border-radius: 10px; border: 0; background-color: #fff; font-size: 14px; line-height: 50px; color: #333; text-align: center;} /* #solution_banner .btn-list .btn:hover{background-color: #0055fb; color: #fff;} */ #solution_banner .btn-list .btn:first-child{background-color: #0055fb; color: #fff;} #solution_banner .btn-list .btn:first-child:hover{background: #4682FF;} #solution_banner .btn-list .btn:last-child{background-color: #fff; color: #0055fb;} #solution_banner .btn-list .btn:last-child:hover{background: rgb(159, 191, 255, 0.15);} #solution_banner .bot{width: 100%; bottom: 5.08%; z-index: 5;} #solution_banner .thumbs{overflow: visible !important; border-radius: 10px; background-image: -moz-linear-gradient( 90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%); background-image: -webkit-linear-gradient( 90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%); background-image: -ms-linear-gradient( 90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);} #solution_banner .thumbs .slide{width: 25%; height: 68px; font-size: 16px; line-height: 68px; color: #333; border-radius: 10px; background-color: transparent; transition: all 0.3s ease;} #solution_banner .thumbs .slide.swiper-slide-thumb-active{background-color: #fff; box-shadow: 0px 8px 30px 0px rgba(0, 85, 255, 0.15); color: #0064ff;} @media (max-width: 1680px) { #solution_banner .pic{height: 30vw;} #solution_banner .btn-list{margin-top: 5vw;} } @media (max-width: 1536px) { #solution_banner .title{font-size: 48px;} #solution_banner .brief{font-size: 16px;} #solution_banner .btn-list{margin-top: 3.5vw;} #solution_banner .thumbs .slide{height: 60px; line-height: 60px;} } @media (max-width: 1366px) { #solution_banner .box{top: 10.5%;} #solution_banner .title{font-size: 46px;} } @media (max-width: 1280px) { #solution_banner .title{font-size: 44px;} #solution_banner .btn-list{margin-top: 2.5vw;} } @media (max-width: 1200px) { #solution_banner .thumbs .slide{height: 55px; line-height: 55px;} #solution_banner .title{font-size: 42px;} #solution_banner .brief{margin-top: 8px; font-size: 14px; line-height: 24px;} } @media (max-width: 1024px) { #solution_banner .btn-list .btn{height: 45px; line-height: 45px;} #solution_banner .thumbs .slide{height: 50px; line-height: 50px; font-size: 14px;} } @media (max-width: 750px) { #solution_banner .pic{height: max-content;} #solution_banner .pic img{position: relative;} #solution_banner .slide{position: relative;} #solution_banner .box{top: 0; height: 100%; padding-top: 32%;} #solution_banner .title {text-align: center; font-size: 70px; line-height: 87px; margin-bottom: 5px; color: #fff;} #solution_banner .brief {text-align: center; width: 100%; font-size: 24px; line-height: 41px; color: #fff;} #solution_banner .btn-list {margin-top: 0; width: 100%; justify-content: center; position: absolute; bottom: 13%; } #solution_banner .btn-list .cw1200{justify-content: center;} #solution_banner .btn-list .btn{width: 30%; height: 60px; line-height: 60px; font-size: 30px; color: #333; background: #fff;} #solution_banner .swiper-pagination{bottom: 2%;} #solution_banner .swiper-pagination .swiper-pagination-bullet{margin: 0 8px; width: 15px; height: 15px; background-color: #fff; opacity: 0.5;} #solution_banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity: 1;} #solution_banner .bot{display: none;} } #solution_one{padding: 70px 0; background: #f6f6f8 url(/static/images/solution/part1-back.png) no-repeat center bottom/100% 100%;} #solution_one .list{margin-top: 50px; width: 100%; display: flex; justify-content: space-between;} #solution_one .item{width: 32.5%; border: 1px solid #fff; transition: all .4s ease;} #solution_one .top{width: 100%; height: 100px;} #solution_one .top .back{width: 100%; height: 100%;} #solution_one .top .i1{opacity: 1;} #solution_one .top .i2{opacity: 0;} #solution_one .top .tit{top: 50%; left: 35px; transform: translateY(-50%); font-size: 20px; line-height: 1; color: #000;} #solution_one .info{padding: 30px 35px 35px; background: #f7f9fe url(/static/images/solution/part1-back2.jpg) no-repeat center bottom/100% 100%;} #solution_one .brief{font-size: 16px; line-height: 30px; color: #505050; font-weight: 300;} #solution_one .btns{margin-top: 100px; display: flex; justify-content: space-between;} #solution_one .btn{width: 47.46%; height: 44px; padding: 0 20px; background-color: #fff; border: 1px solid #d7d7d7; font-size: 14px; line-height: 42px; color: #333; text-align: center;} #solution_one .btn:first-child{background-color: #0055fb; color: #fff; border-color: #0055fb;} #solution_one .btn:first-child:hover{background: #4682FF; border-color: #4682FF;} #solution_one .btn:last-child{background-color: #fff; color: #0055fb; border-color: #0055fb;} #solution_one .btn:last-child:hover{background: rgb(159, 191, 255, 0.15);} #solution_one .item:hover {box-shadow: 0px 4px 30px 0px rgba(149, 196, 255, 0.2);} #solution_one .item:hover .i1{opacity: 0;} #solution_one .item:hover .i2{opacity: 1;} #solution_one .item:hover .top .tit{color: #fff;} /* #solution_one .btn:hover {background-color: #0055fb; color: #fff;} */ @media (max-width: 1536px) { #solution_one .btns{margin-top: 80px;} } @media (max-width: 1440px) { #solution_one .top .tit{font-size: 18px;} #solution_one .btns{margin-top: 65px;} } @media (max-width: 1200px) { #solution_one .top{height: 92px;} } @media (max-width: 1024px) { #solution_one .top{height: 80px;} #solution_one .info{padding: 23px 30px 30px;} } @media (max-width: 750px) { #solution_one{padding: 80px 0; background-size: auto 100%; background-position: right bottom;} #solution_one .list{flex-wrap: wrap;} #solution_one .item{width: 100%; margin-right: 0; margin-bottom: 26px; border-radius: 10px; overflow: hidden;} #solution_one .top{height: 150px;} #solution_one .top .tit{font-size: 26px; color: #fff;} #solution_one .info{padding: 32px 37px;} #solution_one .brief{font-size: 22px; line-height: 1.8;} #solution_one .btn{height: 55px; line-height: 53px; font-size: 20px;} #solution_one .item .i1{opacity: 0; height: 150px;} #solution_one .item .i2{opacity: 1; height: 150px;} } #solution_two{padding: 80px 0 70px; background: #fff url(/static/images/solution/part2-back.png) no-repeat center bottom / 100% 100%;} #solution_two .cate_list{margin-top: 30px; display: flex; justify-content: center;} #solution_two .cate{margin: 0 19px; padding: 0 20px; min-width: 219px; width: max-content; height: 50px; background-color: #fff; border: 1px solid #bcbcbc; font-size: 16px; line-height: 48px; color:#18181a; text-align: center; transition: all 0.5s ease;} #solution_two .cate:hover, #solution_two .cate.cur{border-color: #0055ff; background: #0055ff; color: #fff;} #solution_two .list{margin-top: 35px; } #solution_two .item .pic{margin: 0 auto; min-width: 1205px; width: 94%; height: 456px;} @media (max-width: 1680px) { #solution_two .item .pic{height: 29vw;} } @media (max-width: 1440px) { #solution_two .item .pic{height: 33vw;} } @media (max-width: 1366px) { #solution_two .item .pic{height: 34vw;} } @media (max-width: 1200px) { #solution_two .item .pic{min-width: 100%; width: 100%;} } @media (max-width: 750px) { #solution_two .cate{min-width: 270px; height: 55px; font-size: 22px; line-height: 53px; } #solution_two .item .pic{height: 35vw;} } #solution_three{padding: 80px 0 70px; background-color: #f2f2f2;} #solution_three .box{margin-top: 55px; width: 100%; min-height: 507px; background-color: #fff; box-shadow: 0px 4px 26px 0px rgba(0, 0, 0, 0.08); display: flex;} #solution_three .left { width: 32.20339%; background: url(/static/images/solution/three-bg.png) no-repeat top center/100% 100%; display: flex; flex-direction: column; justify-content: space-between;} #solution_three .left .item {width: 100%; padding: 25px 30px; background-color: rgba(247, 247, 247, 0.4); display: flex; justify-content: center; align-items:start; flex-direction: column; position: relative;} #solution_three .left .item::after{content: ""; display: block; width: 9px; height: 9px; background: url(/static/images/solution/part3-icon2.png) no-repeat center center; position: absolute; top: 50%; right: 35px; transform: translateY(-50%); z-index: 1;} #solution_three .left .item .name { font-size: 18px; color: #000001; line-height: 24px;} #solution_three .left .item .brief { display: none; margin-top: 15px; padding-top: 15px; font-size: 14px; font-weight: lighter; color: #585858; line-height: 1.8; border-top: 1px solid #d4d4d4; position: relative; height: 110px; transition: display 0.5s ease;} #solution_three .left .item:not(:first-child) { margin-top: 3px; } #solution_three .left .item.cur {padding: 30px 30px 25px; background-color: #fafafa; } #solution_three .left .item.cur::after{display: none;} #solution_three .left .item.cur .name {font-size: 22px; color: #004bff; } #solution_three .left .item.cur .brief { display: block; } /* #solution_three .left .item.cur .brief::after { content: ' '; position: absolute; top: 3px; width: 2px; height: 14px; background: #2A6FFF; -webkit-border-radius: 2px; border-radius: 2px; left: -10px; } */ /* #solution_three .left .item.cur{ background: #0075ef url(/static/images/solution/part3-back.jpg) no-repeat center center/100% 100%; align-items: top;} #solution_three .left .item.cur::after{opacity: 0;} #solution_three .left .item.cur .name{color: #fff;} #solution_three .left .item.cur .brief{display: block;} */ #solution_three .right{width: calc(100% - 32.33%); padding: 30px 0;} #solution_three .right .inBox{width: 100%; height: 100%; /*display: flex; flex-direction: column;justify-content: center; align-items: center;*/ } #solution_three .right .picBox{width: 91%; height: 360px;} #solution_three .right .inBox.onePic{display: flex; flex-direction: column;justify-content: center; align-items: center;} #solution_three .right .inBox.onePic .picBox{height: 430px;} #solution_three .right .pic, #solution_three .right .in{width: 100%; height: 100%;} #solution_three .right .in .infoBox{margin-bottom: 16px;} #solution_three .right .in .tit{font-size: 20px; line-height: 1; color: #000; font-weight: 500;} #solution_three .right .swiBox .container{width: 93%;} #solution_three .right .swiBox, #solution_three .right .swiBox .container .slide{width: 100%;} #solution_three .right .swiBox .container .slide .pic{margin-top: 15px; height: 385px;} #solution_three .right .swiBox .container .slide img{max-width: 100%;} #solution_three .right .page{bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5;} #solution_three .right .page .swiper-pagination-bullet{margin: 0 9px; width: 12px; height: 12px; background-color: #e5e5e5; opacity: 1;} #solution_three .right .page .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #0055ff; border-color: #0055ff;} @media (max-width: 1440px) { #solution_three .box{min-height: 470px;} #solution_three .right .page{bottom: 17px;} #solution_three .right .page .swiper-pagination-bullet{margin: 0 7px} #solution_three .left .item{padding: 25px 45px;} #solution_three .left .item.cur{padding: 30px 35px 25px;} } @media (max-width: 1366px) { #solution_three .box{margin-top: 40px;} #solution_three .left .item.cur .name{font-size: 20px;} } /* @media (max-width: 1200px) { #solution_three .left .item{padding: 20px 43px 17px 30px;} } */ @media (max-width: 1024px) { #solution_three .left .item .brief{padding-top: 15px;} } /* #solution_four .left{width: 32.33%; display: flex; flex-direction: column; justify-content: flex-start;} #solution_four .left .item{margin-top: 3px; padding: 40px 44px 38px 35px; width: 100%; background: #f7f7f7; position: relative; display: flex; justify-content: center; align-items:start; flex-direction: column;}= #solution_four .left .item:first-child{margin-top: 0;} #solution_four .left .item .name{font-size: 16px; line-height: 23px; color: #4c5b76; } #solution_four .left .item .brief{display: none; margin-top: 20px; height: calc(25px * 4); font-size: 14px; line-height: 25px; color: #fff; font-weight: 300; transition: display 0.5s ease;} #solution_four .left .item.cur .name{color: #fff;} #solution_four .left .item.cur .brief{display: block;} #solution_four .left { width: 32.20339%; padding: 34px 0; background-image: url(/static/images/solution/main3_left_bg.png); } #solution_four .left .item { padding: 25px 0 25px 35px; background-color: rgba(255, 255, 255, 0.3); } #solution_four .left .item .name { font-size: 18px; color: #121933; line-height: 24px;} #solution_four .left .item .brief { font-size: 14px; font-weight: lighter; color: #595959; line-height: 20px; margin-top: 5px; display: none; position: relative; height: 80px; transition: display 0.5s ease;} #solution_four .left .item .block{margin-top: 0.1rem;display: none;} #solution_four .left .item .block .picture_container { padding-top: 67.5%; } #solution_four .left .item:not(:first-child) { margin-top: 4px; } #solution_four .left .item.cur { padding:30px 60px 20px; background-color: #fff; } #solution_four .left .item.cur .name { color: #2A6FFF; } #solution_four .left .item.cur .brief { display: block; } #solution_four .left .item.cur .brief::after { content: ' '; position: absolute; top: 3px; width: 2px; height: 14px; background: #2A6FFF; -webkit-border-radius: 2px; border-radius: 2px; left: -10px; } #solution_four .right{width: calc(100% - 32.33%); padding: 30px 0;} #solution_four .right .pic, #solution_four .right .in{width: 100%; height: 100%;} #solution_four .right .in .infoBox{margin-bottom: 16px;} #solution_four .right .in .infoBox .tit{font-size: 18px; line-height: 28px; color: #000; font-weight: 600;} #solution_four .right .swiBox .container{width: 93%; height: 385px;} #solution_four .right .swiBox, #solution_four .right .swiBox .container .slide{width: 100%; height: 100%; max-width: 100%; max-height: 100%;} #solution_four .right .swiBox .container .slide img{max-width: 100%;} #solution_four .right .page{bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5;} #solution_four .right .page .swiper-pagination-bullet{margin: 0 9px; width: 12px; height: 12px; background-color: #e5e5e5; opacity: 1;} #solution_four .right .page .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #0055ff; border-color: #0055ff;} */ #solution_four{padding: 80px 0 70px; background-color: #f9fbff;} #solution_four .box{margin-top: 55px; width: 100%; min-height: 507px; background-color: #fff; box-shadow: 0px 4px 26px 0px rgba(0, 0, 0, 0.08); display: flex;} #solution_four .left { width: 32.20339%; background: url(/static/images/solution/three-bg.png) no-repeat top center/100% 100%; display: flex; flex-direction: column; justify-content: space-between;} #solution_four .left .item {width: 100%; padding: 36px 30px; background-color: rgba(247, 247, 247, 0.4); display: flex; justify-content: center; align-items:start; flex-direction: column; position: relative;} #solution_four .left .item::after{content: ""; display: block; width: 9px; height: 9px; background: url(/static/images/solution/part3-icon2.png) no-repeat center center; position: absolute; top: 50%; right: 35px; transform: translateY(-50%); z-index: 1;} #solution_four .left .item .name { font-size: 18px; color: #000001; line-height: 24px;} #solution_four .left .item .brief { display: none; margin-top: 15px; padding-top: 15px; font-size: 14px; font-weight: lighter; color: #585858; line-height: 1.8; border-top: 1px solid #d4d4d4; position: relative; height: 110px; transition: display 0.5s ease;} #solution_four .left .item:not(:first-child) { margin-top: 3px; } #solution_four .left .item.cur {padding: 35px 30px 25px; background-color: #fafafa; } #solution_four .left .item.cur::after{display: none;} #solution_four .left .item.cur .name {font-size: 22px; color: #004bff; } #solution_four .left .item.cur .brief { display: block; } #solution_four .right{width: calc(100% - 32.33%); padding: 30px 0;} #solution_four .right .inBox{width: 100%; height: 100%;} #solution_four .right .picBox{width: 91%; height: 360px;} #solution_four .right .inBox.onePic{display: flex; flex-direction: column;justify-content: center; align-items: center;} #solution_four .right .inBox.onePic .picBox{height: 430px;} #solution_four .right .pic, #solution_four .right .in{width: 100%; height: 100%;} #solution_four .right .in .infoBox{margin-bottom: 16px;} #solution_four .right .in .tit{font-size: 20px; line-height: 1; color: #000; font-weight: 500;} #solution_four .right .in .brief{margin-top: 10px; font-size: 14px; line-height: 1; color: #585858; font-weight: 300;} #solution_four .right .swiBox .container{width: 93%;} #solution_four .right .swiBox, #solution_four .right .swiBox .container .slide{width: 100%;} #solution_four .right .swiBox .container .slide .pic{margin-top: 15px; height: 385px;} #solution_four .right .swiBox .container .slide img{max-width: 100%;} #solution_four .right .page{bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5;} #solution_four .right .page .swiper-pagination-bullet{margin: 0 9px; width: 12px; height: 12px; background-color: #e5e5e5; opacity: 1;} #solution_four .right .page .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #0055ff; border-color: #0055ff;} @media (max-width: 1440px) { #solution_four .box{min-height: 470px;} #solution_four .right .page{bottom: 17px;} #solution_four .right .page .swiper-pagination-bullet{margin: 0 7px} #solution_four .left .item{padding: 36px 35px;} #solution_four .left .item.cur{padding: 35px 35px 25px;} } @media (max-width: 1366px) { #solution_four .box{margin-top: 40px;} #solution_four .left .item.cur .name{font-size: 20px;} } /* @media (max-width: 1200px) { #solution_four .left .item{padding: 20px 43px 17px 30px;} } */ @media (max-width: 1024px) { #solution_four .left .item .brief{padding-top: 15px;} } #solution_five{padding: 80px 0 70px; background-color: #f1f5f7;} #solution_five .cate{margin-top: 30px; display: flex;} #solution_five .cate .li{width: 20%; height: 45px; border-bottom: 1px solid #e1e2e3; background-color: transparent; transition: all 0.5s ease; border-bottom-left-radius: 0; border-bottom-right-radius: 0; font-size: 16px; color: #333; line-height: 44px; text-align: center;} #solution_five .cate .li.cur{background-color: #0055ff; border-color: #0055ff; color: #fff;} #solution_five .box{margin-top: 50px;} #solution_five .item{width: 100%;} #solution_five .cont{display: flex; justify-content: space-between; align-items: start;} #solution_five .cont .info{width: 41.25%;} #solution_five .cont .info .tag{margin-right: 10px; padding: 0 15px; width: max-content; height: 30px; border-radius: 4px; font-size: 12px; line-height: 30px; color: #000; background-color: #e0e9f9;} #solution_five .cont .info .tag:nth-child(1){background-color: #99e1ff;} #solution_five .cont .info .tag:nth-child(2){background-color: #afebc8;} #solution_five .cont .info .tag:nth-child(3){background-color: #fdcd99;} #solution_five .cont .info .tag:nth-child(4){background-color: #ffc6d5;} #solution_five .cont .info .name{margin: 13px 0 20px; padding-bottom: 22px; font-size: 28px; line-height: 40px; color: #000; font-weight: 600; border-bottom: 1px solid #d5d5d5;} #solution_five .cont .info .brief{font-size: 14px; line-height: 28px; color: #585858; font-weight: 300; } #solution_five .cont .info .related{margin-top: 30px;} #solution_five .cont .info .related .tit{font-size: 16px; line-height: 24px; color: #333; font-weight: 600; } #solution_five .cont .info .related .links{display: flex; flex-wrap: wrap;} #solution_five .cont .info .related .links .link{margin-top: 10px; margin-right: 15px; padding: 0 10px; width: max-content; min-width: 120px; height: 38px; font-size: 14px; line-height: 38px; color: #333; background-color: #fff; border-radius: 8px; box-shadow: 0px 6px 15px 0px rgba(169, 169, 169, 0.08);} #solution_five .cont .info .related .links .link:hover{background-color: #0055ff; color: #fff;} #solution_five .cont .info .btns{margin-top: 25px; display: flex;} #solution_five .cont .info .btns .btn{margin-right: 17px; padding: 0 20px; width: max-content; min-width: 152px; height: 45px; background-color: #fff; border: 1px solid #0055ff; font-size: 14px; line-height: 43px; color: #0055ff;} /* #solution_five .cont .info .btns .btn:hover{background-color: #0055ff; color: #fff;} */ #solution_five .cont .info .btns .btn:first-child{background-color: #0055fb; color: #fff; border-color: #0055fb;} #solution_five .cont .info .btns .btn:first-child:hover{background: #4682FF; border-color: #4682FF;} #solution_five .cont .info .btns .btn:last-child{background-color: #fff; color: #0055fb; border-color: #0055fb;} #solution_five .cont .info .btns .btn:last-child:hover{background: rgb(159, 191, 255, 0.15);} #solution_five .cont .pic{width: 50%; height: 430px;} #solution_five .logos{margin-top: 55px; display: flex; flex-wrap: wrap;} #solution_five .logos .logo{margin-top: 15px; margin-right: 1.25%; width: 10%; height: 60px; line-height: 60px; background-color: #fff; border-radius: 8px; overflow: hidden;} #solution_five .logos .logo:nth-child(-n+9){margin-top: 0;} #solution_five .logos .logo:nth-child(9n){margin-right: 0;} #solution_five .logos .logo img{max-width: 80%; max-height: 80%; transition: all 0.5s ease;} #solution_five .logos .logo:hover{box-shadow: 0 10px 25px rgba(76,81,100, 0.14);} #solution_five .logos .logo.more:hover{background: #2977fb; color: #fff;} #solution_five .logos .logo:hover img{transform: scale(1.08);} #solution_five .more{margin: 55px auto 0; width: 230px; height: 50px; background-color: #fff; border: 1px solid #adadad; font-size: 14px; line-height: 48px; color: #333;} #solution_five .more:hover{background-color: #0055ff; border-color: #0055ff; color: #fff;} @media (max-width: 1680px) { #solution_five .cont .info .name{margin: 13px 0 17px; padding-bottom: 18px} #solution_five .cont .info .related{margin-top: 23px;} #solution_five .cont .pic{height: 25vw;} } @media (max-width: 1440px) { #solution_five .cont .info .name{font-size: 24px; line-height: 34px;} #solution_five .cont .info .brief{line-height: 25px;} #solution_five .cont .info .related .tit{font-size: 14px; line-height: 21px;} #solution_five .more{margin-top: 40px;} } @media (max-width: 1366px) { #solution_five .cont .pic{height: 29vw;} } @media (max-width: 1280px) { #solution_five .cont .pic{height: 32vw;} } @media (max-width: 1024px) { #solution_five .cont .info{width: 44%;} #solution_five .cont .pic{width: 52%; height: 34vw;} #solution_five .more{width: 220px; height: 45px; line-height: 43px;} } @media (max-width: 750px) { #solution_five .cate .li{height: 55px; font-size: 22px; line-height: 53px;} #solution_five .cont{flex-direction: column-reverse;} #solution_five .cont .info{width: 100%; margin-top: 30px;} #solution_five .cont .info .tag{height: 40px; font-size: 18px; line-height: 40px;} #solution_five .cont .info .name{margin: 20px 0 17px; font-size: 24px;} #solution_five .cont .info .brief{font-size: 20px;} #solution_five .cont .info .related{margin-top: 30px;} #solution_five .cont .info .related .tit{font-size: 20px; line-height: 1.3;} #solution_five .cont .info .related .links .link { margin-top: 13px; min-width: 140px; height: 50px; font-size: 20px; line-height: 48px; } #solution_five .cont .info .btns .btn{min-width: 166px; height: 55px; font-size: 20px; line-height: 53px;} #solution_five .logos {margin-top: 30px;} #solution_five .logos .logo{margin-top: 15px; margin-right: 2.4%; width: 31.6%; height: 66px; line-height: 66px;} #solution_five .logos .logo:nth-child(-n+10){margin-top: 15px;} #solution_five .logos .logo:nth-child(10n){margin-right: 2.4%;} #solution_five .logos .logo:nth-child(-n+3){margin-top: 0;} #solution_five .logos .logo:nth-child(3n){margin-right: 0;} #solution_five .more{width: 250px; height: 55px; line-height: 53px; font-size: 20px;} #solution_five .cont .pic{width: 100%; height: 66vw;} } @keyframes leftMove_index { from { transform: translateX(0);} to { transform: translateX(-50%);} } @keyframes rightMove_index { from { transform: translateX(-50%);} to { transform: translateX(0);} } #solution_six{padding: 80px 0 70px; background: #f9fafc url(/static/images/solution/part6-back.jpg) no-repeat center center/ 100% 100%;} #solution_six .number_box{} #solution_six .number_box { margin-top: 65px;display: -webkit-flex; display: -ms-flexbox; display: flex;} #solution_six .number_box li { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; height: 105px; border-right: 1px solid #d5d5d5; } #solution_six .number_box li:last-child { border-right: 0px;} #solution_six .number_box .number {color: #0055ff; line-height: 1; position: relative; margin-right: -21px;} #solution_six .number_box .number .num, #solution_six .number_box .number .unit { font-size: 60px; font-weight: 600;} #solution_six .number_box .number .unit{display: inline-block;} #solution_six .number_box .number img { width: 22px; height: 32px; margin: -13px 0px 0px -9px; vertical-align: top;} #solution_six .number_box .intro { font-size: 20px; color: #000; margin-top: 10px;} #solution_six .cont{margin-top: 75px;} #solution_six .pictures{ margin-top: 25px; height: 55px; white-space: nowrap;} #solution_six .pictures:first-child{margin-top: 0;} #solution_six .pictures .demos{ width: max-content; height: 100%; white-space: nowrap;} #solution_six .pictures .demos .slide{ width: max-content; height: 100%;} #solution_six .pictures .demos .img{ display: inline-block; width: 130px; margin: 0 7px; height: 100%; overflow: hidden;} #solution_six .pictures .demos .img img{max-width: 90%; max-height: 85%;} #solution_six .pictures:nth-child(2) .demos{ top: 0; right: 0;} #solution_six .aniLeft { transition: all; animation: leftMove_index infinite linear 50s;} #solution_six .aniRight { transition: all; animation: rightMove_index infinite linear 50s;} #solution_six .tip{margin-top: 25px; font-size: 12px; line-height: 22px; color: #585858;} #solution_six .more{margin: 50px auto 0; width: 230px; height: 50px; background-color: #fff; border: 1px solid #adadad; font-size: 14px; line-height: 48px; color: #333;} #solution_six .more:hover{background-color: #0055ff; border-color: #0055ff; color: #fff;} @media (max-width: 1680px) { #solution_six .number_box .number .num, #solution_six .number_box .number .unit{font-size: 50px;} #solution_six .cont{margin-top: 50px;} } @media (max-width: 1536px) { #solution_six .number_box{margin-top: 50px;} } @media (max-width: 1440px) { #solution_six .number_box .number .num, #solution_six .number_box .number .unit{font-size: 44px;} #solution_six .number_box .intro{font-size: 18px;} #solution_six .more{margin-top: 40px;} } @media (max-width: 1024px) { #solution_six .number_box .number .num, #solution_six .number_box .number .unit{font-size: 38px;} #solution_six .number_box .intro{font-size: 16px;} #solution_six .more{width: 220px; height: 45px; line-height: 43px;} } @media (max-width: 750px) { #solution_six{background-size: 100% auto;} #solution_six .number_box{margin-top: 15px; flex-wrap: wrap;} #solution_six .number_box li{margin-top: 30px; width: 50%; flex: auto;} #solution_six .number_box li:nth-child(2n){border-right: 0;} #solution_six .number_box .intro{font-size: 20px;} #solution_six .more{width: 250px; height: 55px; line-height: 53px; font-size: 20px;} #solution_six .pictures{height: 65px;} #solution_six .pictures .demos .img{width: 150px;} #solution_six .pictures .demos .img img{max-width: 90%; max-height: 95%; width: 78%;} #solution_six .tip{font-size: 16px; line-height: 1.2;} } #solution_seven { padding: 88px 0px; background: #FBFCFF;} #solution_seven .honorList {margin: 63px auto 0; width: 100%; border-bottom: 1px solid #e7e8ed;} #solution_seven .honorList .swiper-wrapper{display: flex; justify-content: center;} #solution_seven .honorList .slide {margin: 0 26px; padding: 0px 77px 13px; width: auto; font-size: 18px; color: #1D2129; font-weight: 600; border-bottom: 2px solid transparent; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; cursor: pointer;} #solution_seven .honorList .slide.swiper-slide-thumb-active{color: #004BFF; border-color: #004BFF;} #solution_seven .honorMain {margin-top: 42px; width: 100%; } #solution_seven .honorMain .slide{padding: 0 38px; opacity: 0 !important;} #solution_seven .honorMain .slide.swiper-slide-active{opacity: 1 !important;} #solution_seven .honorMain ul { margin: -10px -6px; display: flex; flex-wrap: wrap;} #solution_seven .honorMain ul.hide{display: none;} #solution_seven .honorMain li { width: calc(25% - 12px); margin: 10px 6px; box-shadow: 0px 5px 9px 0px rgba(52, 94, 184, 0.2); border-radius: 4px; background-color: #fff; overflow: hidden; cursor: pointer;} #solution_seven .honorMain .image {width: 100%; height: 265px; position: relative;} #solution_seven .honorMain .image .pic{display: block; width: 100%; height: 100%;} #solution_seven .honorMain .image .pic img{-webkit-transition: all 0.4s ease; transition: all 0.4s ease;} #solution_seven .honorMain .image .btn {position: absolute; top: 8px; right: 8px; z-index: 10; width: 24px; height: 24px; background: #E7EDFA; border-radius: 4px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; opacity: 0; visibility: hidden;} #solution_seven .honorMain .image .btn img{width: 14px;} #solution_seven .honorMain .content {padding: 20px 12px; text-align: center; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;} #solution_seven .honorMain .content .title {font-size: 18px; line-height: 25px; color: #1D2129; font-weight: 500; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;} #solution_seven .honorMain .content .intro {font-size: 16px; line-height: 22px; color: #636E80; margin-top: 8px;} #solution_seven .honorMain .more { margin-top: 48px; display: flex; align-items: center; justify-content: center;} #solution_seven .honorMain .more .commonExpandMore{display: flex; align-items: center; justify-content: center; font-size: 14px; color: #707481; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;} #solution_seven .honorMain .more .commonExpandMore img{margin-left: 8px; width: 14px;} #solution_seven .honorMain ul li:hover .image a img, #solution_seven .honorMain ul li:hover .content { opacity: 0.6; } #solution_seven .honorMain ul li:hover .image .btn { opacity: 1; visibility: visible; } @media (max-width: 1680px) { #solution_seven .honorMain .image{height: 15.8vw;} } @media (max-width: 1536px) { #solution_seven .honorMain .image{height: 17.2vw;} } @media (max-width: 1440px) { #solution_seven{padding: 80px 0 70px;} #solution_seven .honorList{margin-top: 50px;} #solution_seven .honorMain .image{height: 18.2vw;} } @media (max-width: 1366px) { #solution_seven .honorMain .image{height: 19.2vw;} } @media (max-width: 1280px) { #solution_seven .honorMain .image{height: 20.2vw;} } @media (max-width: 1200px) { #solution_seven .honorMain .content{padding: 15px 12px;} #solution_seven .honorMain .content .title{font-size: 16px;} #solution_seven .honorMain .content .intro{font-size: 14px;} } @media (max-width: 750px) { #solution_seven .honorList .slide{padding: 0px 55px 13px; font-size: 24px;} #solution_seven .honorMain li{width: calc(50% - 12px);} #solution_seven .honorMain .image{height: 300px;} #solution_seven .honorMain .content .title{font-size: 22px; line-height: 1.2;} #solution_seven .honorMain .content .intro{font-size: 18px; line-height: 1.2;} #solution_seven .honorMain ul{margin: 10px -6px;} #solution_seven .honorMain ul:first-child{margin: -10px -6px;} #solution_seven .honorMain ul li .image .btn{width: 30px; height: 30px; opacity: 1; visibility: visible;} #solution_seven .honorMain ul li .image .btn img{width: 17px;} #solution_seven .honorMain .more .commonExpandMore{font-size: 18px;} } /* 下载图片弹窗 */ .downloadImagePopupBox { max-width: 420px !important; min-width: 320px !important; width: 80%; background: none !important; box-shadow: none !important;} .downloadImagePopupBox { top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; height: auto !important;} .downloadImagePopupBox .downloadImagePopup .downloadImage { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background: #fff; border-radius: 8px; overflow: hidden;} .downloadImagePopupBox .downloadImagePopup .image { height: auto; position: relative; text-align: center; padding: 0px; } .downloadImagePopupBox .downloadImagePopup .scroll { max-height: calc(94vh - 48px - 64px - 64px - 32px); overflow-y: auto;} .downloadImagePopupBox .downloadImagePopup .scroll::-webkit-scrollbar { width: 6px; height: 6px; background-color: #fff;} .downloadImagePopupBox .downloadImagePopup .scroll::-webkit-scrollbar-track { border-radius: 6px; background-color: #fff;} .downloadImagePopupBox .downloadImagePopup .scroll::-webkit-scrollbar-thumb { border-radius: 6px; background-color: #CBD2DB;} .downloadImagePopupBox .downloadImagePopup .scroll img { width: 100%; max-height: unset !important;} /* 下载图片弹窗-关闭按钮样式 */ .downloadImagePopupBox .layui-layer-setwin .layui-layer-close2 { width: 28px; height: 28px; right: -56px; top: -56px; background: none; border-width: 1px; border-color: #fff; color: #fff; padding: 4px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;} .downloadImagePopupBox .layui-layer-setwin .layui-layer-close2:hover { background: #004BFF; border-color: #004BFF; color: #fff;} .downloadImagePopupBox .layui-layer-setwin .layui-layer-close2::before{content: ""; display: block; width: 18px; height: 18px; background: url(/static/images/solution/close.png) no-repeat center center/100% 100%;} .downloadImagePopupBox .layui-layer-setwin { right: 25px; top: 25px;} /* 下载图片弹窗-按钮 */ .commonBtn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 144px; height: 40px; font-size: 14px; border: 0px; border-radius: 4px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; cursor: pointer; position: relative; overflow: hidden;} .commonBtn span { position: relative; z-index: 2;} /* 下载图片弹窗-按钮样式 */ .btnColor1 { color: #fff; background: -webkit-linear-gradient(99deg, #009BFF 0%, #004BFF 100%); background: linear-gradient(351deg, #009BFF 0%, #004BFF 100%); -webkit-transition: none; transition: none; --left: -30px; --top: -30px; --opacity: 0;} .btnColor1:hover { color: #fff; } .btnColor1:active { background: -webkit-radial-gradient(58% 50%, 123% 106%, #009BFF 0%, #004BFF 100%); background: radial-gradient(123% 106% at 58% 50%, #009BFF 0%, #004BFF 100%);} .btnColor1::after { position: absolute; left: calc(var(--left) - 30px); top: calc(var(--top) - 30px); width: 70px; height: 70px; background: #009BFF; border-radius: 50%; -webkit-filter: blur(20px); filter: blur(20px); /* box-shadow: 0px 0px 20px #009BFF; */ opacity: var(--opacity); content: ""; display: block; pointer-events: none; -webkit-transition: all 0.3s ease, left 0s, top 0s; transition: all 0.3s ease, left 0s, top 0s;} .downloadImagePopupBox .downloadImagePopup .more { width: 300px; height: 48px; border-radius: 8px; font-size: 18px; margin: 32px auto 0px;} @media (max-width: 750px) { .downloadImagePopupBox .downloadImagePopup .more{height: 55px; font-size: 18px;} } #solution_slogan{padding: 67px 0px 65px; position: relative;} #solution_slogan .back{ z-index: -1;} #solution_slogan .title{font-size: 32px; line-height: 45px; color: #fff; margin-bottom: 16px; font-weight: 500;} #solution_slogan .intro{font-size: 18px; line-height: 25px; color: #fff; font-weight: 400; margin-bottom: 33px;} #solution_slogan .btns{display: flex; justify-content: center;} #solution_slogan .btn{width: 208px; height: 54px; font-size: 16px; margin: 0px 12px; border-radius: 8px; display: flex; justify-content: center; align-items: center; transition: all 0.4s ease;} #solution_slogan .btn:nth-child(1){color: #366EF4; background: linear-gradient(178deg, #fff 0%, #D9E1FF 100%, #D9E1FF 100%);} #solution_slogan .btn:nth-child(1):hover { color: #004BFF; background: -webkit-linear-gradient(top, #fff 0%, #F2F3FF 100%, #D9E1FF 100%); background: linear-gradient(180deg, #fff 0%, #F2F3FF 100%, #D9E1FF 100%);} #solution_slogan .btn:nth-child(2) { color: #fff; background: rgba(255, 255, 255, 0.3); border: 1px solid #fff;} #solution_slogan .btn:nth-child(2):hover {color: #fff; background: rgba(255, 255, 255, 0.15);} @media (max-width: 1680px) { #solution_slogan{padding: 60px 0px;} } @media (max-width: 1440px) { #solution_slogan .intro{margin-bottom: 25px; font-size: 16px;} #solution_slogan .btn{height: 52px; line-height: 52px;} } @media (max-width: 1024px) { #solution_slogan{padding: 50px 0px;} #solution_slogan .title {font-size: 28px; line-height: 41px; margin-bottom: 10px; } #solution_slogan .intro {margin-bottom: 20px;} #solution_slogan .btn{width: 195px; height: 45px; line-height: 45px;} } @media (max-width: 750px) { #solution_slogan .btn{height: 50px; line-height: 50px; font-size: 18px;} #solution_slogan .intro{font-size: 20px;} } #solution_footer{} #solution_footer .commonBg{z-index: -1;} #solution_footer .footerService{padding: 33px 0px; border-bottom: 1px solid #dbdde4;} #solution_footer .footerService ul{display: flex;} #solution_footer .footerService ul li{flex: 1; height: 24px; padding: 0px; border-right: 1px solid #a0a1a1; display: flex; align-items: center; justify-content: center;} #solution_footer .footerService ul li:last-child{border: 0;} #solution_footer .footerService ul li .icon{text-align: center;} #solution_footer .footerService ul li .icon img{width: auto; height: 49px;} #solution_footer .footerService ul li .title{margin-left: 8px; padding-top: 0px; font-size: 16px; font-weight: 600; color: #121933; text-align: center;} #solution_footer .footerOther{display: flex; justify-content: space-between; padding: 26px 0px 35px;} #solution_footer .footerOther .copyright{text-align: left;} #solution_footer .footerOther .copyrightMain{display: flex; align-items: center;} #solution_footer .footerOther .copyrightMain, #solution_footer .footerOther .copyrightMain a{font-size: 12px; color: #1D2129;} #solution_footer .footerOther .copyrightMain{margin-bottom: 8px;} #solution_footer .footerOther .copyrightMain a{margin-left: 33px; display: flex; align-items: center; transition: all 0.4s ease;} #solution_footer .footerOther .copyrightMain a .img{display: block; margin-right: 5px; width: auto; height: 16px; vertical-align: top;} #solution_footer .footerOther .links a{font-size: 12px; color: #121933; transition: all 0.4s ease;} #solution_footer .footerOther .links span{padding: 0 16px;} #solution_footer .footerOther .copyrightMain a:hover, #solution_footer .footerOther .links a:hover{color: #004bff;} #solution_footer .footerOther .footerShare{display: block;} #solution_footer .footerOther ul{display: flex;} #solution_footer .footerOther li{margin-right: 16px; text-align: center; position: relative;} #solution_footer .footerOther li:last-child{margin-right: 0;} #solution_footer .footerOther li img{width: auto; height: 29px; cursor: pointer;} #solution_footer .footerOther li .popup{padding: 9px; width: 92px; height: auto; position: absolute; bottom: 30px; left: 50%; bottom: 30px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); border-radius: 4px; background: #fff; box-shadow: 0px 0px 4px #eee; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; opacity: 0; visibility: hidden;} #solution_footer .footerOther li .popup img{width: 100%; height: 72px; border-radius: 4px; background: #D8D8D8; cursor: pointer;} #solution_footer .footerOther li .popup p{font-size: 8px; line-height: 11px; color: #1D2129; margin-top: 8px;} #solution_footer .footerOther li .popup::after{content: ""; display: block; position: absolute; width: 10px; height: 5px; left: 50%; bottom: -5px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #fff; -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%); clip-path: polygon(0% 0%, 50% 100%, 100% 0%); } #solution_footer .footerOther li:hover .popup { opacity: 1; visibility: visible; bottom: 40px;} @media (max-width: 750px) { #solution_footer{padding-bottom: 85px;} #solution_footer .footerService{padding: 35px 0;} #solution_footer .footerService ul li{flex-direction: column; height: max-content; border: 0;} #solution_footer .footerService ul li .icon img{height: 75px;} #solution_footer .footerService ul li .title{margin: 10px 0 0; padding: 0 20px; font-size: 20px; color: #636E80;} #solution_footer .footerOther .copyright{width: 100%; text-align: center;} #solution_footer .footerOther .copyrightMain{flex-direction: column;} #solution_footer .footerOther .copyrightMain a .img{width: 25px; height: 25px; line-height: 25px; margin-right: 10px;} #solution_footer .footerOther .copyrightMain a .img svg{width: 100%; height: 100%;} #solution_footer .footerOther .copyrightMain, #solution_footer .footerOther .copyrightMain a, #solution_footer .footerOther .links a{font-size: 20px; line-height: 1.8; color: #636E80;} #solution_footer .footerOther .links span{display: none;} #solution_footer .footerOther .links a{margin: 0 15px;} #solution_footer .footerOther .footerShare{display: none;} } /* 留资页面 */ .messageBox input, .messageBox select, .messageBox textarea{ font-size: 14px; color: rgb(135, 135, 135); border-radius: 0px;} .messageBox textarea { resize: none;} .messageBox { position: relative; display: flex; flex-wrap: wrap; min-height: 670px; background: #fff; height: auto !important; min-height: 100vh !important;} .messageDescBox { min-height: 100vh !important; width: 40.463%; transition: all .6s ease; display: flex; flex-direction: column; position: relative; background: url(/static/images/solution/mes-back.jpg) no-repeat center/cover;} .messageDescBox .messageDesc{width: 570px !important; max-width: 80%; width: 420px; margin: 0px auto; padding-top: 20%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;} .messageDescBox .messageDesc h3{font-size: 42px; line-height: 59px; color: #121933; font-weight: 600;} .messageDescBox .messageDesc ul{padding-top: 35px; display: flex; flex-wrap: wrap; } .messageDescBox .messageDesc ul li{width: 50%; font-size: 18px; color: #121933; padding-bottom: 20px; position: relative; padding-left: 23px;} .messageDescBox .messageDesc ul li img{position: absolute; width: 22px; height: 22px; -webkit-border-radius: 100%; border-radius: 100%; left: 0px; top: 2px;} .messageDescBox .messageDesc ul li span{color: #004BFF; font-weight: 600;} .messageDescBox .messageContact {font-size: 14px; color: #707481; max-width: 80%; width: 420px; position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);} .messageFormBox{padding: 150px 0px 70px; flex: 1; position: relative; display: flex; align-items: center; overflow: hidden;} .messageForm {width: 378px; max-width: 90%; margin: 0px auto;} .messageForm h3{font-size: 26px; color: #004BFF; font-weight: 600;} .messageForm .desc { font-size: 14px; color: #121933; } .messageForm span { color: #FF5B5B; font-size: 14px; } .messageForm ul { padding-top: 15px; } .messageForm ul li { position: relative; margin-top: 10px; } .messageForm ul li span { position: absolute; left: -13px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .messageForm ul li label { position: relative; display: block; min-height: 48px; border: 1px solid #E6E8EB; -webkit-border-radius: 4px; border-radius: 4px; padding: 20px 10px 0px; } .messageForm ul li label input { width: 100%; outline: none; background: none; font-size: 14px; color: #121933; } .messageForm ul li label p { position: absolute; left: 0px; top: 12px; color: #86909C; font-size: 14px; padding-left: 10px; -webkit-transition: .6s; transition: .6s; } .messageForm ul li label textarea { width: 100%; height: 40px; } .messageForm ul li label.cur{border-color:#004BFF;box-shadow: 0px 0px 0px 4px rgba(0,75,255,0.15);} .messageForm ul li label.cur p { font-size: 12px; top: 3px; color: #004BFF; } .messageForm ul li label.cur p.grey{color:#86909C;} .messageForm ul li label.cur2{border-color:#E6E8EB; box-shadow:none;} .messageForm ul li label.select { padding: 0px;position: relative; border:none; } .messageForm ul li label.select select { width: 100%;border: 1px solid #E6E8EB; height: 48px; padding: 20px 10px 0px; -webkit-border-radius: 4px; border-radius: 4px; z-index: 10; position: relative; background: none; } .messageForm ul li label.select select:focus{border-color:#004BFF;box-shadow: 0px 0px 0px 4px rgba(0,75,255,0.15);} .messageForm ul li label.select.error{box-shadow:none;} .messageForm ul li label.select.error select:focus{border-color: #FF5B5B;-webkit-box-shadow: 0px 0px 0px 4px rgba(255, 91, 91, 0.15); box-shadow: 0px 0px 0px 4px rgba(255, 91, 91, 0.15);} .messageForm ul li label.select::after { content: ' '; position: absolute; top: 55%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border: 5px solid; border-color: #BBBECA transparent transparent transparent; right: 15px; } .messageForm ul li label em { font-style: normal; text-align: right; display: block; font-size: 12px; color: #86909C; padding-bottom: 5px; } .messageForm ul li label em i { font-style: normal; } .messageForm ul li label.error { background: rgba(255, 91, 91, 0.1); border-color: #FF5B5B; } .messageForm ul li label.error select { background: rgba(255, 91, 91, 0.1); border-color: #FF5B5B; } .messageForm ul li label.error p { font-size: 14px; top: 12px; color: #FF5B5B; } .messageForm ul li label.error::after { border-color: #FF5B5B transparent transparent transparent; } .messageForm ul li label.cur1 { background: #fff; -webkit-box-shadow: 0px 0px 0px 4px rgba(255, 91, 91, 0.15); box-shadow: 0px 0px 0px 4px rgba(255, 91, 91, 0.15); } .messageForm ul li label.cur1 p { top: 3px; font-size: 12px; } .messageForm ul li label.cur1 select { background: #fff; -webkit-box-shadow: 0px 0px 0px 4px rgba(255, 91, 91, 0.15); box-shadow: 0px 0px 0px 4px rgba(255, 91, 91, 0.15); border-color: #FF5B5B; } .messageForm ul li label.error1{background: rgba(255, 91, 91, 0.05); box-shadow:none; border-color: #FF5B5B;} .messageForm ul li .selectListBox{position:absolute; left:0px; top:100%; right:0px; border-radius:4px;border: 1px solid #E6E8EB; z-index:10; background:#fff; display:none;} .messageForm ul li .selectListBox a{ display:block; font-size:14px; padding:0px 15px; line-height:30px;} .messageForm ul li .selectListBox a:hover{ background: rgba(0,75,255,0.15); color: #333;} .messageForm ul li .selectListBox a:first-child{ border-radius:4px 4px 0px 0px} .messageForm ul li .selectListBox a:last-child{ border-radius:0px 0px 4px 4px} .messageForm ul li .selectList{position:relative; z-index:10;} .messageForm ul li .selectListMask{position: fixed;z-index: 1; width: 100%;height: 100%;left: 0px;top: 0px;} .messageForm .terms { font-size: 12px; padding-top: 5px; } .messageForm .terms a { color: #004BFF; } .messageForm .btn { padding-top: 10px; } .messageForm .btn input { background: #004BFF; color: #fff; font-size: 16px; width: 100%; height: 40px; -webkit-border-radius: 4px; border-radius: 4px;transition:.4s;-webkit-transition:.4s;background: #004BFF; color: #fff} .messageForm .btn input:hover{background-color: #4682FF !important;color: #fff !important;} .messageForm dl { margin: 0px -3px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 10px; } .messageForm dl dd { width: -webkit-calc(25% - 6px); width: calc(25% - 6px); height: 34px; -webkit-border-radius: 4px; border-radius: 4px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 6px 3px 0px; background: linear-gradient(180deg, #F9F9F9 0%, #FFFFFF 100%); box-shadow: 0px 1px 5px 0px rgba(128,128,128,0.11); border: 1px solid #fff;} .messageForm dl dd img { max-width: 80%; } .messageSuccess { max-width: 80%; width: 380px; margin: 0px auto; display: none; } .messageSuccess h3 { font-size: 26px; color: #121933; font-weight: 600; text-align: center; padding-left:10px;} .messageSuccess .desc { font-size: 16px; color: #4E5969; padding-top: 5px; text-align: center; } .messageSuccess .progressRate { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 340px; margin: 0px auto; padding-top: 20px; } .messageSuccess .progressRate li { width: 33.333%; position: relative; } .messageSuccess .progressRate li p { width: 40px; height: 40px; position: relative; z-index: 10; margin: 0px auto; position: relative; -webkit-border-radius: 100%; border-radius: 100%; background: #E6F1FF; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .messageSuccess .progressRate li p img { height: 22px; width: 22px; } .messageSuccess .progressRate li p img.defaIcon { opacity: 1; } .messageSuccess .progressRate li p img.curIcon { opacity: 0; position: absolute; left: 50%; top: 50%; margin-left: -11px; margin-top: -11px; } .messageSuccess .progressRate li h4 { font-size: 14px; text-align: center;color: #121933; white-space: nowrap; padding-top: 5px; } .messageSuccess .progressRate li span { height: 4px; width: 100%; left: 45%; top: 20px; position: absolute; background: #E6F1FF; } .messageSuccess .progressRate li span i { position: absolute; left: 0%; width: 0%; height: 100%; top: 0px; display: block; background: linear-gradient(90deg, #2A6FFF 0%, #E6F1FF 80%);} .messageSuccess .progressRate li span i::after { content: ''; width: 100%; height: 100%; background: #2A6FFF; left: 0px; position: absolute; top: 0px; opacity: 0; } .messageSuccess .progressRate li:first-child { padding-right: 40px; } .messageSuccess .progressRate li:last-child { padding-left: 40px; } .messageSuccess .progressRate li:last-child span { display: none; } .messageSuccess .progressRate li:nth-child(2) span { left: 60%; } .messageSuccess .progressRate li.cur h4 { color: #004BFF; } .messageSuccess .progressRate li.cur h4 { color: #004BFF; font-weight: 700; } .messageSuccess .progressRateAnimat li:nth-child(1) p { animation: progressBg 1s linear; -webkit-animation: progressBg 1s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(1) p img.defaIcon { animation: iconHide 1s linear; -webkit-animation: iconHide 1s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(1) p img.curIcon { animation: iconShow 1s linear; -webkit-animation: iconShow 1s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(1) span i { animation: displacement 1s linear; -webkit-animation: displacement 1s linear; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(1) span i::after { animation: showBg 0.5s linear; -webkit-animation: showBg 0.5s linear; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(2) p { animation: progressBg 1s linear; -webkit-animation: progressBg 1s linear; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(2) p img.defaIcon { animation: iconHide 1s linear; -webkit-animation: iconHide 1s linear; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(2) p img.curIcon { animation: iconShow 1s linear; -webkit-animation: iconShow 1s linear; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(2) span i { animation: displacement 1s linear; -webkit-animation: displacement 1s linear; -webkit-animation-delay: 3.5s; animation-delay: 3.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(2) span i::after { animation: showBg 0.5s linear; -webkit-animation: showBg 0.5s linear; -webkit-animation-delay: 4.5s; animation-delay: 4.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(2) h4 { animation: textColor 1s linear; -webkit-animation: textColor 1s linear; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(3) p { animation: progressBg 1s linear; -webkit-animation: progressBg 1s linear; -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(3) p img.defaIcon { animation: iconHide 1s linear; -webkit-animation: iconHide 1s linear; -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(3) p img.curIcon { animation: iconShow 1s linear; -webkit-animation: iconShow 1s linear; -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess .progressRateAnimat li:nth-child(3) h4 { animation: textColor 1s linear; -webkit-animation: textColor 1s linear; -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .messageSuccess dl { width: 100%; } .messageSuccess dl dt { padding-top: 45px; } .messageSuccess dl dt img { width: 142px; margin: 0px auto; display: block; -webkit-box-shadow: 0px 3px 12px 0px rgba(1, 26, 87, 0.16); box-shadow: 0px 3px 12px 0px rgba(1, 26, 87, 0.16); border-radius:5px; } .messageSuccess dl dd { font-size: 16px; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-top: 25px; } .messageSuccess dl dd img { height: 18px; margin-right: 10px; } .messageSuccess .btn { padding-top: 50px; display: none; } .messageSuccess .btn a { background: #004BFF; -webkit-border-radius: 4px; border-radius: 4px; height: 45px; width: 100%; color: #fff; font-size: 14px; line-height: 45px; display: block; text-align: center; transition:.4s;-webkit-transition:.4s;} .messageSuccess .btn a:hover{background-color: #4682FF !important;color: #fff !important;} .returnHome { position: absolute; bottom: 9%;width: 100%; left: 0px; text-align: center; display: none; } .returnHome a { color: #4E5969; font-size: 12px; background-position: left center; padding-left: 20px;background-size:15px; background-repeat: no-repeat; display: inline-block; background-image: url('/static/images/solution/mes-back.png');} .messagetermsPrivacyPolicyBox { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background: rgba(0, 0, 0, 0.7); z-index: 99999999; display: none; } .messagetermsPrivacyPolicy { padding: 50px 100px; overflow-y: auto; overflow-x: hidden; max-height: 90%; min-height: 500px; background: #fff; -webkit-border-radius: 6px; border-radius: 6px; max-width: 90%; width: 900px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .messagetermsPrivacyPolicy .title { font-size: 20px; padding-bottom: 25px; font-weight: 600; color: #121933; text-align: center; } .messagetermsPrivacyPolicy .content { font-size: 14px; color: #121933; line-height: 20px; min-height:220px;text-align: justify;} .messagetermsPrivacyPolicy .btn { padding-top: 50px; } .messagetermsPrivacyPolicy .btn a { margin: 0px auto; width: 160px; height: 40px; display: block; line-height: 40px; color: #fff; font-size: 16px; text-align: center; -webkit-border-radius: 6px; border-radius: 6px; background: #004BFF; } .messageSuccess .progressRate li p { background: #E6F1FF;} .messageSuccess .progressRate li h4 { color: #121933;} .messageSuccess .progressRate li.cur p { background: #2A6FFF;} .messageSuccess .progressRate li.cur h4 { color: #004BFF;} @keyframes progressBg { 0% { background: #E6F1FF;} 100% { background: #2A6FFF; } } @-webkit-keyframes progressBg { 0% { background: #E6F1FF; } 100% { background: #2A6FFF; } } @keyframes displacement { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes displacement { 0% { width: 0%; } 100% { width: 100%; } } @keyframes showBg { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes showBg { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes textColor { 0% { color: #121933; } 100% { color: #004BFF; } } @-webkit-keyframes textColor { 0% { color: #121933; } 100% { color: #004BFF; } } @keyframes iconShow { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes iconShow { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes iconHide { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes iconHide { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 1680px) { .messageDescBox .messageDesc h3{font-size: 38px; line-height: 52px;} } @media (max-width: 1536px) { .messageFormBox{padding: 130px 0px 70px;} } @media (max-width: 1440px) { .messageDescBox .messageDesc h3{font-size: 36px; line-height: 47px;} .messageFormBox{padding: 110px 0px 50px;} } @media (max-width: 1366px) { .messageDescBox .messageDesc h3{font-size: 34px;} .messageForm ul{padding: 8px;} } @media (max-width: 1280px) { .messageDescBox .messageDesc{max-width: 84%;} .messageDescBox .messageDesc h3{font-size: 32px;} .messageForm{width: 53%;} .messageFormBox{padding: 95px 0px 50px;} } @media (max-width: 1200px) { .messageDescBox{width: 43.463%;} .messageDescBox .messageDesc h3{font-size: 30px;} .messageDescBox .messageDesc ul li{font-size: 16px;} .messageForm{width: 63%;} .messageForm h3{font-size: 24px;} } @media (max-width: 1024px) { .messageDescBox{ min-height: auto !important; height: calc(100vh - 90px) !important; margin-top: 90px;} .messageDescBox .messageDesc{max-width: 87%; padding-top: 10%;} .messageDescBox .messageDesc ul{padding-top: 30px;} .messageFormBox{width: calc(100% - 43.463%); height: calc(100vh - 90px); margin-top: 90px; padding: 0; align-items: flex-start; flex: auto;} .messageForm{width: 73%; padding-top: 10%;} .messageSuccess{padding-top: 10%;} } @media (max-width: 750px) { .messageDescBox{display: none;} .messageFormBox{width: 100%;} .messageForm {width: 94%;} .messageForm h3, .messageSuccess h3{font-size: 40px;} .messageForm .desc, .messageSuccess .desc{font-size: 24px; line-height: 1.5;} .messageForm ul li span{left: -20px; font-size: 18px;} .messageForm ul li label{min-height: 60px; padding: 13px 15px 0px;} .messageForm ul li label p, .messageForm ul li label.error p, .messageForm ul li label input, .messageForm ul li .selectListBox a, .messageBox input, .messageBox select, .messageBox textarea{font-size: 20px;} .messageForm ul li label p{padding-left: 15px;} .messageForm ul li .selectListBox a{line-height: 50px;} .messageForm ul li label textarea{height: 110px;} .messageForm ul li label em{font-size: 18px;} .messageForm .btn input{height: 60px; line-height: 60px; font-size: 22px;} .messageForm .terms{margin-top: 10px; font-size: 18px;} .messageForm dl dd{height: 60px;} .messagetermsPrivacyPolicy{padding: 5% 6%;} .messagetermsPrivacyPolicy .title{font-size: 24px;} .messagetermsPrivacyPolicy .content{font-size: 20px; line-height: 1.8;} .messagetermsPrivacyPolicy .btn{padding-top: 40px;} .messagetermsPrivacyPolicy .btn a{height: 55px; line-height: 55px; font-size: 20px;} .messageSuccess{max-width: 92%; width: 92%;} .messageSuccess .progressRate{margin-top: 40px; width: 92%;} .messageSuccess .progressRate li p{width: 60px; height: 60px;} .messageSuccess .progressRate li p img{width: 30px; height: 30px;} .messageSuccess .progressRate li h4{padding-top: 10px; font-size: 20px;} .messageSuccess dl dt img{width: 165px;} .messageSuccess dl dd{font-size: 20px;} .messageSuccess dl dd img{height: 25px; margin-right: 15px;} } /* 新的留资弹窗 */ .retentionFormBox { max-width: 940px !important; max-height: 745px !important; width: 90% !important; height: 98vh; background: #FFFFFF; box-shadow: 2px 2px 3px 1px rgba(204, 212, 241, 0.16); border-radius: 8px !important; overflow: hidden;} .retentionFormBox .commonBg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1;} .retentionFormBox .tips { color: #ff0000; font-size: 12px; padding-top: 10px; position: absolute; bottom: -18px; display: none;} .retentionFormBox .layui-layer-content { max-height: 98vh;} .retentionFormBox .layui-layer-setwin { right: 33px; top: 33px;} .retentionFormBox .layui-layer-setwin .layui-layer-close2 { width: 36px; height: 36px; background: none; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background-color: #fff !important;} .retentionFormBox .layui-layer-setwin .layui-layer-close2::before { content: ""; display: block; width: 25px; height: 25px; background: url(/static/images/solution/close-2.png) no-repeat center center/100% 100%;} .retentionForm .retentionFormMain { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding: 0px; overflow: hidden; height: 100%;} .retentionForm .retentionFormImage { display: none;} .retentionForm .retentionFormLeft { width: 420px; position: relative;} .retentionForm .retentionFormLeft .image { margin-bottom: 13px;} .retentionForm .retentionFormLeft .image img { width: 100%; height: auto;} .retentionForm .retentionFormLeft .bigTitle { font-weight: 600; font-size: 16px; color: #121933; line-height: 22px; margin-bottom: 47px; padding: 0px 35px 0px 40px;} .retentionForm .retentionFormLeft .other { padding: 0px 40px;} .retentionForm .retentionFormLeft .other ul li { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 21px;} .retentionForm .retentionFormLeft .other ul li:last-child { margin-bottom: 0px;} .retentionForm .retentionFormLeft .other ul li .icon { margin-right: 12px;} .retentionForm .retentionFormLeft .other ul li .icon img { width: auto; height: 40px;} .retentionForm .retentionFormLeft .other ul li .content .title { font-weight: 600; font-size: 14px; color: #121933;} .retentionForm .retentionFormLeft .other ul li .content .intro { font-size: 12px; margin-top: 4px; color: #707481;} .retentionForm .retentionFormRight { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; background-color: #fff;} .retentionForm .retentionFormRight .retentionFormInput { padding: 52px 48px 55px;} .retentionForm .retentionFormRight .retentionFormInput .bigTitle { font-weight: 600; font-size: 24px; color: #121933; margin-bottom: 25px;} .retentionForm .retentionFormRight .retentionFormInput .wrapper { margin-bottom: 21px; position: relative;} .retentionForm .retentionFormRight .retentionFormInput .wrapper:last-child { margin-bottom: 0px; padding-top: 9px;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .title { font-weight: 600; font-size: 14px; color: #121933; margin-bottom: 12px;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .title span { color: #E02020;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input { position: relative;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input { display: block; width: 100%; height: 42px; font-size: 14px; color: #CBD2DB !important; border-radius: 4px; border: 1px solid #E5E6EB;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input.active { color: #121933 !important;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input::-webkit-input-placeholder { color: #CBD2DB;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input::-moz-placeholder { color: #CBD2DB;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input:-ms-input-placeholder { color: #CBD2DB;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input::placeholder { color: #CBD2DB;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input:focus { color: #121933 !important;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input:focus::-webkit-input-placeholder { color: #121933;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input:focus::-moz-placeholder { color: #121933;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input:focus:-ms-input-placeholder { color: #121933;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input:focus::placeholder { color: #121933;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input:-internal-autofill-previewed, .retentionForm .retentionFormRight .retentionFormInput .wrapper .input input:-internal-autofill-selected { -webkit-text-fill-color: #121933 !important;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input img { position: absolute; top: 1px; right: 0px; width: auto; height: calc(100% - 2px);} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input button { width: 424px; height: 48px; font-weight: 400; font-size: 16px; letter-spacing: 10px; border: 0px; border-radius: 8px; cursor: pointer;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-form-select dl { max-height: 238px; top: 47px; padding: 8px 40px 9px 16px;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-form-select dl::-webkit-scrollbar { width: 4px; height: 4px; background-color: #fff;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-form-select dl::-webkit-scrollbar-track { border-radius: 4px; background-color: #fff;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-form-select dl::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #CBD2DB;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-form-select dl dd.layui-select-tips, .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-form-select dl dd:nth-child(1) { display: none;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-form-select dl dd, .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-form-select dl dt { line-height: 32px;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-input:focus, .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-textarea:focus { border-color: #004BFF !important;} .retentionForm .retentionFormRight .retentionFormInput .wrapper.error .input input { border-color: #FF5B5B !important; background: rgba(255, 91, 91, 0.05);} .retentionForm .retentionFormRight .retentionFormInput .wrapper.error .input input:focus { border-color: #FF5B5B !important; box-shadow: 0 0 0 3px rgba(255, 91, 91, 0.05);} .retentionForm .retentionFormRight .retentionFormInput .wrapper.active .input input { color: #CBD2DB;} .retentionForm .retentionFormRight .retentionFormInput .wrapper.active .input input:focus { color: #CBD2DB;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .input .layui-form-select dl dd.layui-this { color: #5f5f5f; font-weight: normal; background: #F1F3F5; border-radius: 4px;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .tip { font-size: 12px; color: #636E80; line-height: 17px; margin-bottom: 14px;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .tip span { color: #F43C46;} .retentionForm .retentionFormRight .retentionFormInput .wrapper .tip a { color: #315EFB;} .retentionForm .retentionFormRight .retentionFormSuccess { display: none; text-align: center; padding: 70px 57px;} .retentionForm .retentionFormRight .retentionFormSuccess .success { margin-bottom: 38px;} .retentionForm .retentionFormRight .retentionFormSuccess .success .icon { margin-bottom: 22px;} .retentionForm .retentionFormRight .retentionFormSuccess .success .icon img { width: auto; height: 45px;} .retentionForm .retentionFormRight .retentionFormSuccess .success .title { font-size: 24px; color: #121933; font-weight: bold; margin-bottom: 20px;} .retentionForm .retentionFormRight .retentionFormSuccess .success .intro { font-size: 16px; color: #707481; line-height: 22px;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath { margin-bottom: 48px;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul { padding: 0px 33px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li .line { width: 380%; height: 4px; left: 50%; top: 20px; z-index: 0; position: absolute; background: #E6F1FF;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li .line span { background: -webkit-linear-gradient(left, #2A6FFF 0%, #E6F1FF 80%); background: linear-gradient(90deg, #2A6FFF 0%, #E6F1FF 80%); position: absolute; height: 100%; width: 0%; left: 0px; top: 0px;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li .line span::after { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: #2A6FFF; opacity: 0; content: "";} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 40px; position: relative;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li:last-child .line { display: none;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li.active .icon { background: #2A6FFF;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li.active .title { color: #004BFF; font-weight: bold;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li.active .icon img.white { opacity: 1;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li.active .icon img.blue { opacity: 0;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li .icon { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E6F1FF; margin: 0 auto; position: relative; z-index: 5;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li .icon img { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 24px; height: 24px; margin: auto;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li .icon .white { opacity: 0;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li .icon .blue { opacity: 1;} .retentionForm .retentionFormRight .retentionFormSuccess .flowPath ul li .title { font-weight: 400; font-size: 14px; color: #121933; margin-top: 4px; white-space: nowrap;} .retentionForm .retentionFormRight .retentionFormSuccess .link .intro { font-size: 16px; color: #707481; margin-bottom: 20px;} .retentionForm .retentionFormRight .retentionFormSuccess .link img { display: block; width: 160px; height: auto; box-shadow: 0px 3px 12px 0px rgba(1, 26, 87, 0.16); background: #fff; border-radius: 4px; margin: 0 auto 51px;} .retentionForm .retentionFormRight .retentionFormSuccess .link .return { font-weight: 400; color: #4E5969; font-size: 12px; background-position: left center; padding-left: 20px; background-size: 15px; background-repeat: no-repeat; display: inline-block; background-image: url('/static/images/solution/mes-back.png');} .retentionForm .retentionFormRight .retentionFormSuccess .link .return span { vertical-align: middle;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(1) .line span { animation: linWidth 1s linear; -webkit-animation: linWidth 1s linear; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(1) .line span::after { animation: showAnimat 0.5s linear; -webkit-animation: showAnimat 0.5s linear; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(2) .icon { animation: iconBg 1s linear; -webkit-animation: iconBg 1s linear; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(2) .white { animation: showAnimat 1s linear; -webkit-animation: showAnimat 1s linear; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(2) .blue { animation: hideAnimat 1s linear; -webkit-animation: hideAnimat 1s linear; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(2) .title { animation: textColor 1s linear; -webkit-animation: textColor 1s linear; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(2) .line span { animation: linWidth 1s linear; -webkit-animation: linWidth 1s linear; -webkit-animation-delay: 3.5s; animation-delay: 3.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(2) .line span::after { animation: showAnimat 0.5s linear; -webkit-animation: showAnimat 0.5s linear; -webkit-animation-delay: 4.5s; animation-delay: 4.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(3) .icon { animation: iconBg 1s linear; -webkit-animation: iconBg 1s linear; -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(3) .white { animation: showAnimat 1s linear; -webkit-animation: showAnimat 1s linear; -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(3) .blue { animation: hideAnimat 1s linear; -webkit-animation: hideAnimat 1s linear; -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} .retentionForm .retentionFormRight .retentionFormSuccess.animat .flowPath ul li:nth-child(3) .title { animation: textColor 1s linear; -webkit-animation: textColor 1s linear; -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} @-webkit-keyframes hideAnimat { 0% {opacity: 1; } 100% {opacity: 0; } } @keyframes hideAnimat { 0% {opacity: 1; } 100% {opacity: 0; } } @-webkit-keyframes showAnimat { 0% {opacity: 0; } 100% {opacity: 1; } } @keyframes showAnimat { 0% {opacity: 0; } 100% {opacity: 1; } } @-webkit-keyframes textColor { 0% {color: #121933; } 100% {color: #004BFF; } } @keyframes textColor { 0% {color: #121933; } 100% {color: #004BFF; } } @-webkit-keyframes iconBg { 0% {background: #E6F1FF; } 100% {background: #004BFF; } } @keyframes iconBg { 0% {background: #E6F1FF; } 100% {background: #004BFF; } } @-webkit-keyframes linWidth { 0% {width: 0%; } 100% {width: 100%; } } @keyframes linWidth { 0% {width: 0%; } 100% {width: 100%; } } /* 新的悬浮窗口 */ .right_aside { z-index: 20; position: fixed; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); right: 12px; width: 72px;} .right_aside .top_block { display: block;} .right_aside .top_block .icon { width: 68px; height: 50px; padding: 9px 18px 5px; position: relative; margin: auto; background-color: #fff; border-radius: 100px 100px 0px 0px;} .right_aside .block_box { box-shadow: 0px 2px 6px 1px rgba(41, 112, 255, 0.15); margin-top: 3px;} .right_aside .block:first-child { border-radius: 2px 2px 0 0;} .right_aside .block:last-child { border-radius: 0 0 2px 2px;} .right_aside .block { width: 72px; height: 72px; position: relative; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column;} .right_aside .block.tel_block .down { position: absolute; padding: 12px; background: #FFFFFF; box-shadow: 0px 2px 4px 0px rgba(0, 75, 255, 0.15); border: 1px solid rgba(0, 43, 255, 0.1); right: calc(100% + 12px); bottom: 0; opacity: 0; pointer-events: none; transition: all .5s;} .right_aside .block:hover .down { opacity: 1 !important; pointer-events: inherit !important; display: block !important;} .right_aside .block:hover { background: #f1f5ff;} .right_aside .block:hover>.txt { color: #004BFF;} .right_aside .block.weixin_block .down { position: absolute; padding: 8px; background: #FFFFFF; box-shadow: 0px 2px 4px 0px rgba(0, 75, 255, 0.15); border: 1px solid rgba(0, 43, 255, 0.1); right: calc(100% + 12px); bottom: 0; opacity: 0; pointer-events: none; transition: all .5s; display: none; min-width: 100px;} .right_aside .block.weixin_block .down .txt { font-size: 14px; color: #004BFF; line-height: 23px;} .right_aside .block.weixin_block .down::after { content: ' '; position: absolute; left: 100%; bottom: 20px; width: 0; height: 0; border: 6px solid; border-color: transparent transparent transparent #fff;} .right_aside .block.tel_block .down::after { content: ' '; position: absolute; left: 100%; bottom: 20px; width: 0; height: 0; border: 6px solid; border-color: transparent transparent transparent #fff;} .right_aside .block.tel_block .down .tag { font-size: 12px; font-weight: 500; color: #4F4F4F; white-space: nowrap;} .right_aside .block.tel_block .down .tel { font-size: 20px; font-weight: 600; color: #004BFF; line-height: 28px; white-space: nowrap;} .right_aside .block.tel_block .down .abstract { font-size: 12px; font-weight: 400; color: #595959; margin-top: 10px; line-height: 17px; white-space: nowrap;} .right_aside .block .icon { width: 28px; margin-top: 3px;} .right_aside .block .txt { font-size: 12px; color: #595959;}.right_aside .block .txt .right_img{width: 114px; height: 114px;} .right_aside .top_block .number { position: absolute; width: 15px; height: 15px; background: #FF4C48; border-radius: 50%; text-align: center; line-height: 15px; font-size: 12px; color: #FFFFFF; top: 1px; right: 1px;} .right_aside .top_block .txt { background: #004BFF; box-shadow: 0px 2px 6px 1px rgba(41, 112, 255, 0.15); border-radius: 2px; line-height: 22px; text-align: center; font-size: 12px; color: #FFFFFF;} .crumbs{position: fixed; top: 70px; left: 0; right: 0; z-index: -10; margin: auto; width: 100%; height: 72px; background-color: #fff; -webkit-box-shadow: 0 0 8px 0 #E0E5F0; box-shadow: 0 0 8px 0 #E0E5F0; opacity: 0; visibility: hidden; transition: all 0.3s ease; border-top: 1px solid #eee;} .crumbs.open{opacity: 1; z-index: 100; visibility: visible;} .crumbs .center{ width: 100%;} .crumbs .center .monu .active span{color: #004BFF;} .crumbs .center .monu .line:hover span{color: #004BFF; } .crumbs .monu { width: 100%;} .crumbs .monu .line{flex: 1;} .crumbs .monu span { position: relative; display: block; height: 100%; line-height: 72px; color: #161616; font-size: 16px; color: #121933; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s;} .crumbs .monu span::after {content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: #004BFF; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0);} .crumbs .monu .active span{ color: #004BFF;} .crumbs .monu .active span::after { width: 104px;} .crumbs .item { position: relative; line-height: 72px; color: #888888; font-size: 14px;} .crumbs .item span { z-index: 10; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s;} .crumbs .item span:hover { color: #004BFF;} .crumbs .monu span:hover::after { width: 104px;} .crumbs .item .active { color: #004BFF;} .crumbs .item .iconfont { font-size: 14px; font-weight: 600;} .crumbs .item .icon-zhuye-copy { color: #9f9f9f; font-size: 16px; margin-right: 10px; font-weight: 500;} @media (max-width: 750px) { .crumbs{display: none;} }