*{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; transition: all .3s;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; } table{border-collapse:collapse;border-spacing:0} audio,canvas,video { display: inline-block;*display: inline;*zoom: 1;} fieldset,img{border:0} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal} ol,ul,li{list-style:none} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} q:before,q:after{content:''} abbr,acronym{border:0;font-variant:normal} sup{vertical-align:text-top} sub{vertical-align:text-bottom} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit; outline: none;} /* input,textarea,select{*font-size:100%;-select{background-repeat: no-repeat; background-size: 12px 7px; background-position: 95% center;} */ i{ font-style: normal; } video{ margin: 0; padding: 0; display: block;} a{ text-decoration: none;} body{ background: url(../images/bodyBg.jpg) repeat; min-width: 1200px; font-family:'Noto Sans SC',PingFangSC,helvetica neue,hiragino sans gb,arial,microsoft yahei ui,microsoft yahei,simsun,sans-serif!important; font-size: 16px; line-height:1.8; color: #fff;} a{ text-decoration: none; color: #fff; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;} img{ display: block; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor;} .w-1200{ width: 1200px; margin: 0 auto; position: relative;} .time03{ -webkit-transition:all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s;} .img-scale{transform: scale3d(1, 1, 1); transition: all 5s cubic-bezier(0.04, 0.79, 1, 1);} .img-scale:hover{transform: scale3d(1.2, 1.2, 1); transition: all 5s cubic-bezier(0.04, 0.79, 1, 1);} .img-overflow{overflow: hidden;} .ellipsis-multiline{ word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;} .ellipsis{overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;-webkit-text-overflow:ellipsis;-moz-text-overflow:ellipsis;white-space:nowrap;} .fl{ float: left;} .fr{ float: right;} .clearfix:after{ content: ''; display: block; clear: both;} .aniUpbit{-webkit-animation-duration: .3s; -webkit-animation-fill-mode: both; -webkit-animation-name: layui-upbit; animation-duration: .3s; animation-fill-mode: both; animation-name: layui-upbit;} .unselect{ user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;} .marT-20{ margin-top: 20px;} .marT-40{ margin-top: 40px;} .marT-50{ margin-top: 50px;} .marT-70{ margin-top: 70px;} .marT-80{ margin-top: 80px;} .marT-120{ margin-top: 120px;} .padTB-80{ padding-top: 80px; padding-bottom: 80px;} .padTB-120{ padding-top: 120px; padding-bottom: 120px;} .colorA{ color: #12c0ff;} .colorB{ color: #aaa;} .colorC{ color: #CCC;} .shadowA{ box-shadow: 0 9px 30px rgba(0,0,0,.3);} .shadowB{ box-shadow: 0 8px 98px rgba(0,0,0,.2);} .radiusA{border-radius: 10px; overflow: hidden;} ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #F8F8F8; } ::-webkit-scrollbar-track {border-radius: 6px;background-color: #F8F8F8;} ::-webkit-scrollbar-thumb {border-radius: 6px;background-color: #C8C6C4;} @font-face { font-family: 'iconfont'; /* Project id 3026236 */ src: url('//at.alicdn.com/t/font_3026236_jphpuxkqifd.woff2?t=1640854886667') format('woff2'), url('//at.alicdn.com/t/font_3026236_jphpuxkqifd.woff?t=1640854886667') format('woff'), url('//at.alicdn.com/t/font_3026236_jphpuxkqifd.ttf?t=1640854886667') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .headerWrap{ position: fixed; left: 0; right: 0; top: 0; z-index: 10000;} .headerBody{height: 100px; display: flex; align-items: center; justify-content: space-between;} .headerLogo{display: flex;align-items: center;} .headerLogo a{ display: block; width: 158px; height: 48px; /*background-image: url(../images/logoA.png);*/ background-size: 158px auto; background-repeat: no-repeat; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor;margin-right: 20px;padding-right: 20px;position: relative;} .headerLogo a::after{content: "";position: absolute;right: 0;top: 0;bottom: 0;width: 1px;height: 24px;background: rgba(255, 255, 255, 0.17);margin:auto;} .headerLogo a:last-child{margin-right: 0;padding-right: 0;} .headerLogo a:last-child::after{display: none;} .headerLogo a img{max-width: 100%;max-height: 100%;} .headerNav li{ float: left; margin: 0 20px; position: relative;} .headerNav-btn{ display: block; line-height: 100px;} .headerNav li:after{ content: ''; display: block; width: 0; position: absolute; left: 50%; bottom: 0; height: 2px; background-color: #12c0ff; transition: all .3s ease-out 0s; -webkit-transform: translateX(-50%); transform: translateX(-50%);} .headerNav li:hover .headerNav-btn{ color: #12c0ff;} .headerNav li:hover:after{ width: 100%;} .headerNav-con{ display: none; z-index: 10; position: absolute; left: 50%; /*top: 40px;*/ min-width: 100%; background-color: #262932; padding: 20px 30px; white-space: nowrap; box-shadow: 0 4px 15px rgba(0,0,0,.2);} .headerNav-links a{ display: block; padding: 6px 0; text-align: center;} .headerNav-links a:hover{ color: #12c0ff;} .headerNav li:hover .headerNav-con{ display: block;} .headerNav-box{ display: flex;} .headerNav-con dl{ margin-right: 60px;} .headerNav-con dl:last-child{ margin-right: 0;} .headerNav-con dt{ position: relative; padding-bottom: 15px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .1);} .headerNav-con dt:after{ content: ''; display: block; width: 20px; height: 2px; background-color: #12c0ff; position: absolute; left: 0; bottom: 0;} .headerNav-con dd a{ text-align: left; color: #aaa;} .headerNav-con.product{left: 0;right: 0;width: 1200px;padding: 0;max-height: 600px;background: none;} .headerNav-con.product .left{width: 200px;background-color: #323643;background-image: url(../images/img_menu.png);background-repeat: no-repeat;background-position: 60px bottom;padding: 20px 0 0;max-height: 600px;overflow: auto;} .headerNav-con.product .left .one{padding: 0px 30px;border-right: 0px solid #2A7EF8;cursor: pointer;height: 50px;display: flex;align-items: center;color: #fff;} .headerNav-con.product .left .one.active,.headerNav-con.product .left .one:hover{border-right: 4px solid #2a7ef8;background: #12C0FF;} .headerNav-con.product .right{flex: 1;background: rgba(39,42,51,0.95);padding: 35px 40px;max-height: 600px;overflow: auto;} .headerNav-con.product .right .block{display: none;opacity: 0;} .headerNav-con.product .right .active.block{display: block;opacity: 1;} .headerNav-con.product .right .title{margin: 0px 0 39px;padding: 0 20px;border-left: 4px solid #2a7ef8;font-size: 26px;text-align: left;line-height: 1;color: #fff;} .headerNav-con.product .right .line{margin-bottom: 30px;} .headerNav-con.product .right .class{font-size: 22px;margin-bottom: 24px;color: #12c0ff;/*border-bottom:1px solid #12c0ff;*/display: inline-block;} .headerNav-con.product .right .box{display: flex;flex-wrap: wrap;align-items: center;} .headerNav-con.product .right .box .one{margin-right: 50px;line-height: 1;margin-bottom: 20px;font-size: 16px;} .headerNav-con.product .right .box .one:hover{color: #12c0ff;} @media(max-width:1400px){ .headerNav-con.product{max-height: 400px;} .headerNav-con.product .left{max-height: 400px;} .headerNav-con.product .right{max-height: 400px;} .tabTitle{transform: scale(0.7);transform-origin:left center;} .proB.indexPro-item .tabTitle{transform-origin: right center;} } .headerLogo .nor{display: block;} .headerLogo .hov{display: none;} .headerSet{ display: flex; align-items: center;} .headerSet .line{ font-size: 12px; display: block; color: #acacac; opacity: .3; margin: 0 20px;} .headerSet a:hover{ color: #12c0ff;} .headerLogin i{ margin-left: 5px;} .headerLogout{ display: flex; align-items:center;} .headerLogout-head{ margin-right: 10px; display: block; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;} .headerLogout-head img{ width: 100%; height: 100%; object-fit: cover;} .headerSearch{ position: relative;} .headerSearch-btn{ position: relative; z-index: 3;} .headerSearch-con{ opacity: 0; display: flex; align-items: center; z-index: 2; padding: 0 30px; position: absolute; top: 50%; margin-top:-30px ; right: -25px; border: 1px solid #000; box-shadow: 0 6px 8px rgba(0,0,0,.12); width: 0; height: 60px; background-color: #1e2132; border-radius: 30px; overflow: hidden;} .headerSearch-con a{ width: 20px; text-align: center; margin-left: 10px;} .headerSearch-form { flex: 1; display: flex; align-items: center;} .headerSearch-form input{ color: #fff; background-color: inherit; flex: 1; border: 0; outline: none;} .headerSearch-con.curr{ width: 462px; opacity: 1; z-index: 5;} .a .headerWrap{ background-color: #1c1f30; border-bottom: 1px solid rgba(255, 255, 255, .05);} /* .a .headerLogo a{ background-image: url(../images/logoB.png);} */ .a .headerLogo .nor{display: none;} .a .headerLogo .hov{display: block;} .bodyContent{ padding-top: 100px;} .footerWrap{background: url(../images/footerBg.jpg) repeat; color: #aaa;} .footerTop{ padding: 50px 0;} .footerTop-body{ display: flex; justify-content: space-between;} .footerNav{ width: 730px; display: flex; justify-content: space-between;} .footerNav dt{ color: #fff; font-size: 20px;} .footerNav dd a{ display: block; color: #aaa; line-height: 30px;} .footerNav dd a:hover{ color: #12c0ff;} .footerInfo .share li{ float: left; margin-left: 60px; position: relative;} .footerInfo .share li:first-child{ margin-left: 0;} .footerInfo .share a{ display: block; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: 1px solid #fff; color: #fff; border-radius: 50%; font-size: 30px;} .footerInfo .share li .img img{width: 30px;height: 30px;} .footerInfo .share li .img .nor{display: block;opacity: 1;} .footerInfo .share li .img .hov{display: none;opacity: 0;} .footerInfo .share li:hover .img .nor{display: none;opacity: 0;} .footerInfo .share li:hover .img .hov{display: block;opacity: 1;} .footerInfo .share li:last-child img{width: 20px;height: 20px;} .footerInfo .share li:hover a{ border-color: #12c0ff; color: #12c0ff;} .footerInfo .code{ display: none; padding: 10px; border-radius: 6px; background-color: #fff; position: absolute; left: 50%; top: 70px; margin-left: -60px; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: both; -webkit-animation-name: layui-upbit; animation-duration: .3s; animation-fill-mode: both; animation-name: layui-upbit;} .footerInfo .code:before{ content:''; display: block; position: absolute; left: 50%; top: -8px; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;border-bottom: 8px solid #fff;;} .footerInfo .code img{ width: 100px; height: 100px;} .footerInfo .share li:hover .code{ display: block;} .footerInfo .contact{ text-align: right; margin-top: 35px;} .footerInfo .contact dd{ color: #12c0ff; font-size: 30px;} .footerInfo .contact dd i{ font-size: 20px; margin-right: 20px;} .footerMid{ padding: 50px 0; border-top: 1px solid rgba(255, 255, 255, .15);} .footerMid h4{ color: #fff; font-size: 20px; line-height: 36px;} .footerMid .con{ display: flex; justify-content: space-between;} .footerMid p{ line-height: 36px;} .footerBot{ padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, .15);} .rightBox, .messageBox{position: fixed;right:10px;bottom:15vh;width: 110px;z-index: 9990;} .rightBox .top, .messageBox .top{margin-bottom: 10px;position: relative;} .rightBox .top>.text, .messageBox .top>.text{border-radius: 10px;margin-top:-5px;width:110px;height:34px;color:#fff;font-size: 14px;line-height: 34px;text-align: center;background: #2A7EF8;position: relative;z-index: 1;} .rightBox .top .img, .messageBox .top .img{width:100px;height:100px;overflow:hidden;border-radius: 50%;margin: 0 auto;} .rightBox .top:hover>.text{background:#12BDFB;} .rightBox .top:hover .box{visibility: visible;opacity: 1;padding-right: 10px;} .rightBox .top .one{display: flex;align-items: center;flex-direction: column;color: #62687a;font-size: 14px;padding-bottom: 10px;position: relative;} .rightBox .top .one:hover>.text{color: #12c0ff;} .rightBox .top .one .img{width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;} .rightBox .top .one .img img{max-width: 100%;max-height: 100%;} .rightBox .bot .one{display: flex;align-items: center;flex-direction: column;color: #62687a;font-size: 14px;margin-bottom: 10px;position: relative;background: #fff;margin-bottom: 10px;border-radius: 10px;} .rightBox .bot .one:hover>.text{color: #12c0ff;} .rightBox .bot .one .img{width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;} .rightBox .bot .one .img img{max-width: 100%;max-height: 100%;} .rightBox .bot .one:last-child{margin-bottom:0;} .rightBox .one .nor{display: block;} .rightBox .one .hov{display: none;} .rightBox .one:hover>.img .nor{display: none;} .rightBox .one:hover>.img .hov{display: block;} .rightBox .box{visibility: hidden;opacity: 0;position: absolute;right: 110px;top: 50%;transform: translateY(-50%);padding-right: 30px;} .rightBox .box .block{display: flex;padding: 20px;border-radius: 10px;background: #fff;position: relative;} .rightBox .box .block::after{position: absolute;content:"";top: 0;bottom: 0;width: 10px;height: 10px;background: #fff;transform: rotate(45deg);right: -5px;margin: auto;} .rightBox .one:hover .box{visibility: visible;opacity: 1;padding-right: 10px;} .rightBox .box .one{width: 70px;margin-bottom: 0;padding-bottom: 0;} .rightBox .bot .box .block{display: block;white-space: nowrap;font-size: 14px;color: #62687a;line-height: 1.5;} .rightBox .bot .box .block .name{display: flex;align-items: center;} .rightBox .bot .box .block .tel{color: #12c0ff;font-size: 20px;} .rightBox .bot .box .block .name .img{width: 20px;height: 20px;margin-right: 5px;} .rightBox .bot .wx .box .block{text-align: center;} .rightBox .bot .gongzhong .box .block{text-align: center;} .rightBox .bot .wx .box .block .img{width: 120px;height: 120px;} .rightBox .bot .gongzhong .box .block .img{width: 120px;height: 120px;} .rightBox .bot .test{cursor: pointer;} .indexBanner{ height: 800px; background-color: #1c1f30;} .indexBanner .swiper-container{ height: 100%;} .indexBanner .swiper-slide{ background: url(../images/bannerBg-1.jpg) no-repeat; background-size: cover; height: 100%; display: flex; align-items: center; transition: all linear 3s;} .indexBanner .con{ width: 80%; margin: 0 auto; display: flex; align-items: center; justify-content:center; min-width: 1200px;} .indexBanner .pic{ width: 50%; max-width: 794px; opacity: 0; transform: translateX(-10%); transition-delay: .3s;} .indexBanner .pic img{ width: 100%;} .indexBanner .text{ opacity: 0; transform: translateX(10%); transition-delay: .5s; margin-left: 100px; max-width: 40%;} .indexBanner .text .pA{ font-size: 40px; line-height: 1.2;} .indexBanner .text .pB{ font-size: 26px; margin-top: 10px;} /* .indexBanner .text .lrBtn{ margin:50px 0 0 0;} */ .indexBanner .text .contact{ margin:50px 0 0 0;display: flex;} .indexBanner .text .contact .more{ display: block; margin: 0 20px 0 0; background-color: transparent; width: 140px; line-height: 40px; height: 40px; text-align:center; color: #fff;border: 1px solid #fff;} .indexBanner .text .contact .more:hover{ background-color: #12C0FF;border-color: #12c0ff;} .indexBanner .text .contact .lrBtn{width: 140px !important;line-height: 40px !important; height: 40px !important; margin: 0 20px 0 0 !important;} .indexBanner .swiper-slide-active .pic,.indexBanner .swiper-slide-active .text{ opacity: 1; transform: translateX(0);} .indexBanner .swiper-container-horizontal>.swiper-pagination-bullets{ position: static; width: auto;} .indexBanner .swiper-pagination{ position: static; text-align: left;} .indexBanner .swiper-pagination-bullet{ overflow: hidden; position: relative; width: 30px; height: 3px; border-radius: 0; opacity:1; margin: 0 10px 0 0; background-color: rgba(255,255,255,.2); outline: none;} .indexBanner .swiper-pagination-bullet-active{ opacity: 1;} .indexBanner .swiper-pagination-bullet-active:before{ content: ''; display: block; position: absolute; top: 0; bottom: 0; left: -100%; background-color: #12c0ff; width: 100%; animation:bullet 6s;} @keyframes bullet{ 0% {left:-100%;}/*1091*/ 100% {left:0;} /*0913*/ } .indexPlan{ margin-top: -100px; position: relative; z-index: 9;;} .indexPlan ul{ display: flex; justify-content: space-between;} .indexPlan li{ border-radius:10px; overflow: hidden; background-color: #000;} .indexPlan a{ width: 380px; height: 200px; display: block; display: flex; justify-content: center; align-items: center; position: relative;} .indexPlan .bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0;} .indexPlan .bg{ width: 100%; height: 100%;} .indexPlan .con{ text-align: center; position: relative; z-index: 2;} .indexPlan .icon img{ width: 59px; margin: 0 auto;} .indexPlan .text{ margin-top: 20px;} .indexPlan li:hover{ background-color: #2a7ef8;} .indexPlan li:hover .con{ text-align: left; display: flex; justify-content: center; align-items: center;} .indexPlan li:hover .icon img{ width: 59px;} .indexPlan li:hover .text{ font-size: 20px; margin-left: 15px; margin-top: 0;} .indexPro-item .dec dt{ font-size: 46px; line-height: 1.4;} .indexPro-item .dec dd{ margin-top: 30px;} .indexPro-item .box{ position: relative; min-height: 1004px; display: flex; align-items: center;} .indexPro-item .bg{ display: flex; justify-content: center; top: 0; align-items: center; z-index: 2; position: absolute; width: 1004px; height: 1004px; background: url(../images/indexPro-1.png) no-repeat;} .indexPro-item .tabTitle li{ height: 140px; width: 370px; padding: 0 50px; margin-top: 20px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; } .indexPro-item .tabTitle li:first-child{ margin-top: 0;} .indexPro-item .tabTitle dt{ font-size: 40px; padding-left: 22px; border-left: 2px solid #12c0ff; line-height: 1;} .indexPro-item .tabTitle dd{ margin-top: 10px;} .indexPro-item .tabContent{ z-index: 3; position: absolute; top: 50%; left: 238px; transform: translateY(-50%); width: 920px; height: 560px;} .indexPro-item .tabItem{opacity: 0; position: absolute; left: 0; top: 0; right: 0; bottom: 0;} .indexPro-item .tabItem.time03{-webkit-transition: all 1s ease-out 0s; -o-transition: all 1s ease-out 0s; transition: all 1s ease-out 0s;} .indexPro-item .tabItem ul{ height: 100%; display: flex; flex-wrap: wrap; align-content: space-between;} .indexPro-item .tabItem li{ float: left; width: 50%; position: relative; height: 109px;} /* .indexPro-item .tabItem li:nth-child(1),.indexPro-item .tabContent li:nth-child(2){ margin-top: 0;} */ .indexPro-item .tabItem li:nth-child(2n){ display: flex; justify-content: flex-end;} .indexPro-item .tabItem a{ transform: translateX(-50%); opacity: 0; position: relative; display: flex; align-items: center; flex-wrap: wrap; width: 260px; height: 109px; padding:20px; background-image: url(../images/indexPro-4.png); background-repeat: no-repeat;} .indexPro-item .tabItem li:nth-child(2n) a{ transform: translateX(50%);} .indexPro-item .tabItem a:hover{ background-position: 0 -109px;} .indexPro-item .tabItem a span{ display: block; width: 100%;} .indexPro-item .tabItem .spanA{ line-height: 1;font-size: 20px;} .indexPro-item .tabItem .spanB{ font-size: 14px; margin-top: 10px; line-height:20px;} .indexPro-item .tabItem li:nth-child(1) a,.indexPro-item .tabItem li:nth-child(7) a{ left: 70px;} .indexPro-item .tabItem li:nth-child(2) a,.indexPro-item .tabItem li:nth-child(8) a{ right: 70px;} .indexPro-item .tabItem li:before{ content: ''; position: absolute; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: #2c303c; border: 1px dotted #12c0ff;} .indexPro-item .tabItem li:nth-child(1):before{ bottom: -25px; left:360px;} .indexPro-item .tabItem li:nth-child(2):before{ bottom: -25px; right: 360px;} .indexPro-item .tabItem li:nth-child(3):before{ bottom: 25px; left:282px;} .indexPro-item .tabItem li:nth-child(4):before{ bottom: 25px; right: 282px;} .indexPro-item .tabItem li:nth-child(5):before{ top: 25px; left:282px;} .indexPro-item .tabItem li:nth-child(6):before{ top: 25px; right: 282px;} .indexPro-item .tabItem li:nth-child(7):before{ top: -25px; left:360px;} .indexPro-item .tabItem li:nth-child(8):before{ top: -25px; right: 360px;} .indexPro-item .tabItem li:hover:before{ background-color: #12c0ff; border-style: solid;} .indexPro-item .tabItem.cur{opacity: 1; z-index: 2;} .indexPro-item .tabItem.cur a,.indexPro-item .tabItem.cur li:nth-child(2n) a{ transform: translateX(0); opacity: 1;} .proA.indexPro-item .dec{ position: absolute; top: 30px; left: 0; right: 0;} .proA.indexPro-item .bg{ right: 0;} .proA.indexPro-item .tabTitle li{ background-image: linear-gradient(to right, #1c1f30, rgba(0,0,0,0));} .proA.indexPro-item .tabTitle li:hover,.proA.indexPro-item .tabTitle li.cur{background-image: linear-gradient(to right, #2a7ff8, rgba(0,0,0,0));} .proB.indexPro-item .dec{ text-align: right;} .proB.indexPro-item .box{ justify-content: flex-end;} .proB.indexPro-item .tabTitle{ text-align: right;} .proB.indexPro-item .tabTitle li{background-image: linear-gradient(to right, rgba(0,0,0,0),#1c1f30);} .proB.indexPro-item .tabTitle li:hover,.proB.indexPro-item .tabTitle li.cur{background-image: linear-gradient(to right, rgba(0,0,0,0), #2a7ff8);} .proB.indexPro-item .tabTitle dl{ width: 100%;} .proB.indexPro-item .tabTitle dt{ font-size: 26px; line-height: 36px; border-left: 0; border-right: 2px solid #12c0ff; padding-right:22px;} .proB.indexPro-item .bg{ left: 0;} .proB.indexPro-item .tabContent{ left: 42px;} .indexPro-item .tabItem.a ul{ align-content: center;} .indexPro-item .tabItem.a li:nth-child(1) a{ left: 0;} .indexPro-item .tabItem.a li:nth-child(2) a{ right: 0;} .indexPro-item .tabItem.a li:nth-child(1):before{ top: 50%; margin-top: -6px; left:275px;} .indexPro-item .tabItem.a li:nth-child(2):before{ top: 50%; margin-top: -6px; right: 275px;} .indexPro-item .tabItem.b li:nth-child(1) a,.indexPro-item .tabItem.b li:nth-child(3) a{ left: 70px;} .indexPro-item .tabItem.b li:nth-child(2) a,.indexPro-item .tabItem.b li:nth-child(4) a{ right: 70px;} .indexPro-item .tabItem.b li:nth-child(3):before{ top: -25px; left:360px;} .indexPro-item .tabItem.b li:nth-child(4):before{ top: -25px; right: 360px;} .indexPro-item .tabItem.c li:nth-child(1) a,.indexPro-item .tabContent .c li:nth-child(5) a{ left: 70px;} .indexPro-item .tabItem.c li:nth-child(2) a,.indexPro-item .tabContent .c li:nth-child(6) a{ right: 70px;} .indexPro-item .tabItem.c li:nth-child(3):before{ top: 50%; margin-top: -6px; left:275px;} .indexPro-item .tabItem.c li:nth-child(4):before{ top: 50%; margin-top: -6px; right: 275px;} .indexPro-item .tabItem.c li:nth-child(5):before{ top: -25px; left:360px;} .indexPro-item .tabItem.c li:nth-child(6):before{ top: -25px; right: 360px;} .title{ text-align: center;} .title h4{font-size: 40px; line-height: 1.2;} .title p{font-size: 20px; margin-top: 20px; letter-spacing: 10px; text-transform:uppercase;} .title p.pA{ letter-spacing: 0;} .moreBtn { display: flex; align-items: center;} .moreBtn i{ display: block; margin-left: 15px; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; border: 1px solid #fff; color: #5bbef8;} .moreBtn:hover{ color: #12c0ff;} .moreBtn:hover i{ background-color: #12c0ff; border-color: #12c0ff; color: #fff;} .a.moreBtn{ color: #12c0ff;} .a.moreBtn i{background-color: #12c0ff; border-color: #12c0ff; color: #fff;} .b.moreBtn{ color: #333;} .b.moreBtn i{background-color: #fff; border-color: #ccc; color: #12c0ff;} .lrBtn{ display: block; margin: 0 auto; background-color: #12c0ff; width: 200px; line-height: 50px; height: 50px; text-align:center; color: #fff;} .lrBtn:hover{ background-color: #2a7ef8;} .indexSer-menu ul{ display: flex; justify-content: space-between;} .indexSer-menu a{ display: block;} .indexSer-menu .icon{ width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border: 1px solid #000; border-radius: 50%;} .indexSer-menu .icon img{ max-height: 47px;} .indexSer-menu span{ display: block; text-align: center; margin-top: 15px;} .indexSer-menu a:hover .icon{ background-color: #1c1f30; border-color: #1c1f30; box-shadow: 0 6px 8px rgba(0,0,0,.12);} .indexSer-content{ height: 600px;} .indexSer-content .swiper-slide{ overflow: hidden; width:25%; display: flex; justify-content: center; align-items: center; height: 600px; background-color: #000;} .indexSer-content .pic{ position:absolute; left: 0; right: 0; top: 0; bottom: 0;} .indexSer-content .pic img{ width: 100%; height: 100%; object-fit: cover; transform: scale3d(1, 1, 1); transition: all 5s cubic-bezier(0.04, 0.79, 1, 1);} .indexSer-content .con{ width: 70%; max-width: 600px; position: relative; z-index: 2;} .indexSer-content .tit{ font-size: 40px; line-height: 50px; text-align: center; transform: translateY(50px);} .indexSer-content .tit span{ display: block;} .indexSer-content .tit:after{ content: ''; display: block; width: 40px; height: 4px; background-color: #fff; margin: 0 auto; margin-top: 20px;} .indexSer-content .dec{ line-height: 30px; margin-top:50px; min-height: 130px; display: none; opacity: 0;} .indexSer-content .btn{ margin-top: 30px; opacity: 0; transform: translateX(-150%); transition: transform linear 0.3s;} .indexSer-content .swiper-slide:hover { width: 50%;} .indexSer-content .swiper-slide:hover .pic img{transform: scale3d(1.2, 1.2, 1); transition: all 5s cubic-bezier(0.04, 0.79, 1, 1); filter: blur(3px);} .indexSer-content .swiper-slide:hover .tit{ text-align: left; text-shadow: 2px 2px 0 rgba(0,0,0,.5); transform: translateY(0);} .indexSer-content .swiper-slide:hover .tit span{ display: inline-block;} .indexSer-content .swiper-slide:hover .tit:after{ display: none;} .indexSer-content .swiper-slide:hover .dec{ display: block; opacity: 1;} .indexSer-content .swiper-slide:hover .btn{transform: translateX(0); opacity: 1;} .indexSer-content .swiper-slide:last-child:hover{ margin-left: -25%; z-index: 10;} .indexSer-content .swiper-pagination{ display: none;} .indexSer-content .arrow{ display: flex; align-items: center; justify-content: center; background-image: none; position: absolute; top: 50%; margin-top: -40px; background-color: #222; width: 80px; height: 80px; border-radius: 50%; outline: none;} .indexSer-content .arrow i{ line-height: 1; font-size: 30px; color: #12c0ff;} .indexSer-content .arrow:hover{ background-color: #12c0ff;} .indexSer-content .arrow:hover i{ color: #fff;} .indexSer-content .swiper-button-next{ right: 20px;} .indexSer-content .swiper-button-prev{ left: 20px;} .indexVideo{ height: auto;display: block;} .indexVideo .swiper-slide{ overflow: hidden; width:395px; height: 360px; background: rgb(0 0 0,0.2);border-radius: 9px;} .indexVideo .swiper-slide:hover{background: rgb(0 0 0, 0.3);} .indexVideo .pic{height: 220px;width: 100%;position: relative;cursor: pointer;} .indexVideo .pic img{ width: 100%; height: 100%;} .indexVideo .pic i{display: block;position: absolute; left: 42%; right: 0;top: 40%;background: #000;width: 60px; height: 60px;border-radius: 50%;font-size: 36px;opacity: 0.7;text-align: center;line-height: 60px;} .indexVideo .swiper-slide:hover .pic i {opacity: 1;} .indexVideo .con{padding: 10px;position: relative;height: 128px;} .indexVideo .con .tit{font-size: 22px;opacity: 0.9;padding:10px 0;text-align: center;line-height: 1.5;} .indexVideo .con .dec{font-size: 13px;opacity: 0.7;} .indexVideo .con .btn{font-size: 14px;position: absolute;bottom: 0px;left: 0;width: 100%;background: rgba(67,72,93, 0.5);text-align: center;padding: 10px;width: 100%;height: 50px;} .indexVideo .swiper-pagination{ display: none;} .indexVideo .arrow{ display: flex;opacity: 0.5; align-items: center; justify-content: center; background-image: none; position: absolute; top: 50%; margin-top: -40px; background-color: #222; width: 60px; height: 60px; border-radius: 50%; outline: none;} .indexVideo .arrow i{ line-height: 1; font-size: 26px; color: #12c0ff;} .indexVideo .arrow:hover{ background-color: #12c0ff;} .indexVideo .arrow:hover i{ color: #fff;} .indexVideo .swiper-button-next{ right: -0px;} .indexVideo .swiper-button-prev{ left: -0px;} .tpm-solution__nav{ width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border: 1px solid #000; border-radius: 50%;} .tpm-solution__nav:hover{ background-color: #1c1f30; border-color: #1c1f30; box-shadow: 0 6px 8px rgba(0,0,0,.12);} .tpm-solution__nav-icon{ display: block; width: 60px; height: 60px; background-image: url(../images/icon-1.png); background-repeat: no-repeat; background-size: 100% auto; background-position: top; } .tpm-solution__nav-icon.is-leave{ -webkit-animation: tpm-solution__nav-icon-leave .3s steps(16) forwards; animation: tpm-solution__nav-icon-leave .3s steps(16) forwards;} .tpm-solution__nav-icon.is-enter{ -webkit-animation: tpm-solution__nav-icon-enter .3s steps(16) forwards; animation: tpm-solution__nav-icon-enter .3s steps(16) forwards; } .indexBanner .arrow{ display: flex; align-items: center; justify-content: center; background-image: none; position: absolute; top: 50%; margin-top: -40px; background-color: transparent; width: 80px; height: 80px; border-radius: 50%; outline: none;} .indexBanner .arrow i{ line-height: 1; font-size: 30px; color: #fff;} /* .indexBanner .arrow:hover i{ color: #fff;} */ @-webkit-keyframes tpm-solution__nav-icon-enter { 0% { background-position: 0 0 } to { background-position: 0 -960px } } @keyframes tpm-solution__nav-icon-enter { 0% { background-position: 0 0 } to { background-position: 0 -960px } } @-webkit-keyframes tpm-solution__nav-icon-leave { 0% { background-position: 0 -960px } to { background-position: 0 0 } } @keyframes tpm-solution__nav-icon-leave { 0% { background-position: 0 -960px } to { background-position: 0 0 } } .indexNew-con ul{ margin-left: -20px; margin-top: -20px;} .indexNew-con li{ overflow: hidden; width: 350px; height: 280px; float: left; margin-left: 20px; margin-top: 20px; position: relative; background-color: #000;} .indexNew-con li:nth-child(1){ width: 720px; height: 400px;} .indexNew-con li:nth-child(2){ width: 460px; height: 700px; float: right;} .indexNew-con .pic{ position: absolute; left: 0; right: 0; top: 0; bottom: 0;} .indexNew-con .pic img{ width: 100%; height: 100%; object-fit: cover;} .indexNew-con .con{ position: relative; z-index: 2; padding: 20px; height: 100%; display: flex; flex-wrap: wrap; align-content:space-between;background-image: linear-gradient(transparent, rgba(0,0,0,.25) 20%,rgba(0,0,0,.5));} .indexNew-con .time{ opacity: 0;display: none;} .indexNew-con .object dt{ font-size: 24px; position: absolute; left: 20px; right: 20px; bottom: 20px;} .indexNew-con .object dd{ margin-top: 20px; opacity: 0;} .indexNew-con .btn{ opacity: 0;display: none;} /* .indexNew-con li:hover .pic{ opacity: .6;} */ .indexNew-con li:hover .con{background: rgba(0, 0, 0, 0.6);} .indexNew-con li:hover .pic img{ -webkit-transform:scale(1.05) ; -moz-transform:scale(1.05) ; -o-transform:scale(1.05) ; transform:scale(1.05) ;} .indexNew-con li:hover .time{ opacity: 1;display: block;} .indexNew-con li:hover .object{ width: 100%;} .indexNew-con li:hover .object dd{ opacity: 1; width: 100%;} .indexNew-con li:hover .object dt{ position: static; width: 100%;} .indexNew-con li:hover .btn{ opacity: 1; display: flex; justify-content: flex-end; width: 100%;} .indexAbout{ background: url(../images/footerBg.jpg) repeat; padding: 50px 0;} .indexAbout dl{ float: left; width: 20%; line-height: 1.4; padding: 0 30px; position: relative; padding-top: 20px;} .indexAbout dt{ color: #c0bfbf;} .indexAbout dd{ font-size: 20px; display: flex; align-items: center;} .indexAbout dl:before{ content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.25),rgba(255,255,255,0));} .indexAbout dl:last-child:after{ content: ''; display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.25),rgba(255,255,255,0));} .inrow>li,.inrow span{display:inline-block;*display:inline;*zoom:1;font-size:14px;letter-spacing:normal;word-spacing:normal; } .dataNums{display: block; width:100%; height:75px;text-align:center;} .dataNums .dataOne{ width:30px; height:75px; text-align: center;} .dataNums .dataBoc {position: relative; width: 100%; height: 100%; overflow: hidden;} .dataNums .dataBoc .tt {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .dataNums .tt span{width:100%;height:100%;font-size:46px;} .indexAbout .num{ display: flex;font-size: 46px; margin-right: 3px; height: 75px;position: relative;} .indexAbout .num i{ font-style: normal;} .indexAbout .num span.add{position: absolute;top: 0;right: -15px;font-size: 20px;color: #fff;} .indexScheme{background-image: url(../images/banner_fangan.png);background-repeat: no-repeat; background-position: center; background-size: cover;} .indexScheme .lrBtn{width: 150px;height: 50px;line-height: 50px;border-radius: 5px;} .indexCase-con { position: relative;} .indexCase-con .swiper-slide a{ background-color: #fff; height: 98px; display: flex; justify-content: center; align-items: center;} .indexCase-con .swiper-slide img{ height: 75px; width: 180px; object-fit: contain;} .indexCase-con .arrow{ display: flex; align-items: center; justify-content: center; background-image: none; position: absolute; top: 50%; margin-top: -40px; background-color: #222; width: 80px; height: 80px; border-radius: 50%; outline: none;} .indexCase-con .arrow i{ line-height: 1; font-size: 30px; color: #12c0ff;} .indexCase-con .arrow:hover{ background-color: #12c0ff;} .indexCase-con .arrow:hover i{ color: #fff;} .indexCase-con .swiper-button-next{ right: -105px;} .indexCase-con .swiper-button-prev{ left: -105px;} .fyBanner{ height: 600px; background-color: #000; background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center;} .fyBanner .text{ text-align: center;} .fyBanner .text h4{ font-size: 40px;} .fyBanner .text p{ font-size: 20px; margin-top: 5px; font-weight: lighter;} .fyBanner .a.text{ text-align: left; width: 680px;} .proBanner.fyBanner{ background-image: url(../images/proBanner.jpg);} .proDelBanner.fyBanner{ background-image: url(../images/proDelBanner.jpg);} .proDelBanner .left{width: 50%;display: flex;flex-direction: column;align-items: flex-start;} .proDelBanner .left .text{text-align: left;} .proDelBanner .left .lrBtn{width: 140px;height: 40px;line-height: 40px;} /* .proOverview {text-indent: 2em;} */ .proOverview .video{position: relative;width: 100%;height: 510px;border-radius: 20px;overflow: hidden;} .proOverview .video .start{position: absolute;top: 0;bottom: 0;left: 0;margin: auto;background-image: url(../images/video_start.png);width: 352px;height: 120px;display: flex;align-items: center;z-index: 3;cursor: pointer;} .proOverview .video .start .name{width: 200px;height: 50px;display: flex;flex-wrap: wrap;align-items: center;margin: 30px;} .proOverview .video video{z-index: 1;width: 100%;height: 100%;} .proFunction .main{display: flex;} .proFunction .main .gallery-thumbs{flex: 3;} .proFunction .main .gallery-thumbs .swiper-slide{flex: 1;display: flex;align-items: center;padding: 20px;background: #fff;border-bottom: 1px solid #252830;color: #000;box-sizing: border-box;font-size: 20px;} .proFunction .main .gallery-thumbs .swiper-slide .img{margin-right: 20px;} .proFunction .main .gallery-thumbs .swiper-slide .text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;margin: 0;} .proFunction .main .gallery-thumbs .swiper-slide-thumb-active{border-bottom: 4px solid #2A7EF8;background: #12C0FF;color: #fff;} .proFunction .main .gallery-thumbs .swiper-slide .nor{opacity: 1;display: block;} .proFunction .main .gallery-thumbs .swiper-slide .act{opacity: 0;display: none;} .proFunction .main .gallery-thumbs .swiper-slide-thumb-active .nor{opacity: 0;display: none;} .proFunction .main .gallery-thumbs .swiper-slide-thumb-active .act{opacity: 1;display: block;} .proFunction .main .gallery-top{flex: 7;position: relative;} .proFunction .main .gallery-top .img{width: 100%;overflow: hidden;} .proFunction .main .gallery-top .img img{width: 100%;object-fit: cover;} .proFunction .main .gallery-top:hover .img img{transform: scale(1.05);} .proFunction .main .gallery-top .text{position: absolute;bottom: 0;left: 0;right: 0;background-image:linear-gradient( 0deg , #000 , rgba(0,0,0,0));padding: 30px;max-height: 100%;overflow: auto;} .proFunction .main .gallery-top .text .name{display: flex;align-items: center;font-size: 26px;color: #fff;} .proFunction .main .gallery-top .text .name img{margin-right: 20px;} .proFunction .main .gallery-top .text .content{font-size: 16px;color: #cccccc;line-height: 2;} .proAdvantages .main{display: flex;/*justify-content: space-between;*/flex-wrap: wrap;} .proAdvantages .main .one{width: 30%;border-top-left-radius: 20px;border-top-right-radius: 20px;overflow: hidden;background: #1E2130;position: relative;padding-bottom: 73px;margin-bottom: 30px;margin-right: 5%;} .proAdvantages .main .one:nth-child(3n){margin-right: 0;} .proAdvantages .main .one:hover{box-shadow: 0 0 10px rgba(0,0,0,0.5);} .proAdvantages .main .one .img{display: flex;align-items: center;height: 200px;width: 100%;border-radius: 20px;overflow: hidden;} .proAdvantages .main .one .img img{width: 100%;height: 100%;object-fit: cover;} .proAdvantages .main .one:hover .img img{transform: scale(1.05);} .proAdvantages .main .one .bottom{position: absolute;bottom: 0;left: 0;right: 0;margin: auto;display: flex;justify-content: center;} .proAdvantages .main .one .bottom::after{position: absolute;bottom: 0;background: #12C0FF;height: 7px;content: "";width: 0%;opacity: 0;transition: all 0.3s;} .proAdvantages .main .one:hover .bottom::after{width: 100%;opacity: 1;} .proAdvantages .main .one .bottom img{opacity: 1;} .proAdvantages .main .one:hover .bottom img{opacity: 0;} .proAdvantages .main .text{padding: 0 30px;} .proAdvantages .main .text .name{font-size: 26px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom: 20px;overflow:hidden;} .proAdvantages .main .text .content{font-size: 16px;line-height: 2;text-align: justify;} .proOverview-con .text{text-align: justify;text-indent: 2em;} .proValue .main{display: flex;} .proValue .main .left{width: 50%;padding: 30px;background: #1D1F2E;} .proValue .main .left .img{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;} .proValue .main .left .img img{max-width: 100%;max-height: 100%;transition: all .3s;} .proValue .main .left:hover .img img{transform: scale(1.05);} .proValue .main .right{width: 50%;padding: 50px 30px 30px;background: #1E2130;} .proValue .main .right .name{font-size: 36px;color: #fff;/*display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;*/margin-bottom: 20px;overflow:hidden;} .proValue .main .right .list .one{padding: 20px 40px;background: transparent;color: #fff;/*border-bottom: 1px solid #ddd;*/font-size: 16px;line-height: 2;position: relative;} .proValue .main .right .list .one::after{background: rgba(255, 255, 255, 0.9);position: absolute;left: 0;right: 0;bottom: 0;width: 520px;height: 1px;margin: auto;content: "";} .proValue .main .right .list .one:hover{background: #12c0ff;/*border-bottom: 1px solid #12c0ff;*/} .proValue .main .right .list .one:hover::after{display: none;} .proValue .main .right .list .one:last-child::after{display: none;} .proValue .main .right .list .one span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .proScenarios .main{display: flex;/*justify-content: space-between;*/flex-wrap: wrap;} .proScenarios .main .one{width: 380px;position: relative;margin-bottom: 30px;margin-right: 30px;display: flex;flex-direction: column;} .proScenarios .main .one:nth-child(3n){margin-right: 0;} .proScenarios .main .one .img{display: flex;align-items: center;height: 200px;width: 90%;overflow: hidden;margin: 0 auto;} .proScenarios .main .one .img img{width: 100%;height: 100%;object-fit: cover;} .proScenarios .main .one:hover .img img{transform: scale(1.05);} .proScenarios .main .text{padding: 40px 30px 50px;height: auto !important;background: #1E2130 !important;border-radius: 20px;overflow: hidden;} .proScenarios .main .one:hover .text{box-shadow: 0 0 10px rgba(0,0,0,0.5);} .proScenarios .main .text{flex: 1;} .proScenarios .main .text .name{font-size: 20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom: 30px;overflow:hidden;} .proScenarios .main .text .content{font-size: 16px;line-height: 2;text-align: justify;} .proDownload .download{display: flex;/*justify-content: space-between;*/flex-wrap: wrap;} .proDownload .download .one{width: 30%;position: relative;background: #1E2130;border-radius: 20px;display: flex;flex-direction: column;margin-right: 5%;} .proDownload .download .one:nth-child(3n){margin-right: 0;} .proDownload .download .one:hover{background: #12C0FF;} .proDownload .download .one .top{display: flex;align-items: center;padding: 20px 30px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);flex: 1;} .proDownload .download .one .top span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .proDownload .download .one .bot{display: flex;align-items: center;justify-content: space-between;padding: 20px 30px;} .proDownload .download .one .bot .left{font-size: 14px;} .proDownload .download .one .bot .right{display: flex;align-items: center;} .proDownload .download .one .img{margin-right: 10px;} .proMenu{ width: 180px;} .proMenu.fix{ position: fixed; top:120px; left:50%; margin-left: -600px;} .proMenu.abs{ position: absolute; left: 0;} .proMenu h4{ font-size: 20px; padding: 15px 0; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.2);} .proMenu-con .liTit{ cursor: pointer; padding: 5px 0; display: flex; justify-content: space-between; align-items: center;} .proMenu-con .liTit a{ display: block; } .proMenu-con .liTit i{ font-size: 12px;} .proMenu-con .liTit i.up{transform:rotate(180deg);-ms-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg); -o-transform:rotate(180deg);} .proMenu-con .liCon{ padding: 5px 0;} .proMenu-con .liCon a{ display: block; color: #aaa; line-height: 36px;} .proMenu-con a:hover,.proMenu-con .cur .liTit a,.proMenu-con .liCon a.curr{ color: #12c0ff;} .proList-content{ width: 900px;} .proList-item{ margin-top: 50px;} .proList-item:first-child{ margin-top: 0;} .proList-dec dt{ font-size: 36px;} .proList-dec dd{ font-size: 20px; color: #aaa;} .proList-tit{ border-bottom: 1px solid rgba(255, 255, 255, .1);} .proList-tit h4{ font-size: 26px; padding-bottom: 15px; position: relative;} .proList-tit h4:after{ content: ''; display: block; width: 70px; height: 2px; background-color: #12c0ff; position: absolute; left: 0; bottom: -1px;} .proList-body ul{ margin-left: -30px;} .proList-body li{ overflow: hidden; position: relative; top: 0; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; width: 435px; float: left; margin-top:30px; margin-left: 30px; background-color: #1c1f30; height: 150px;} .proList-body .pic{ width: 55px; height: 52px; background-repeat: no-repeat; background-image: url(../images/pro-1.png);} .proList-body .btn{ opacity: 0; transform: translateX(-150%); height: 0;} .proList-body .con{width: calc(100% - 75px);} .proList-body .tit{ font-size: 20px;} .proList-body .dec{ color: #666;} .proList-body li:hover{ background-color: #fff; border-radius: 10px; top: -5px;} .proList-body li:hover .text{ line-height: 1.4;} .proList-body li:hover .pic{ background-position: 0 -52px;} .proList-body li:hover .tit{ color: #333;} .proList-body li:hover .btn{ opacity: 1; height: auto; transform: translateX(0); margin-top: 15px;} .secondaryNav{ z-index: 11; position: absolute; left: 0; right: 0; top: 520px; height: 80px; background: url(../images/secondaryNav-bg.png) repeat-x; } .fixA.secondaryNav{ position: fixed; top: 0; background-image: url(../images/footerBg.jpg); transition: all .3s ease-out 0s;} .fixB.secondaryNav{ position: fixed; top: 100px; background-image: url(../images/footerBg.jpg); transition: all .3s ease-out 0s;} .fixA.secondaryNav~#header{ display: none;} .fixB.secondaryNav~#header{ display: block;} .secondaryNav ul{ display: flex; justify-content: center;} .secondaryNav li{ position: relative; overflow: hidden; flex: 1; max-width: 300px;} /* .secondaryNav li:before{ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #12c0ff; transition: all .2s ease-out 0s; -webkit-transform: translateX(-100%); transform: translateX(-100%); } */ .secondaryNav a{ position: relative; z-index: 2; display: block; line-height: 80px; text-align: center; font-size: 20px;} /* .secondaryNav li.cur:before{ -webkit-transform: translateX(0); transform: translateX(0);} */ .secondaryNav li.cur a{ background-color: #00bff7;} .secondaryNav a:hover{ color: #00bff7;} .secondaryNav li.cur a:hover{ color: #fff;} .proOverview-con .text p{ margin-top: 30px; text-indent: 2em;} .proOverview-con .text p:first-child{ margin-top: 0;} .proOverview-con .pic img{ width: 100%;} .proFunction-con ul{ margin: -10px 0 0 -10px;} .proFunction-con li{ padding: 30px 20px; display: flex; justify-content: center; align-items: center; overflow: hidden; margin: 10px 0 0 10px; position: relative; float: left; height: 460px; width: 290px; background-color: #2a7ef8; } .proFunction-con .pic{ position: absolute; left: 0; right: 0; top: 0; bottom: 0;} .proFunction-con .pic img{ width: 100%; height: 100%; object-fit: cover;} .proFunction-con .con{ position: relative; z-index: 2;} .proFunction-con .icon{ width: 48px; height: 48px; margin: 0 auto; display: flex; justify-content: center; align-items: center;} .proFunction-con .icon img{ height: 48px;} .proFunction-con .text{ margin-top: 10px;} .proFunction-con .tit{ font-size: 26px; text-align: center;} .proFunction-con .dec{ opacity: 0; height: 0; color: #ccc;} .proFunction-con li:hover{ justify-content: flex-start; align-items: flex-end;} .proFunction-con li:hover .pic img{opacity: .7; filter: blur(3px); -webkit-transform:scale(1.05) ; -moz-transform:scale(1.05) ; -o-transform:scale(1.05) ; transform:scale(1.05) ;} .proFunction-con li:hover .icon{ margin: 0; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: both; -webkit-animation-name: layui-upbit; animation-duration: .3s; animation-fill-mode: both; animation-name: layui-upbit;} .proFunction-con li:hover .tit{ text-align: left; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: both; -webkit-animation-name: layui-upbit; animation-duration: .3s; animation-fill-mode: both; animation-name: layui-upbit;} .proFunction-con li:hover .dec{ opacity: 1; height: auto; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: both; -webkit-animation-name: layui-upbit; animation-duration: .3s; animation-fill-mode: both; animation-name: layui-upbit;} .proAdvantages-con ul{ margin: -30px 0 0 -90px;} .proAdvantages-con li{ float: left; width: 340px; margin: 30px 0 0 90px;} .proAdvantages-con .icon {position: relative; top: 0; width: 80px; margin: 0 auto;} .proAdvantages-con .icon img{ width:80px; height: 80px;} .proAdvantages-con .text{ margin-top: 30px;} .proAdvantages-con .tit{ font-size: 26px; text-align: center;} .proAdvantages-con .dec{ margin-top: 20px;} .proAdvantages-con li:hover .icon{ top: -5px;} .proValue-con .pic img{ width: 600px;} .proValue-con .text{ width: 545px;} .proValue-con .tit { padding-left: 100px; background: url(../images/pro-22.png) no-repeat left top;} .proValue-con .tit h5{ font-size: 36px; line-height: 1.6; padding-top: 12px;} .proValue-con .dec{ margin-top: 30px;} .proValue-con .dec p{ text-indent: 2em; margin-top: 5px;} .proScenarios-con .swiper-slide{ display: flex; border-radius: 10px; overflow: hidden; width: 800px;} .proScenarios-con .pic{ flex: 1; width: 50%; height: 340px;} .proScenarios-con .text{ flex: 1; background-color: #fff; padding: 30px; height: 340px; overflow-y: auto;} .proScenarios-con .tit{ font-size: 26px; color: #262932;} .proScenarios-con .dec{ color: #666; margin-top: 15px;} .proScenarios-con .arrow{ box-shadow: 0 6px 16px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; background-image: none; position: absolute; top: 50%; margin-top: -40px; background-color: #222; width: 80px; height: 80px; border-radius: 50%; outline: none;} .proScenarios-con .arrow i{ line-height: 1; font-size: 30px; color: #12c0ff;} .proScenarios-con .arrow:hover{ background-color: #12c0ff;} .proScenarios-con .arrow:hover i{ color: #fff;} .proScenarios-con .swiper-button-next{ right: 50%; margin-right: -520px;} .proScenarios-con .swiper-button-prev{ left: 50%; margin-left: -520px;} .proDesign-con ul{ margin: -25px 0 0 -25px;display: flex;flex-wrap: wrap;} .proDesign-con li{position: relative; top: 0; float: left; width: 280px; margin: 25px 0 0 25px; padding: 40px 0; border: 1px solid rgba(255, 255, 255, .2); border-bottom: 6px solid #12c0ff; border-radius: 10px 10px 0 0;} .proDesign-con .icon { width: 80px; margin: 0 auto;} .proDesign-con .icon img{ width:80px; height: 80px;} .proDesign-con .text{ margin-top: 30px; text-align: center;} .proDesign-con .tit{ font-size: 26px;} .proDesign-con .dec{ width: 220px; margin: 0 auto; margin-top: 20px; min-height: 84px;} .proDesign-con li:hover { top: -8px;} .solutionBanner{ background-image: url(../images/solutionBanner.jpg);} .solutionList ul{ margin-left: -30px; margin-top: -30px;} .solutionList li{float: left; position: relative; width: 380px; height: 480px; background-color: #fff; margin-top: 30px; margin-left: 30px; padding: 30px;} .solutionList .pic{ position: absolute; left: 0; right: 0; top: 0; bottom: 235px;} .solutionList .pic img{ width: 100%; height: 100%; object-fit: cover;} .solutionList .con{ position: relative; z-index: 2; padding-top:240px;} .solutionList .tit{ color: #333; font-size: 20px; line-height: 1.6;} .solutionList .dec{-webkit-line-clamp:3; color: #888; margin-top: 10px;} .solutionList .btn{ opacity: 0; height: 0;} .solutionList li:hover .pic{ bottom: 0;} .solutionList li:hover .con{ display: flex; flex-wrap: wrap; align-content: center; justify-content: center; padding-top: 0; height: 100%; border: 1px solid rgba(24, 146, 223, .5);} .solutionList li:hover .text{ width: 100%; text-align: center;} .solutionList li:hover .tit{ color: #fff; padding: 0 30px; font-size: 30px;} .solutionList li:hover .dec{ display: none;} .solutionList li:hover .btn{ opacity: 1; height: auto; margin-top: 30px;} .pageList{ display: flex; justify-content: space-between; align-items: center;} .pageList-con{ display: flex; align-items: center;} .pageList-con a,.pageList-con .page-spr{ height: 40px; width: 40px; line-height: 38px; border: 1px solid #12c0ff; display: block; text-align: center; color: #12c0ff; margin-right: 10px;} .pageList-con .page-curr{height: 40px; width: 40px; line-height: 38px; border: 1px solid #12c0ff; background-color:#12c0ff; display: block; text-align: center; color: #fff; margin-right: 10px;} .pageList-con a:hover{ background-color: #12c0ff; color: #fff;} .pageList-con .page-skip{ margin-left: 10px; color: #999; display: flex; align-items: center;} .pageList-con .page-input{ border: 0; width: 40px; height: 40px; text-align: center; margin: 0 10px; padding: 0 5px; color: #12c0ff;} .pageList-con .page-btn{ line-height: 40px; padding: 0 15px; margin-left: 10px; font-size: 16px; cursor: pointer; background-color: #00bff7; color: #fff; border: 0; outline: 0;} .pageList-con .page-btn:hover{ background-color: #297cf4;} .pageList-turn{ display: flex; align-items: center;} .pageList-turn a{ position: relative; color: #12c0ff; display: flex; align-items: center; margin-left: 40px; line-height: 21px;} .pageList-turn i{ font-size: 12px; padding: 0 3px; display: block;} .pageList-turn span{ display: block;} .pageList-turn a:after{ content: ''; position: absolute; left: 0; bottom: -3px; display: none; width: 100%; height: 1px; background-color: #12c0ff;} .pageList-turn a:hover:after{ display: block;} .solutionDelBanner{background-image: url(../images/solutionDelBanner.jpg);} .solutionStatus-con { position: relative;min-height: 500px;} .solutionStatus-con .title{ text-align: left; width: 420px;} .solutionStatus-con .fl{ width: 420px;} .solutionStatus-con .text{ padding: 50px; padding-left: 0; width: 730px; min-height: 316px; z-index: 2; position: absolute; left: 0; background: url(../images/bodyBg.jpg) repeat; border-radius: 0 10px 0 0;} .solutionStatus-con .text p{ line-height: 36px; text-indent: 2em;text-align: justify;} .solutionStatus-con .pic{ width: 600px; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 27px rgba(0,0,0,.13);} .solutionStatus-con .pic img{ width: 100%;} .solutionChallege-con ul{ margin: -10px 0 0 -10px;} .solutionChallege-con li{padding: 60px 20px 0 20px; overflow: hidden; margin: 10px 0 0 10px; position: relative; top: 0; float: left; height: 500px; width: 290px; background-color: #2a7ef8; } .solutionChallege-con .pic{ position: absolute; left: 0; right: 0; top: 0; bottom: 0;} .solutionChallege-con .pic img{ width: 100%; height: 100%; object-fit: cover;} .solutionChallege-con .con{ position: relative; z-index: 2;} .solutionChallege-con .icon{ width: 100px; height: 100px; border-radius: 50%; background-color: rgba(0,0,0,.35); margin: 0 auto; display: flex; justify-content: center; align-items: center;} .solutionChallege-con .icon img{ max-height: 44px;} .solutionChallege-con .text{ text-align: center;} .solutionChallege-con .tit{ font-size: 30px; margin-top: -40px; padding-left: 60px;} .solutionChallege-con .dec{ line-height: 2; margin-top: 30px;} .solutionChallege-con li:hover{ top: -8px;} .solutionNr-con{ padding: 60px 50px; background: url(../images/footerBg.jpg) repeat; border-radius: 10px; overflow: hidden;;} .solutionNr-con .text{ line-height: 2.2;} .solutionNr-con .pic{ margin-top: 40px;} .solutionNr-con img{ max-width: 100%; border-radius: 10px 0 0 10px;} .solutionValue-con .con{ background-color: #fff; padding: 20px 30px; height: 160px; display: flex; align-items: center; border-radius: 50px 0 0 0; box-shadow: 0 11px 21px rgba(32,66,120,.02);} .solutionValue-con .icon { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; position: relative; top: 0;} .solutionValue-con .icon img{ max-height: 55px;} .solutionValue-con .text{ color: #333; flex:1; margin-left: 30px;text-align: justify;} /* .solutionValue-con .con:hover{ border-radius: 0;} */ /* .solutionValue-con .con:hover .icon{transform: scale(0); width: 0;} */ /* .solutionValue-con .con:hover .text{ margin-left: 0;} */ .solutionValue-con .con:hover .icon{ top: -5px;} .a.swiper-pagination{ position: static; margin-top: 50px;} .a.swiper-pagination .swiper-pagination-bullet{ width: 50px; height: 4px; background-color: #9dadc6; opacity: 1; border-radius: 0;} .a.swiper-pagination .swiper-pagination-bullet-active{ background-color: #12c0ff;} .a.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 10px;} .solutionCase-con ul{ margin: -1px 0 0 -1px;} .solutionCase-con li{ float: left; margin: 1px 0 0 1px;width: 238px; height: 98px; display: flex; justify-content: center; align-items: center; background-color: #fff;} .solutionCase-con img{ height: 50px; width: 150px; object-fit: contain;} .caseBanner{ background-image: url(../images/caseBanner.jpg);} .caseMenu{ width: 1300px; margin: 0 auto; margin-top: -220px; background:url(../images/footerBg.jpg) repeat; border-radius: 10px; padding: 35px 85px; box-shadow: 0 14px 16px rgba(1,3,15,.17);} .caseMenu .indexSer-menu li{position: relative;} .caseMenu .indexSer-menu li:after{ content: ''; position: absolute; left: 50%; bottom: -35px; display: block; width: 0; height: 4px; background-color: #12c0ff; transition: all .3s ease-out 0s; -webkit-transform: translateX(-50%);transform: translateX(-50%);} .caseMenu .indexSer-menu .tpm-solution__nav{ width: 90px; height: 90px; border: 0;} .caseMenu .indexSer-menu li.cur:after{ width: 100%;} .caseMenu .indexSer-menu li.cur .tpm-solution__nav{ border: 1px solid #12c0ff;} .caseList ul{ margin-left: -30px; margin-top: -30px;} .caseList li{float: left; position: relative; width: 380px; height: 500px; background-color: #fff; margin-top: 30px; margin-left: 30px;} .caseList .pic{ width: 100%; height: 180px; background-color: #e8eef8; display: flex; justify-content: center; align-items: center;overflow: hidden;} .caseList .pic img{ /*width: 280px; height: 80px;*/ object-fit: contain;max-height: 100%;max-width: 100%;} .caseList .info{ padding: 40px 40px 0 40px; } .caseList .tit{ color: #333; font-size: 24px; line-height: 1.6;} .caseList .dec{-webkit-line-clamp:3; color: #666; margin-top: 10px;} .caseList .btn{ position: absolute; left: 40px; right: 40px; bottom: 0; border-top: 1px solid #ddd; padding: 15px 0;} .caseList .btn:before{ content: ''; width: 0; background-color: #12c0ff; position: absolute; left: 0; top: 0; bottom: 0; transition: all .3s ease-out 0s; } .caseList li:hover .pic img{-webkit-transform:scale(1.05) ; -moz-transform:scale(1.05) ; -o-transform:scale(1.05) ; transform:scale(1.05) ;} .caseList li:hover .btn{ border-top: 0; left: 0; right: 0; padding-left:40px; padding-right: 40px;} .caseList li:hover .btn:before{ width: 100%;} .caseList li:hover .moreBtn{ color: #fff; position: relative;} .caseList li:hover .moreBtn i{ border-color: #fff;} .caseDelBanner{ background-image: url(../images/caseDelBanner.jpg);} .caseDelBanner .left{width: 50%;display: flex;flex-direction: column;align-items: flex-start;} .caseDelBanner .left .text{text-align: left;} .caseDelBanner .left .lrBtn{width: 140px;height: 40px;line-height: 40px;} .caseDel-tit{ width: 550px; border-left: 4px solid #12c0ff; height: 90px; display: flex; align-items: center; background-image: linear-gradient(to right, #1c1f30, rgba(0,0,0,0));} .caseDel-tit .icon{ width: 100px; height: 100%; display: flex; justify-content: center; align-items: center;} .caseDel-tit .icon img{ height: 50px;} .caseDel-tit h4{ font-size: 36px;} .caseDel-box{ margin-top: 80px;text-align: justify;} .caseDel-box:first-child{ margin-top: 0;} .caseDel-content dl{ margin-top: 50px; padding-left: 4px; line-height: 36px;} .caseDel-content dt{ padding-left: 35px; font-size: 20px; background:url(../images/case-2.png) no-repeat left center ;} .caseDel-content dd{ padding-left: 35px;} .caseDel-content .pic{ margin-top: 50px;} .caseDel-content .pic img{ max-width: 100%;} .partnerBanner{background-image: url(../images/partnerBanner.jpg);} .partnerList ul{ margin: -30px 0 0 -30px;} .partnerList li{ float: left; overflow: hidden; position: relative; width: 380px; height: 400px; background-color: #fff; margin: 30px 0 0 30px;} .partnerList .pic{ position: absolute; top: 0; left: 0; right: 0; bottom: 120px;} .partnerList .pic img{ width: 100%; height: 100%; object-fit:cover} .partnerList .info{ position: absolute; left:0; right: 0; bottom: 0;} .partnerList .text{ height: 120px; padding: 20px; display: flex; align-items: center; flex-wrap: wrap;} .partnerList .tit{ font-size: 26px; line-height: 36px; color: #222; width: 100%;} .partnerList .dec,.partnerList .btn{ opacity: 0; height: 0;} .partnerList li:hover { background-color: #000;} .partnerList li:hover .pic{ bottom: 0; opacity: .5;} .partnerList li:hover .info{ top: 0; padding: 40px; display: flex; flex-wrap: wrap; align-content: space-between;} .partnerList li:hover .text{ height: auto; padding: 0;} .partnerList li:hover .tit{ color: #fff;} .partnerList li:hover .dec{ opacity: 1; height: auto; -webkit-line-clamp:3; margin-top: 20px;} .partnerList li:hover .btn{ opacity: 1; height: auto; width: 100%; display: flex; justify-content: flex-end;} .partnerDelBanner{background-image: url(../images/partnerDelBanner.jpg);} .partnerFunction-con ul{ display: flex; flex-wrap: wrap; /*justify-content: center;*/ margin-left: -20px; margin-top: -20px;} .partnerFunction-con li{ width: 285px; margin-left: 20px; margin-top: 20px; background-color:#1c1f30; border-radius: 10px; overflow: hidden; padding: 40px 30px;} .partnerFunction-con .tit{ position: relative; line-height: 1.4; font-size: 24px; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, .06);} .partnerFunction-con .tit:before{ content: ''; display: block; width: 50px; height: 2px; background-color: #12c0ff; position: absolute; left: 0; bottom: 0;} .partnerFunction-con .info p{ margin-top: 30px; color: #abadb8; padding-left: 35px; background: url(../images/case-2.png) no-repeat left 5px; background-size: 15px;} .partnerFunction-con li:hover{ box-shadow: 0 21px 32px rgba(0,0,0,.26);} .partnerValue-con ul{ margin-left: -20px; margin-top: -20px; display: flex; flex-wrap: wrap; justify-content: center;} .partnerValue-con li{ width: 285px; height: 340px; padding: 40px 30px; margin-left: 20px; margin-top: 20px; background-color:#1c1f30; border-radius: 10px; overflow: hidden; } .partnerValue-con .icon img{ margin: 0 auto; width: 80px; height: 80px;} .partnerValue-con .info{ text-align: center; margin-top: 25px;} .partnerValue-con .tit{ font-size: 20px; margin-bottom: 15px; } .partnerValue-con .dec{ color: #abadb8;} .partnerValue-con li:hover{ box-shadow: 0 21px 32px rgba(0,0,0,.26);} .partnerAdvantage-con li{ margin-top: 30px; background-color:#1c1f30; padding: 30px 50px 40px 50px; border-radius: 10px; overflow: hidden; position: relative;} .partnerAdvantage-con li:first-child{ margin-top: 0;} .partnerAdvantage-con li:after{ content:''; display: block; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #2a7ef8; transition: all .3s ease-out 0s;} .partnerAdvantage-con .info{ display: flex; align-items: center;} .partnerAdvantage-con .pic img{ width: 80px; height: 80px;} .partnerAdvantage-con .tit{ margin-left: 20px; font-size: 30px; line-height: 1.4;} .partnerAdvantage-con .dec{ margin-top: 15px;text-align: justify;} .partnerAdvantage-con li:hover{border-radius:10px 10px 0 0; box-shadow: 0 21px 32px rgba(0,0,0,.26); } .partnerAdvantage-con li:hover:after{ width: 100%;} .partnerScenarios-con { position: relative;} .partnerScenarios-con .swiper-slide{ background-color: #fff; border-radius: 10px 10px 0 0; overflow: hidden;} .partnerScenarios-con .tit{ background-color: #1c1f30; display: flex; align-items: center;} .partnerScenarios-con .tit span{ display: block; width: 80px; height: 80px; text-align: center; line-height: 80px; background-color: #1c213c; font-size: 26px;} .partnerScenarios-con .tit p{ font-size: 24px; padding: 0 30px;} .partnerScenarios-con .info{ padding: 40px; min-height: 550px;} .partnerScenarios-con .info dl{ margin-top: 30px;} .partnerScenarios-con .info dl:first-child{ margin-top: 0;} .partnerScenarios-con .info dt{ color: #111; font-size: 24px; background: url(../images/case-2.png) no-repeat left center; padding-left: 30px;} .partnerScenarios-con .info dd{ color: #666; margin-top: 5px;} .partnerScenarios-con .swiper-slide:hover{box-shadow: 0 21px 32px rgba(0,0,0,.26);} .partnerScenarios-con .swiper-slide:hover .tit { background-color: #297cf4;} .partnerScenarios-con .swiper-slide:hover .tit span{ background-color: #12c0ff;} .partnerScenarios-con .arrow{ display: flex; align-items: center; justify-content: center; background-image: none; position: absolute; top: 50%; margin-top: -40px; background-color: #222; width: 80px; height: 80px; border-radius: 50%; outline: none;} .partnerScenarios-con .arrow i{ line-height: 1; font-size: 30px; color: #12c0ff;} .partnerScenarios-con .arrow:hover{ background-color: #12c0ff;} .partnerScenarios-con .arrow:hover i{ color: #fff;} .partnerScenarios-con .swiper-button-next{ right: -105px;} .partnerScenarios-con .swiper-button-prev{ left: -105px;} .partnerJoinBanner{ height: 800px; background-image: url(../images/partnerJoinBanner.jpg);} .partnerJoinBanner .text{ margin-top: -150px;} .partnerWarp{ padding-bottom: 120px; margin-top: -200px;} .partnerBox{ background-color: #1c1f30; border-radius: 10px; padding: 80px 40px; background-image: url(../images/partnerJoin-1.png); background-repeat: no-repeat; background-position: right bottom;} .partnerBox .tit{ text-align: center; font-size: 36px; line-height: 1; padding-bottom: 50px; margin-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, .1);} .partnerForm{ width: 720px; margin: 0 auto;} .partnerForm-group{ margin-top: 40px;} .partnerForm-group:first-child{ margin-top: 0;} .partnerForm-group h6{ font-size: 26px; line-height: 1; margin-bottom: 20px;} .partnerForm-group input{ color: #fff; font-size: 16px; width: 100%; line-height: 24px; padding: 18px 30px; border-radius: 5px; background-color: #252838; border: 0; margin-top: 10px;} .partnerForm-group .con{ display: flex; justify-content: space-between;} .partnerForm-group .con input{ width: 220px;} .partnerForm-group .lrBtn{ margin: 0; border-radius: 30px;} .contactInfo{ text-align: center;} .contactInfo .icon{ width: 76px; margin: 0 auto;} .contactInfo .icon img{ width: 100%;} .contactInfo dl{ margin-top: 20px;} .contactInfo dt{ font-size: 26px;} .contactInfo dd{ margin-top: 20px;} .contactInfo a{ margin-top: 30px; line-height: 60px; height: 60px; font-size: 20px; letter-spacing: 2px;} .partnerAuthBanner{ height: 800px; background-image: url(../images/partnerAuthBanner.jpg);} .partnerAuthBanner .text{ margin-top: -150px;} .queryAuth .partnerBox { background-image: url(../images/partnerJoin-2.png); padding-top: 120px; padding-bottom: 120px;} .queryAuth .partnerBox .tit{ padding-bottom: 0; border-bottom: 0;} .partnerSearch{ height: 60px; background-color: #252838; border-radius: 5px; overflow: hidden; display: flex; align-items: center;} .partnerSearch i{ font-size: 18px; position: relative; color: #12c0ff; display: block; padding: 0 15px 0 30px;} .partnerSearch i:after{ content: ''; display: block; position: absolute; right: 0; top: 50%; margin-top: -6px; height: 12px; width: 1px; background-color: rgba(255, 255, 255, .2);} .partnerSearch input{ background-color: inherit; border: 0; padding: 0 15px; color: #fff; flex: 1;} .partnerSearch a{ height: 60px; line-height: 60px; font-size: 20px;} .partnerSearch-res .top{ display: flex; align-items: center;} .partnerSearch-res .top .spanA{ font-size: 26px; margin-right: 20px;} .partnerSearch-res .top .spanB{ display: block; padding-left: 22px; background: url(../images/partnerJoin-3.png) no-repeat left center;} .partnerSearch-res .top a:hover{ text-decoration: underline;} .partnerSearch-res .con{ padding-top: 30px; margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, .2);} .partnerPolicyBanner{ background-image: url(../images/partnerPolicyBanner.jpg);} .ChannelPos-poin ul{ display: flex; flex-wrap: wrap; margin-left: -25px; margin-top: -25px;} .ChannelPos-poin li{ position: relative; top: 0; margin-left: 25px; margin-top: 25px; width: 280px; padding: 40px 30px; text-align: center; background-color: #1c1f30; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.2);} .ChannelPos-poin .icon{ width: 80px; height: 80px; margin: 0 auto;} .ChannelPos-poin .icon img{ width: 100%; height: 100%;} .ChannelPos-poin .tit{ margin: 20px 0 15px; font-size: 26px;} .ChannelPos-poin li:hover{box-shadow: 0 12px 40px rgba(0,0,0,.5); top: -10px;} .ChannelPos-pic { border-radius: 10px; background-color: #1c1f30; padding: 60px 50px;} .ChannelPos-pic img{ width: 100%;} .CertifiedSer-list ul{ margin-left: -12px; margin-right: -12px; display: flex; flex-wrap: wrap;} .CertifiedSer-list li{ margin-left: 12px; margin-top: 12px; position: relative; width: 230px;} .CertifiedSer-list .icon{ width: 230px; height: 96px; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative;} .CertifiedSer-list .icon img{ width: 160px; height: 50px; object-fit:contain;} .CertifiedSer-list .icon:after{ content: ''; position: absolute; display: block; width: 0; left: 0; bottom: 0; height: 4px; background-color: #12c0ff; transition: all .3s ease-out 0s;} .CertifiedSer-list li:hover .icon{ border-radius: 10px 10px 0 0;} .CertifiedSer-list li:hover .icon:after{ width: 100%;} .CertifiedSer-list .con{ padding-top: 20px; position: relative; left: 0; display: none; width: 1200px;} .CertifiedSer-list .info{ z-index: 8; background-color: #fff; padding: 40px; border-radius: 10px; color: #666; position: relative;} .CertifiedSer-list .info:before{ content: ''; position: absolute; left: 0; top: -10px; display: block;width: 0;height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff;} .CertifiedSer-list .tit{ display: flex; align-items: center;} .CertifiedSer-list .tit img{ height: 35px;} .CertifiedSer-list .tit p{ color: #000; font-size: 26px; line-height: 36px; margin-left: 15px;} .CertifiedSer-list .dec{ margin-top: 30px;} .CertifiedSer-list .dec p{ margin-bottom: 30px;} .CertifiedSer-list li:hover { position: relative; z-index: 2;} .CertifiedSer-list li:hover .con{ display: block;} .CertifiedSer-list li:nth-child(5n + 1) .con{ left:0;} .CertifiedSer-list li:nth-child(5n + 2) .con{ left:-242px;} .CertifiedSer-list li:nth-child(5n + 3) .con{ left:-484px;} .CertifiedSer-list li:nth-child(5n + 4) .con{ left:-726px;} .CertifiedSer-list li:nth-child(5n + 5) .con{ left:-968px;} .CertifiedSer-list li:nth-child(5n + 1) .info:before{ left: 105px;} .CertifiedSer-list li:nth-child(5n + 2) .info:before{ left: 347px;} .CertifiedSer-list li:nth-child(5n + 3) .info:before{ left: 589px;} .CertifiedSer-list li:nth-child(5n + 4) .info:before{ left: 831px;} .CertifiedSer-list li:nth-child(5n + 5) .info:before{ left: 1073px;} .CertifiedSer .contactInfo a{ width: 160px; height: 40px; line-height: 40px; font-size: 16px; border-radius: 20px; display: flex; align-items: center; justify-content: center;} .CertifiedSer .contactInfo i{ font-size: 24px; margin-right: 5px;} .memberBody{ padding: 160px 0 120px 0; background: url(../images/member-bg.jpg) no-repeat; background-size: cover; background-position: center top;} .memberPic{ margin-left: -80px; margin-top:-60px; margin-bottom: -100px;} .memberForm{ padding:50px 50px 80px 50px; width: 500px; background-color: #1c1f30;} .memberForm h2{ font-size: 40px; line-height: 1;} .memberForm-con{ margin-top: 40px;} .memberForm-group{ margin-top: 20px;} .memberForm-group:first-child{ margin-top: 0;} .memberForm-item:first-child{ margin-top: 0;} .memberForm-item{ border: 2px solid #252838; display: flex; align-items: center; background-color: #252838; height: 60px; padding: 0 20px; border-radius: 6px; overflow: hidden;} .cur.memberForm-item{ border-color: #297cf4;} .memberForm-item i{ display: block; width: 40px; font-size: 26px; color: #676974;} .memberForm-item input{ border: 0; background-color: inherit; color: #fff; flex: 1; line-height: 24px; padding: 5px 0;} .memberForm-group .tip{ font-size: 14px; color: #DD2C00; line-height: 2;} .memberForm-btn a{ width: 100%; font-size: 18px;} .loginAuto{ margin-top: 40px;} .loginAuto-links a:hover{ text-decoration: underline;} .code.memberForm-item{ padding-right: 0;} .code.memberForm-item a{ width: 130px; height: 60px; line-height: 60px; border-radius: 6px 0 0 6px;} .memberForm-check{ display: flex; align-items: center;} .memberForm-check input{ width: 16px; height: 16px; margin-right: 10px;} .memberForm-check a{ margin: 0 3px;} .memberForm-check a:hover{ text-decoration: underline;} .formBody{ padding: 160px 0 120px 0; background: url(../images/banner_form2.png) no-repeat; background-size: cover; background-position: center top;} .formBody .memberPic{margin: 0;} /* .formBody .fl img{margin-left: -50px;margin-top: 100px;} */ /* .formBody .title{font-size: 26px;margin-top: 110px;text-align: left;} */ .formBody .title{font-size: 26px;/*margin-top: 110px;*/text-align: left;} .formBody .content{margin-top: 30px;text-align: left;} .formBody .fl .content,.formBody .fl .title{width: 450px;} .formBody .wrong{font-size: 14px;color: #f00;opacity: 0;} .formBody .memberForm{padding: 50px;} .formBody .formTitle{color: #AAAAAA;flex-shrink: 0;margin-top: 3px;} .formBody .formTitle.must{position: relative;} .formBody .formTitle.must::before{position: absolute;left: -10px;content:"*";color:#f00;font-size:14px;top:0;bottom:0;margin:auto;} .formBody .cur.memberForm-item{ border-color: #252838;background: #2D3042;} .formBody .cur.memberForm-item .formTitle{color: #fff;} .formBody input{margin-left: 10px;background: transparent !important;} .formBody .formCheck{flex: 1;position: relative;padding-right: 30px;margin-left: 10px;height: 100%;color: #aaa;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: flex;align-items: center;} .formBody .formCheck .value{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .formBody .cur.memberForm-item .formCheck{color: #fff;position: relative;overflow: visible;} .formBody .formCheck::after{content: "";position: absolute;top: 0;right: 10px;bottom: 0;margin: auto;width: 10px;height: 10px;border-top: 2px solid #aaa;border-right: 2px solid #aaa;transform: rotate(135deg);transition: all .3s;} .formBody .cur.memberForm-item .formCheck::after{border-color: #fff;transform: rotate(-45deg);} .formBody .lrBtn{border-radius: 6px;} .formBody .memberForm-item.check{position: relative;overflow: visible;} .formBody .formCheckBox{position: absolute;top: 80px;left: 0px;right: 0;background: #252838;color: #aaa;padding: 20px;transition: all .3s;z-index: -1;opacity: 0;} .formBody .cur.memberForm-item .formCheckBox{top: 60px;opacity: 1;z-index: 9999;} .formBody .formCheckBox .one{line-height: 2;padding: 0 5px;cursor: pointer;} .formBody .formCheckBox .one:hover,.formBody .formCheckBox .one.active{background: #2D3042;color: #fff;} .formBody textarea{margin-left: 10px;background: transparent !important;min-height: 200px;} .memberForm-group.textarea .memberForm-item{height: auto;align-items: flex-start;padding: 11px 16px;} .memberForm-group.textarea .memberForm-item .textareaBox{flex: 1;width: 100%;} .memberForm-group.textarea .memberForm-item .textareaBox textarea{width: 100%;border: none;outline: none;color: #fff;} .formBody .oneformCheck{flex: 1;position: relative;padding-right: 30px;margin-left: 10px;height: 100%;color: #aaa;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: flex;align-items: center;} .formBody .oneformCheck .value{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color:#fff} .formBody .cur.memberForm-item .oneformCheck{color: #fff;position: relative;overflow: visible;} .formBody .oneformCheck::after{content: "";position: absolute;top: 0;right: 10px;bottom: 0;margin: auto;width: 10px;height: 10px;border-top: 2px solid #aaa;border-right: 2px solid #aaa;transform: rotate(135deg);transition: all .3s;} .formBody .cur.memberForm-item .oneformCheck::after{border-color: #fff;transform: rotate(-45deg);} .formBody .lrBtn{border-radius: 6px;} .formBody .memberForm-item.oneCheck{position: relative;overflow: visible;} .formBody .oneformCheckBox{position: absolute;top: 80px;left: 0px;right: 0;background: #252838;color: #aaa;padding: 20px;transition: all .3s;z-index: -1;opacity: 0;height: 300px; overflow-y:scroll;} .formBody .cur.memberForm-item .oneformCheckBox{top: 60px;opacity: 1;z-index: 9999;} .formBody .oneformCheckBox .one{line-height: 2;padding: 0 5px;cursor: pointer;} .formBody .oneformCheckBox .one:hover,.formBody .oneformCheckBox .one.active{background: #2D3042;color: #fff;} .userBanner{ background-image: url(../images/userBanner.jpg);} .userBanner .pic{ width:140px; height: 140px; border-radius: 50%; overflow: hidden; margin: 0 auto;} .userBanner .pic img{ width: 100%; height: 100%; object-fit: cover;} .userBanner .text h4{ font-size: 40px; margin-top: 40px; line-height: 1;} .logoutBtn{ margin: 0 80px 0 190px; width: 95px; display: block; line-height: 30px; text-align: center; border-radius: 12px 4px 12px 4px; background-image: linear-gradient(to right, #12c0ff, #2a7ef8);} .logoutBtn:hover{ line-height: 40px;} .userSet-item{ display: flex; align-items: center; min-height: 40px; margin-top: 40px;} .userSet-item:first-child{ margin-top: 0;} .userSet-item .lab{ color: #aaa; width: 130px;} .userSet-item .con{ display: flex; align-items: center;} .userSet-item .pic{ width: 60px; height: 60px;} .userSet-item .pic img{ width: 100%; height: 100%; object-fit: cover;} .userSet-item .setBtn{ margin-left: 40px; position: relative;} .userSet-item .setBtn:hover{ color: #297cf4; text-decoration: underline;} .userSet-item .setBtn input[type="file"]{ opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; cursor: pointer;} .userSet-item .inp{ width: 200px; background-color: #313642; border: 0; border-radius: 6px; padding: 0 15px; line-height: 40px; height: 40px; color: #fff;} .userSet-item .tip{ margin-left: 20px;} .popupWrap{position:fixed; top: 0; left: 0; right: 0; height: 100vh; z-index: 10; display:none; justify-content: center; align-items: center;} .mask{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.5); z-index: 9;} .popupBox{ position: relative; z-index: 10;; display: none; color: #333; width: 500px; background-color: #fff; border-top: 6px solid #12c0ff; padding: 50px 40px;} .popupBox .tit{ text-align: center; font-size: 30px; line-height: 1;} .popupFrom-item { margin-top: 15px;} .popupFrom-item:first-child{ margin-top: 0;} .popupFrom-item .lab{ width: 94px; padding-right: 30px; line-height: 50px; float: left; text-align: right;} .popupFrom-block{ margin-left: 94px; position: relative;} .popupFrom-item .inp{ width: 100%; height: 50px; border: 1px solid #ccc; padding:0 20px; border-radius: 4px;} .popupFrom-item .tip{ font-size: 14px; color: #DD2C00;} .popupFrom-item .btnGroup{ display: flex; margin-top: 40px;} .popupFrom-item .btnGroup a{ min-width: 80px; line-height: 40px; padding: 0 20px; text-align: center; border-radius: 6px; margin-right: 20px;} .popupFrom-item .btnGroup a:nth-child(1){ background-color: #12c0ff;} .popupFrom-item .btnGroup a:nth-child(2){ background-color: #eee; color: #333;} .popupFrom-item .btnGroup a:last-child{ margin-right: 0;} .popupFrom-item .btnGroup a:hover{ background-color: #297cf4; color: #fff;} .code.popupFrom-item .con{ display: flex;} .code.popupFrom-item .con .inp{ flex: 1;} .popupFrom-item .codeBtn{ margin-left: 10px; padding: 0 10px; width: 130px; height: 50px; line-height: 48px; border: 1px solid #12c0ff; color: #12c0ff; text-align: center; border-radius: 4px;} .popupFrom-item .codeBtn:hover{ background-color: #12c0ff; color: #fff;} .popupCloseBtn{ position: absolute; right: 20px; top: 20px; color: #8a8a8a; font-size: 20px; line-height: 1;} .popupCloseBtn:hover{ color: #297cf4; transform:rotate(180deg); -ms-transform:rotate(180deg); /* Internet Explorer */ -moz-transform:rotate(180deg); /* Firefox */ -webkit-transform:rotate(180deg); /* Safari 和 Chrome */ -o-transform:rotate(180deg); /* Opera */} .communitySchoolBanner{ background-image: url(../images/communitySchoolBanner.jpg);} .communitySchoolList ul{ margin-left: -26.5px; margin-top: -26.5px;} .communitySchoolList li{ position: relative; top: 0; float: left; margin-left: 26.5px; margin-top: 26.5px; width:280px; height:300px; background-color: #12c0ff; overflow: hidden;} .communitySchoolList .pic{ position: relative; width: 100%; height: 210px; overflow: hidden;} .communitySchoolList .pic img{ width: 100%; height: 100%; object-fit: cover; } .communitySchoolList .btn{ position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); opacity: 0; height: 0;} .communitySchoolList .moreBtn i{ background-color: #fff;} .communitySchoolList .moreBtn:hover{ color: #fff;} .communitySchoolList .moreBtn:hover i{ border-color: #fff; color: #12c0ff;} .communitySchoolList .info{ position: relative; width: 100%; height: 90px; background-color: #fff; padding: 20px;} .communitySchoolList .info:before{ content: ''; background-color: #12c0ff; display: block; width: 0; position: absolute; left: 0; top: 0; bottom: 0; transition: all .3s ease-out 0s;} .communitySchoolList .tit{ position: relative; color: #333;} .communitySchoolList li:hover {top: -10px; box-shadow: 0 12px 16px rgba(0,0,0,.2);} .communitySchoolList li:hover .pic img{ opacity: .6; -webkit-transform:scale(1.05) ; -moz-transform:scale(1.05) ; -o-transform:scale(1.05) ; transform:scale(1.05);} .communitySchoolList li:hover .info:before{ width: 100%;} .communitySchoolList li:hover .tit{ color: #fff;} .communitySchoolList li:hover .btn{ opacity: 1; height: auto;} .communitySchoolList .video{ width: 0; position: static; left: 50%; right: 0; top: 50%; bottom: 0; transform: translateX(-50%) translateY(-50%); bottom: 0;} .communitySchoolList .cur .video{ position: fixed; width: 100%; height: 100%; z-index: 1000;} .communitySchoolList .video video{ width: 100%;} .popupVideo{ width: 800px; padding: 0; border-top: 0;} .popupVideo .popupCloseBtn{ color: #fff; font-size: 50px; right: -60px; top: 0;} .popupVideo-con video{ width: 100%; outline: none;} .popupVideo-con p{ padding: 20px 10px;} .communityCycleBanner{ background-image: url(../images/communityCycleBanner.jpg);} .communityCycleA{ background:url(../images/footerBg.jpg) repeat; border-radius: 10px; overflow: hidden; padding: 50px;} .communityCycleA .tit{ display: flex; justify-content: space-between; align-items: center;} .communityCycleA .tit h5{ font-size: 46px; line-height: 1;} .communityCycleA .tit:before,.communityCycleA .tit:after{ content: ''; display: block; width: 16px; height: 22px; background: url(../images/communityCycle-1.png) no-repeat;} /* .communityCycleA-con{ padding: 0 50px;} */ .communityCycleA-con .info dt{ font-size: 26px;} .communityCycleA-con .info dd{ margin-top: 20px;} .communityCycleA-con .poin{ padding-top: 40px; margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .2);} .communityCycleA-con .poin li:first-child{ margin-top: 0;} .communityCycleA-con .poin li{ display: flex; justify-content: space-between; align-items: center; margin-top: 40px;} .communityCycleA-con .poin h6{ font-size:36px; background-image: url(../images/communityCycle-2.png); background-repeat: no-repeat; background-position: left center; background-size: auto 39px; padding-left: 60px;} .communityCycleA-con .poin li:nth-child(2) h6{ background-image: url(../images/communityCycle-3.png);} .communityCycleA-con .poin li:nth-child(3) h6{ background-image: url(../images/communityCycle-4.png);} .communityCycleA-con .poin .dec{ margin-top: 30px; color: #aaa;} .communityCycleA-con .tab{ width: 100%; border-collapse: collapse; border: 1px solid #000; margin-top: 30px;} .communityCycleA-con .tab td,.communityCycleA-con .tab th{ border: 1px solid #000; padding: 20px;} .communityCycleA-con .tab th{ color: #fff;} .communityCycleA-con .tab th:nth-child(1),.communityCycleA-con .tab td:nth-child(1){ text-align: center;} .communityCycleA .slideInLeft .table{border: 1px solid #07080D;margin-top: 20px;} .communityCycleA .slideInLeft .table .title{display: flex;border-bottom: 1px solid #07080d;} .communityCycleA .slideInLeft .table .title div{display: flex;align-items: center;justify-content: center;flex: 1;height: 60px;color: #fff;} .communityCycleA .slideInLeft .table .one{display: flex;border-bottom: 1px solid #07080d;} .communityCycleA .slideInLeft .table .one:last-child{border-bottom: none;} .communityCycleA .slideInLeft .table .one div{display: flex;align-items: center;justify-content: center;flex: 1;height: 60px;color: #aaa;} .communityCycleA .slideInLeft .table .left{border-right: 1px solid #07080d;} .communityCycleA .slideInRight .table{border: 1px solid #07080D;margin-top: 20px;} .communityCycleA .slideInRight .table .title{display: flex;border-bottom: 1px solid #07080d;} .communityCycleA .slideInRight .table .title .left{display: flex;align-items: center;justify-content: center;height: 60px;color: #fff;border-right: 1px solid #07080d;width: 200px;} .communityCycleA .slideInRight .table .title .right{flex: 1;display: flex;align-items: center;padding: 0 30px;} .communityCycleA .slideInRight .table .one{display: flex;border-bottom: 1px solid #07080d;} .communityCycleA .slideInRight .table .one:last-child{border-bottom: none;} .communityCycleA .slideInRight .table .one div{color: #aaa;} .communityCycleA .slideInRight .table .one .left{display: flex;align-items: center;justify-content: center;color: #fff;border-right: 1px solid #07080d;width: 200px;} .communityCycleA .slideInRight .table .one .right{flex: 1;display: flex;align-items: center;padding: 20px 30px;} .communityCycleB ul{ display: flex; flex-wrap: wrap; margin-top: -60px; margin-left: -60px;} .communityCycleB li{ width: 570px; margin-top: 60px; margin-left: 60px; background-color: #fff; border-radius: 0 0 10px 10px;} .communityCycleB .tit{ height: 100px; background: url(../images/img_shengming.png) no-repeat right top #fff; padding: 15px 20px 0 20px;} .communityCycleB .tit span{ display: block; padding-left: 15px;} .communityCycleB .tit .spanA{ font-size: 20px; position: relative;} .communityCycleB .tit .spanA:before{ content: ''; display: block; width: 4px; height: 26px; background-color: #12c0ff; position: absolute; left: 0; top: 50%; margin-top: -13px;} .communityCycleB li:hover .tit{background: url(../images/img_shengming.png) no-repeat right top #2A7EF8;} .communityCycleB .tit .spanA{padding-left: 24px;color: #333;} .communityCycleB .tit .spanB{display: flex;align-items: center;justify-content: space-between;} .communityCycleB .tit .left{padding-left: 24px;color: #333;} .communityCycleB .tit .right{color: #2664F6;} .communityCycleB li:hover .tit .spanA{color: #fff;} .communityCycleB li:hover .tit .left{color: #fff;} .communityCycleB li:hover .tit .right{color: #fff;} .communityCycleB .con{ padding: 40px;} .communityCycleB .con img{ width: 100%;} .communityProblemBanner{ background-image: url(../images/communityProblemBanner.jpg);} .communityProblem-list { border-top: 1px solid rgba(255, 255, 255, .2);} .communityProblem-list li{ border-bottom: 1px solid rgba(255, 255, 255, .2); padding: 25px 0; cursor: pointer;} .communityProblem-list .top{display: flex; justify-content: space-between; align-items: center;} .communityProblem-list .tit { display: flex; align-items: center;} .communityProblem-list .icon{ width: 50px; height: 50px; border-radius: 50%; background: url(../images/communityProblem-1.png) no-repeat center; background-color: #1c1f30; } .communityProblem-list .tit p{ margin-left: 20px; font-size: 20px; width: 1000px;} .communityProblem-list .info{ opacity: 0; margin: 0 70px 0 70px; border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 30px; height: 0; overflow: hidden;} .communityProblem-list .info p{ line-height: 36px;} .communityProblem-list .moreBtn span{ color: #aaa;} .communityProblem-list li:hover .tit p,.communityProblem-list li.cur .tit p{ color: #00bff7;} .communityProblem-list .cur .info{ height: auto; margin-top: 25px; opacity: 1;} .communityDataBanner{ background-image: url(../images/communityDataBanner.jpg);} .communityData-list li{ position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; height: 80px; width: 100%; background-color: #fff; margin-top: 30px; border-radius: 10px; overflow: hidden;} .communityData-list li:first-child{ margin-top: 0;} .communityData-list .icon{ position: absolute; height: 26px; left: 30px; top: 50%; margin-top: -13px;} .communityData-list .icon img{ height: 100%;} .communityData-list p{ color: #111; font-size: 20px; padding-left: 60px; width: 900px;} .communityData-list .lrBtn{ margin: 0; width: 144px; height: 40px; line-height: 38px; border: 1px solid #aaa; border-radius: 6px; background-color: #fff; color: #333; display: flex; justify-content: center; align-items: center;} .communityData-list .lrBtn i{ color: #12c0ff; font-size: 22px; margin-left: 12px;} .communityData-list .lrBtn:hover{ background-color: #2a7ef8; border-color: #2a7ef8; color: #fff;} .communityData-list .lrBtn:hover i{ color: #fff;} .communityData-list li:hover{ background-color: #12c0ff;} .communityData-list li:hover p{ color: #fff; padding-left: 0; position: relative; z-index: 2;} .communityData-list li:hover .icon{ height: 78px; margin-top: 0; top:10px; left: 10px; opacity: .2;} .aboutBanner{ background-image: url(../images/aboutBanner.jpg);} .aboutA .proMenu{ margin-top: -160px;} .aboutA-con{ position: relative; width: 980px; background: url(../images/footerBg.jpg) repeat; padding: 65px 60px 65px 420px;} .aboutA-con .bg{ position: absolute; left: 0; top: 0;} .aboutA-con .text{ position: relative;text-align: justify;} .aboutBody .text p{text-indent: 2em; margin-top: 30px;text-align: justify;} .aboutBody .text p:first-child{ margin-top: 0;} .aboutA-con .hf{ margin-top: 40px; margin-bottom: 40px; display: flex; align-items: center; justify-content: center; width: 560px; margin-right: -60px; padding: 18px 0; background-image: linear-gradient(to right, rgba(255, 255, 255, .01), rgba(255, 255, 255, .05)); border-radius: 10px 0 0 10px;} .aboutA-con .hf img{ max-height: 50px; margin-right: 80px;} .aboutBody .notes{ color: #666; text-align: center; padding: 60px 20px;} .aboutB{ display: flex; justify-content: space-between; align-items: center;} .aboutB .info{flex: 1; margin-right: 120px;} .aboutB .pic{ width: 600px;} .aboutB .pic img{ width: 100%;} .aboutTit{ position: relative; min-height: 84px;} .aboutTit h5{ font-size: 40px; position: relative; z-index: 2; padding-top: 30px; line-height: 60px;} .aboutTit em{ font-size: 84px; text-transform:uppercase; color:#fff; opacity: .05; position: absolute; left: 0; top: 0; line-height: 1;} .aboutTit p{ font-size: 26px; margin-top: 20px;} .aboutC-top{ display: flex; justify-content: space-between; align-items: center;} .aboutC-top .pic{ width: 600px;} .aboutC-top .info{ margin-left: 50px; flex: 1;} /* .aboutC-bot{ padding: 50px 20px; background-color: #fff;} */ .aboutC-bot .pic img{ width: 100%;} .aboutD .title h4{ line-height: 60px;} .aboutD-con{ border-radius: 10px 10px 0 0; overflow: hidden;} /* .aboutD-con .text{ padding: 50px 100px; background: url(../images/footerBg.jpg) repeat;} */ /* .aboutD-con .pic{ background-color: #fff;} */ .aboutD-con .pic img{ width: 100%;} .aboutE{ padding: 80px 0; background: url(../images/footerBg.jpg) repeat;} .aboutE .text{ padding: 0 50px;} .aboutE .pic{ padding: 0 30px;} .aboutE .pic img{ width: 100%;} /* .aboutF{ padding: 80px 50px; background: url(../images/footerBg.jpg) repeat; position: relative; overflow: inherit;} */ .aboutF .line{ height: 6px; background-image: linear-gradient(to right, #12c0ff, #2a7ef8); margin-top: 60px;} .cultureBanner{ background-image: url(../images/cultureBanner.jpg);} .cultureA{ background: url(../images/culture-1.jpg) no-repeat; background-size: cover; height: 430px; padding-left: 96px; display: flex; align-items: center;} .cultureA .aboutTit{ flex: 1;} .cultureA .aboutTit em{ opacity: .1; font-size: 50px;} .cultureA .aboutTit h5{ padding-top: 15px; font-size: 46px;} .cultureB-con ul{ display: flex; flex-wrap: wrap; margin-top: -30px; margin-left: -30px;} .cultureB-con li{position: relative; top: 0; background-color: #fff; margin-top: 30px; margin-left: 30px; width: 380px; padding: 60px 0; color: #333; text-align: center;} .cultureB-con .tpm-solution__nav{ width: 80px; height: 80px; margin: 0 auto; background-color: #1c1f30; border-color: #1c1f30;} .cultureB-con .info { margin-top: 50px;} .cultureB-con .info dt{ font-size: 40px; line-height: 1;} .cultureB-con .info dt:after{ content: ''; display: block; width: 50px; height: 3px; background-color: #00bff7; margin: 0 auto; margin-top: 30px;} .cultureB-con .info dd{ padding: 0 70px; margin-top: 30px;} .cultureB-con li:hover{top: -10px; box-shadow: 0 12px 16px rgba(0,0,0,.5);} .historyBanner{ background-image: url(../images/historyBanner.jpg);} /* .historyCon{ position: relative; color: #fff; min-height: 1020px; position: relative;} .historyCon .swiperBtn a{ outline: none; position: absolute; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; background-color: #222; border-radius: 50%; display: block; display: flex; justify-content: center; align-items: center; font-size: 30px;} .historyCon .swiperBtn a:hover{ background-color: #297cf4; color: #fff;} .historyCon .swiperBtn a.swiperBtn-prev{ left: -110px;} .historyCon .swiperBtn a.swiperBtn-next{ right: -110px;} .historyCon .swiper-wrapper{ padding: 450px 0;} .historyCon .swiper-wrapper:before,.historyCon .swiper-wrapper:after{ content: ''; position: absolute; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-radius: 50%; background-color: #12c0ff;} .historyCon .swiper-wrapper:before{ left: 0;} .historyCon .swiper-wrapper:after{right: 0;} .historyCon .swiper-slide{ padding-left: 130px; width: auto; width: 250px;} .historyCon .date{ width: 80px; height: 80px; position: absolute;left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background-color: #12c0ff; border-radius: 50%;} .historyCon .swiper-slide:before{ content: ''; height: 6px; position: absolute; left: 0; right: 120px; top: 50%; transform: translateY(-50%); background-color: #12c0ff;} .historyCon .event-dot{ width: 120px; height: 120px; position: relative; background-repeat: no-repeat; background-position: center;} .historyCon .swiper-slide:nth-child(2n+1) .event-dot{background-image: url(../images/history-1.png)} .historyCon .swiper-slide:nth-child(2n) .event-dot{ background-image: url(../images/history-2.png)} .historyCon .intros{ border-right: 2px solid #12c0ff; position: absolute; text-align: right; padding: 50px 35px 50px 0; right:50%; width: 300px; transform: scale(0);transition: all linear 1s;} .historyCon .swiper-slide-active .intros{transform: scale(1) translateZ(0); transform-origin: right;} .historyCon .swiper-slide:nth-child(2n+1) .intros{ bottom: 100%} .historyCon .swiper-slide:nth-child(2n) .intros{ top: 100%; } .historyCon .empty{ width: 16px; height: 16px; border-radius: 50%; background-color: #12c0ff; position: absolute; right: -9px;} .historyCon .swiper-slide:nth-child(2n+1) .empty{ top: -15px;} .historyCon .swiper-slide:nth-child(2n) .empty{ bottom: -15px;} .historyCon .year{ font-size: 36px; } .historyCon .main dl{ margin-bottom: 5px;} .historyCon .main dl:last-child{ margin-bottom: 0;} .historyCon .main dt{ color: #12c0ff; font-size: 26px;} .historyCon .icon { display: flex; justify-content: flex-end; margin-bottom: 10px; position: relative;} .historyCon .icon img{ width: 80px; height: 80px;} .historyCon .icon:after{ content: ''; display: block; position: absolute; top: 50%; margin-top: -.5px; right: -35px; width: 35px; height: 1px; background-color: #00bff7; } .historyCon .icon:before{ content: ''; display: block; position: absolute; top: 50%; margin-top: -5px; right: -41px; width: 10px; height: 10px; border-radius: 50%; background-color: #00bff7;} */ .historyCon{ position: relative; color: #fff; min-height: 1020px; position: relative;} .historyWrap{ width: 100%; overflow: hidden;} .historyCon .line{ height: 6px; width: 100%; position: absolute; left: 0; top: 50%; margin-top: -3px; background-color: #12c0ff;} .historyCon .timeList{ padding: 450px 0; position: relative; display: flex; overflow: hidden;} .historyCon .timeList:before,.historyCon .timeList:after{ content: ''; position: absolute; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-radius: 50%; background-color: #12c0ff;} .historyCon .timeList:before{ left: 0;} .historyCon .timeList:after{right: 0;} .historyCon .timeItem{ padding-left: 130px; width: auto; width: 250px; position: relative;} .historyCon .date{ width: 80px; height: 80px; position: absolute;left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background-color: #12c0ff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px;} .historyCon .timeItem:before{ content: ''; height: 6px; position: absolute; left: 0; right: 120px; top: 50%; transform: translateY(-50%); background-color: #12c0ff;} .historyCon .timeItem:last-child:after{ content: ''; height: 6px; width: 190px; position: absolute; right: -190px; top: 50%; transform: translateY(-50%); background-color: #12c0ff;} .historyCon .event-dot{ width: 120px; height: 120px; position: relative; background-repeat: no-repeat; background-position: center;} .historyCon .timeItem:nth-child(2n+1) .event-dot{background-image: url(../images/history-1.png)} .historyCon .timeItem:nth-child(2n) .event-dot{ background-image: url(../images/history-2.png)} .historyCon .intros{ border-right: 2px solid #12c0ff; position: absolute; text-align: right; padding: 50px 35px 50px 0; right:50%; width: 300px; transform: scale(0);transition: all linear 1s;} .historyCon .timeItem.active .intros{transform: scale(1) translateZ(0); transform-origin: right;} .historyCon .timeItem:first-child .intros{width: 195px;} .historyCon .timeItem:nth-child(2n+1) .intros{ bottom: 100%} .historyCon .timeItem:nth-child(2n) .intros{ top: 100%; } .historyCon .empty{ width: 16px; height: 16px; border-radius: 50%; background-color: #12c0ff; position: absolute; right: -9px;} .historyCon .timeItem:nth-child(2n+1) .empty{ top: -15px;} .historyCon .timeItem:nth-child(2n) .empty{ bottom: -15px;} .historyCon .year{ font-size: 36px; } .historyCon .main dl{ margin-bottom: 5px;} .historyCon .main dl:last-child{ margin-bottom: 0;} .historyCon .main dt{ color: #12c0ff; font-size: 26px;} .historyCon .icon { display: flex; justify-content: flex-end; margin-bottom: 10px; position: relative;} .historyCon .icon img{ width: 80px; height: 80px;} .historyCon .icon:after{ content: ''; display: block; position: absolute; top: 50%; margin-top: -.5px; right: -35px; width: 35px; height: 1px; background-color: #00bff7; } .historyCon .icon:before{ content: ''; display: block; position: absolute; top: 50%; margin-top: -5px; right: -41px; width: 10px; height: 10px; border-radius: 50%; background-color: #00bff7;} .historyCon .navi{ display: block; outline: none; position: absolute; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; background-color: #222; border-radius: 50%; display: block; display: flex; justify-content: center; align-items: center; font-size: 30px;} .historyCon .navi:hover{ background-color: #297cf4; color: #fff;} .historyCon a.prev{ left: -110px;} .historyCon a.next{ right: -110px;} .investorBanner{ background-image: url(../images/investorBanner.jpg);} .investorA-con img{ width: 100%;} .policyCon .text{ overflow: hidden; line-height: 2; height: 0; } .policyCon .text.cur{ height: auto;} .policyCon .text .fontA{ font-size: 26px;} .policyCon .text p{ text-indent: 2em; margin-top: 30px;} .policyCon .text dl{ margin-top: 30px;} .policyCon .text dd{ margin-top: 10px;} .policyWrap { overflow:hidden; height:500px; position:relative; top:0; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s; } .policyWrap:before { content:""; position:absolute; bottom:128px; left:50px; width:1100px; height: 250px; background-color: #1c1f30; } .policyWrap:after { content:""; position:absolute; bottom:0px; left:0; background:url('../images/policy-xf.png'); width:1200px; height: 367px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s; } .policyWrap:hover { height:1000px; top:0; } .policyWrap .text{ background-color: #1c1f30; position:relative; top:0; overflow:hidden; width:1100px; height: auto; margin:0 auto; padding:80px 50px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s; } .newsBanner{ background-image: url(../images/newsBanner.jpg);} .newsBody .indexSer-menu ul{ justify-content: center;} .newsBody .indexSer-menu li{ margin: 0 70px;} .newsList li{ background-color: #fff; border-radius: 10px; padding: 30px; display: flex; margin-top: 30px; position: relative; top: 0;} .newsList li:first-child{ margin-top: 0;} .newsList .pic{ width: 240px; height: 240px; overflow: hidden;} .newsList .pic img{ width: 100%; height: 100%; object-fit: cover; transform: scale3d(1, 1, 1); transition: all 5s cubic-bezier(0.04, 0.79, 1, 1);} .newsList .info{ flex: 1; margin-left: 50px; display: flex; flex-wrap: wrap; align-content: space-between; padding: 20px 0;} .newsList .time{ color: #666;} .newsList .tit{ color: #333; font-size: 26px; width: 100%;} .newsList li:hover{ top: -5px; box-shadow: 0 12px 16px rgba(0,0,0,.5);} .newsList li:hover .pic img{transform: scale3d(1.2, 1.2, 1); transition: all 5s cubic-bezier(0.04, 0.79, 1, 1);} .newsList li:hover .tit{ color: #00bff7;} .newsList .moreBtn:hover{ color: #00bff7;} .newsList .moreBtn:hover i{ background-color: #00bff7; border-color: #00bff7; color: #fff;} .newsDel{ width: 850px;} .newsDel-title .tit{ font-size: 40px; line-height: 1.6;} .newsDel-title .tags{ margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap;} .newsDel-title .tags .box{ margin-right: 20px;} .newsDel-content p{ margin-bottom: 30px;} .newsDel-content a{color: -webkit-link;text-decoration: underline;} .newsDel-content h3{font-size: 1.17em;font-weight: bold;} .newsDel-content strong{font-weight: bold;} .newsDel-content img{ max-width: 100%;height:auto} .newsDel-other { display: flex; justify-content: space-between;} .newsDel-other a{ display: block; width: 350px;} .newsDel-other a:hover,.newsDel-other a:hover span{ color: #00bff7;} .newsDel-other a:last-child{ text-align: right;} .shareList,.shareList ul{ display: flex; align-items: center;} .shareList li a{ position: relative; top: 0; display: block; width: 30px; height: 30px; background-color: #000; color: #1e212a; border-radius: 50%; margin-left: 20px; display: flex; justify-content: center; align-items: center;} .shareList li:nth-child(1) a{ background-color: #0078d7;} .shareList li:nth-child(2) a{ background-color: #5f7f98;} .shareList li a:hover{ top: -5px;} .newsSurplus{ width: 300px;} .newsSurplus .box{ background-color: #1c1f30; padding: 40px 25px; margin-top: 30px;} .newsSurplus .box:first-child{ margin-top: 0;} .newsSurplus h3{ position: relative; font-size: 30px; line-height: 1; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .2);} .newsSurplus h3:after{ content: ''; position: absolute; left: 0; bottom: 0; display: block; width: 60px; height: 3px; background-color: #00bff7;} .newsSurplus-list li{ padding: 30px 0; border-bottom: 1px solid rgba(255, 255, 255, .2);} .newsSurplus-list .info{ display: flex; justify-content: space-between; margin-top: 10px; height: 30px; align-items: center;} .newsSurplus-list .date{ display: block; line-height: 22px; height: 22px; padding: 0 10px; background-color: #282b34; color: #aaa;} .newsSurplus-list .moreBtn{ opacity: 0; transform: translateX(-15px);} .newsSurplus-list li:hover { background-color: #26293b; margin: 0 -25px; padding-left: 25px; padding-right: 25px; border-bottom-color: #26293b;} .newsSurplus-list li:hover .tit{ color: #00bff7;} .newsSurplus-list li:hover .date{ background-color: #00bff7; color: #fff;} .newsSurplus-list li:hover .moreBtn{ opacity: 1; transform: translateX(0);} .joinBanner{ background-image: url(../images/joinBanner.jpg);} .joinList li{ margin-top: 20px; position: relative; overflow: hidden;} .joinList li:first-child{ margin-top: 0;} .joinList .top{ cursor: pointer; position: relative; display: flex; align-items: center; justify-content: space-between; height: 120px; background: url(../images/footerBg.jpg) repeat; padding: 0 30px;} .joinList .top:before{content: ''; display: block; position: absolute; left: 0; top: 0; bottom:0; background-color: #12c0ff; width: 4px; -webkit-transition:all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s;} .joinList .info{ width: 960px; position: relative;} .joinList .tit{ font-size: 26px;} .joinList .tags { display: flex; flex-wrap: wrap;} .joinList .tags span{ display: block; margin-right: 30px;} .joinList .tags span:last-child{ margin-right: 0;} .joinList .moreBtn{ position: relative;} .joinList .con{ background-color: #171a2a; padding: 60px 80px; display: none;} .joinList .con dl{ margin-top: 30px;} .joinList .con dl:first-child{ margin-top: 0;} .joinList .moreBtn:hover{ color: #fff;} .joinList .moreBtn:hover i{ border-color: #fff;} .joinList li:hover .top:before,.joinList li.cur .top:before{ width: 100%; background-color: #2a7ef8;} .joinList li:hover .tags,.joinList li.cur .tags{ color: #fff;} .joinList li:hover .moreBtn i,.joinList li.cur .moreBtn i{ color: #fff; background-color: inherit;} .joinList li.cur .con{ height: auto; } .joinBannerA{ background-image: url(../images/joinBannerA.jpg);} .joinWelfare-con { height: 950px; position: relative;} .joinWelfare-con li{ background-color: #044b64; position: absolute; overflow: hidden; } .joinWelfare-con .bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: .4;} .joinWelfare-con .bg img{ width: 100%; height: 100%; object-fit: cover; transform: scale3d(1, 1, 1); transition: all 5s cubic-bezier(0.04, 0.79, 1, 1);} .joinWelfare-con .text{ padding:30px;} .joinWelfare-con .text dt{ font-size: 26px; position: relative;} .joinWelfare-con .text dt:after{ content: ''; display: block; opacity: 0; transform: translateX(-20%); width: 30px; height: 2px; background-color: #fff; margin: 15px 0; transition: all .3s ease-out 0s;} .joinWelfare-con .text dd{ display: none;} .joinWelfare-con .text dd span{ display: block; padding-left: 15px; position: relative; float: left; min-width: 120px; margin-right: 10px; margin-top: 10px;} .joinWelfare-con .text dd span:before{ content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #fff; position: absolute; left: 0; top: 10px;} .joinWelfare-con li:hover{ background-color: #2a7ef8;} .joinWelfare-con li:hover .bg { opacity: .1;} .joinWelfare-con li:hover .bg img{transform: scale3d(1.2, 1.2, 1); transition: all 5s cubic-bezier(0.04, 0.79, 1, 1); } .joinWelfare-con li:hover dt:after{ opacity: 1; transform: translateX(0); } .joinWelfare-con li:hover dd{ display: block;} .joinWelfare-con li:nth-child(1){ width: 470px; height: 335px; left: 0; top: 0;} .joinWelfare-con li:nth-child(2){ width: 350px; height: 685px; left: 485px; top: 0;} .joinWelfare-con li:nth-child(3){ width: 350px; height: 420px; right: 0; top: 0;} .joinWelfare-con li:nth-child(4){ width: 470px; height: 335px; left: 0; top: 350px;} .joinWelfare-con li:nth-child(5){ width: 835px; height: 250px; left: 0; bottom: 0;} .joinWelfare-con li:nth-child(6){ width: 350px; height: 515px; right: 0; bottom: 0;} .joinGrow .title{ background-color: #1e2131; padding: 60px 45px; text-align: left;} .joinGrow .title p{ color: #aaa;} .joinGrow-con{ min-height: 1200px; padding-bottom: 120px; background-image: url(../images/join-9.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;} .joinGrow-box{ padding: 50px; background-color: #fff; color: #666;} .joinGrow-box .text h5{ font-size: 36px; color: #272a33;} .joinGrow-box .text p{ margin-top: 10px;} .td.joinGrow-box { display: flex; align-items: center;} .td.joinGrow-box .text{ flex: 1; margin-right: 50px;} .td.joinGrow-box .pic{ width: 538px;} .td.joinGrow-box .pic img{ width: 100%;} .tx.joinGrow-box{ background-color: #f5f5f5;} .tx.joinGrow-box .bot{ display: flex; align-items: center;} .tx.joinGrow-box .points{ flex: 1; margin-right: 50px;} .tx.joinGrow-box .points li{ display: flex; margin-top: 35px;} .tx.joinGrow-box .points li:first-child{ margin-top: 0;} .tx.joinGrow-box .points span{ margin-right: 15px; margin-top: 5px; display: block; width: 40px; height: 40px; background-color: #272a33; text-align: center; line-height: 40px; color: #fff; font-size: 26px;} .tx.joinGrow-box .points p{ line-height: 26px; flex: 1;} .tx.joinGrow-box .pic{ width: 613px;} .tx.joinGrow-box .pic img{ width: 100%;} .contactBanner{ background-image: url(../images/contactBanner.jpg);} .contactMap-con{ position: relative; width: 100%; height: 1128px; background: url(../images/contact-map.png) no-repeat center top;} .contactMap-info{ position: absolute; left: 0; bottom: 0; width: 450px; background-color: rgba(28, 31, 48, .85); border-radius: 6px; padding: 40px 30px;} .contactMap-info h2{ position: relative; font-size: 36px; line-height: 1; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, .2);} .contactMap-info h2:after{ content: ''; display: block; width: 50px;height: 2px; background-color: #00bff7; position: absolute; left: 0; bottom: 0;} .contactMap-info .text .pA span{ display: block;} .contactMap-info .text .pA .spanB{ font-size: 30px; color: #00bff7; line-height: 1.4;} .contactMap-info .text .pB{ margin-top: 10px;} .contactMap-points li{ position: absolute; width: 10px; height: 10px; cursor: pointer;} .contactMap-points .point,.contactMap-points .point::before,.contactMap-points .point::after{position: absolute;width: 10px; height: 10px; border-radius: 50%;content: ''; } .contactMap-points .point::before{animation: scale 1s infinite; } .contactMap-points .point::after{animation: scale2 1s infinite; } .contactMap-points .point,.contactMap-points .point::before,.point::after{background-color: #00bff7;} @keyframes scale{0%{ transform: scale(1); opacity:.9}100%{ transform: scale(2); opacity: 0;}} @keyframes scale2{0%{ transform: scale(1);opacity:.9;}100%{ transform: scale(4);opacity:0;}} .contactMap-points .infoBox{ opacity: 0; position: absolute; left: 50%; top: -60px; transform:translateY(-10px) translateX(-50%); white-space: nowrap; background-color: #00bff7; border-radius: 6px; padding: 10px; min-width: 150px;} .contactMap-points .infoBox p{ line-height: 20px; text-align: center;} .contactMap-points .infoBox:after{content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); display: block;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #00bff7;} .contactMap-points li:hover .infoBox{ opacity: 1; transform:translateY(0) translateX(-50%);} .contactList .item{ margin-top: 120px; padding-left: 30px;} .contactList .top{ display: flex; align-items: center;} .contactList .top img{ width: 50px; height: 50px; margin-right: 30px;} .contactList .top h3{ font-size: 30px;} .contactList .con .box{ margin-top: 30px; padding-left: 60px; background-repeat: no-repeat; background-position: 13px 4px;} .contactList .add{ background-image: url(../images/contact-1.png);} .contactList .ser{ background-image: url(../images/contact-2.png);} .contactList .con p{ line-height: 2;} .contactMsg{ height: 999px; background: url(../images/contact-8.jpg) no-repeat center; background-size: cover;} .contactMsg-con{ position: relative; color: #666; width: 880px; background-color: #fff; height: 999px; margin: 0 auto; padding: 60px 140px 0 140px;} .contactMsg-con:before,.contactMsg-con:after{ content: ''; display: block; width: 25px; height: 50px; background-color: #1c1f2f; position: absolute; top: 138px;} .contactMsg-con:before{ left: 0; border-radius: 0 30px 30px 0;} .contactMsg-con:after{ right: 0; border-radius: 30px 0 0 30px;} .contactMsg-con .tit{ position: relative; text-align: center; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px dashed #ddd;} .contactMsg-con .tit h4{ color: #222; font-size: 30px;} .contactMsg-con .tit a{ text-decoration: underline;} .contactMsg-con .tit a:hover{color: #297cf4;} .contactMsg-con .tit:after{ content: ''; display: block; width: 50px; height: 2px; background-color: #00bff7; position: absolute; left: 50%; margin-left: -25px; bottom: -1px;} .contactForm-item .inp{ line-height: 30px; padding: 15px 30px; width: 100%; background-color: #f5f8fd; border: 0;} .contactForm-item textarea.inp{ height: 130px;} .contactForm-item { margin-top: 20px;} .contactForm-item:first-child{ margin-top: 0;} .contactForm-item .btn{ display: block; text-align: center; background-color: #242428; border-radius: 4px; line-height: 60px;} .contactForm-item .btn:hover{ background-color: #297cf4;} .contactForm-item .check .pA{ color: #333; margin-bottom: 5px;} .contactForm-item .check ul{ margin: 0 -10px;} .contactForm-item .check li{ cursor: pointer; float: left; line-height: 34px; padding-left: 20px; position: relative; margin: 0 10px;} .contactForm-item .check li:before{ content: ''; display: block; width: 6px; height: 6px; border: 2px solid #a0adc2; border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -5px;} .contactForm-item .check li:hover{ color: #00bff7;} .contactForm-item .check li.cur:before{ border-color: #00bff7;} /*2024-1-11 资料下载时表单没对齐修复*/ .formBody .lg-formTitle{color: #AAAAAA;} .formBody .lg-formTitle.must{position: relative;} .formBody .lg-formTitle.must::before{position: absolute;left: -10px;content:"*";color:#f00;font-size:14px;top:5px;bottom:0;margin:auto;} .en-contactMap-con{ background: url(../images/en-contact-map.png) no-repeat center top;} .must-text{ color: #f00} .lang_area{ display: block; position: absolute; right: 0px; top: 0px; } .lang_area a { display: inline-block; font-size: 16px; color: #fff; font-family: "PingFangSC-Regular"; opacity: 0.7; cursor: pointer; } .lang_area .s_line { display: inline-block; font-size: 12px; margin: 0px 3px; position: relative; top: -2px; opacity: 0.7; } @-webkit-keyframes layui-upbit { from { -webkit-transform: translate3d(0,15px,0); opacity: .3 } to { -webkit-transform: translate3d(0,0,0); opacity: 1 } } @keyframes layui-upbit { from { transform: translate3d(0,15px,0); opacity: .3 } to { transform: translate3d(0,0,0); opacity: 1 } } @media (max-width: 1600px) { .rightBox .top { padding-bottom: 10px; margin-bottom: 0; position: relative; } #footer .rightBox{ transform: scale(.5); transition: 2s all; top: 40vh; right: -20px; height: 130px; } #footer .rightBox .bot{ transform: scale(0); opacity: 0; transition: 1s all; } #footer .rightBox:hover{ transform: scale(.9); transition: 1s all; top: 17vh; right: 10px; /*height: auto;*/ } #footer .rightBox:hover .bot{ transform: scale(1); opacity: 1; transition: 0s all; } .rightBox .top>.text{ font-size: 25px; } .rightBox:hover .top>.text{ font-size: 16px; } .rightBox .top:hover .box{ transition: 0s all; } } @media (max-width: 1400px){ .historyCon a.prev{ left: 10px;} .historyCon a.next{ right: 10px;} .historyCon .timeList{transform: scale(.8);} } .bodyWrap .w-1200 .aboutC .aboutC-top .shadowB{ box-shadow: 0 0px 0px rgba(0,0,0,.2) !important; }