锘縝ody,html { max-width:100%; min-height:100%; overflow-x:hidden; } *,.none-padding { padding:0 } .clearfix:after,.icon:before { content:'' } .iframeWrap,img { border:none } * { margin:0 } html { height:100% } body { font-size:12px; font-family:'寰蒋闆呴粦','Microsoft Yahei',arial,sans-serif } .clearfix { zoom:1 } .clearfix:after { display:block; visibility:hidden; height:0; font-size:0; clear:both } em,i { font-style:normal } a,a:hover { text-decoration:none } h1,h2,h3,h4,h5,h6 { font-weight:500 } .drag-handle { cursor:move } .fl { float:left } .fr { float:right } .ml10 { margin-left:10px } .mr20 { margin-right:20px } .dfr { display:flex; flex-wrap:wrap } input,textarea { outline:0 } .fa { color:#d4d4d4 } .redFont { color:red } li,ul { list-style:none } .hide { display:none } .browsehappy,.show { display:block } .substr { text-overflow:ellipsis; overflow:hidden; white-space:nowrap } .text-right { text-align:right } .loading-spinner,.text-center { text-align:center } .h440 { height:440px } .titile-tip { font-size:14px; color:#959595; margin-top:10px } .browsehappy { height:100%; width:100%; position:fixed; left:0; top:0; z-index:99; background:#fff } .browsehappy center { margin-top:20% } .loading-wrap { display:none; transition:all .5s ease 0s; height:50px; margin-top:20px; position:relative } .loading-spinner { top:50%; left:0; margin:-25px 0 0; width:100%; height:50px; position:absolute } .loading-spinner .circular { width:42px; height:42px; animation:loading-rotate 2s linear infinite } .loading-spinner .path { animation:loading-dash 1.5s ease-in-out infinite; stroke-dasharray:90,150; stroke-dashoffset:0; stroke-width:2; stroke:#095098; stroke-linecap:round } @keyframes loading-rotate { 100% { transform:rotate(360deg) } }@keyframes loading-dash { 0% { stroke-dasharray:1,200; stroke-dashoffset:0 } 50% { stroke-dasharray:90,150; stroke-dashoffset:-40px } 100% { stroke-dasharray:90,150; stroke-dashoffset:-120px } }.iframeBox { width:796px; height:560px; margin:0 auto } .iframeWrap { width:100%; height:100%; overflow:hidden; display:none } .icon { width:25px; height:25px; display:inline-block } .icon.m2x { width:50px; height:50px } .icon.m3x { width:100px; height:100px } .icon:before { background:url(../images/icon.png) left top no-repeat; background-size:250px 250px; display:block; width:100%; height:100% } .icon.m2x:before { background-size:500px 500px } .icon.m3x:before { background-size:1000px 1000px } .icon.icon-email:before { background-position:0 0 } .icon.icon-map:before { background-position:-25px 0 } .icon.icon-map2:before { background-position:-25px -48px } .icon.icon-contact:before { background-position:-100px 0 } .icon.icon-star:before { background-position:-50px 0 } .icon.icon-declare:before { background-position:-125px 0 } .icon.icon-close:before { background-position:-75px 2px } .icon.icon-tel:before { background-position:-125px -75px } .icon.icon-sina:before { background-position:-75px -48px } .icon.icon-wechat:before { background-position:-100px -48px } .icon.icon-download:before { background-position:-200px -48px } .icon.icon-local:before { background-position:-100px -75px } .icon.icon-build:before { background-position:-50px -50px } .icon.icon-arrow-down:before { background-position:-25px -75px } .icon.m2x.icon-close:before,.icon.m2x.icon-mobile-close:before { background-position:-150px -50px } .icon.m2x.icon-video:before { background-position:-250px -100px } .icon.m2x.icon-pdf:before { background-position:-300px -100px } .icon.m2x.icon-ppt:before { background-position:-300px -150px } .icon.m2x.icon-img:before { background-position:-350px -100px } .icon.m2x.icon-logo:before { background-position:-110px -151px } .icon.m3x.icon-feature1:before { background-position:-900px -100px } .icon.m3x.icon-feature2:before { background-position:-600px 0 } .icon.m3x.icon-feature3:before { background-position:-700px 0 } .icon.m3x.icon-feature4:before { background-position:-800px 0 } .icon.m3x.icon-feature5:before { background-position:-900px 0 } .icon.m3x.icon-feature6:before { background-position:0 -200px } .icon.m3x.icon-feature7:before { background-position:0 -300px } .icon.m2x.icon-logo:hover:before { background-position:-160px -151px } .tool-warp { background:#f4f9f9; position:relative; display:none; margin-top:75px; } .tool-warp .close { position:absolute; right:20px; top:50px; z-index:2 } .tool-warp .tool-box { margin:0; background:url(../images/1.jpg) center center no-repeat; background-size:cover } .tool-warp .tool-box li { width:786px; margin:0 auto; color:#535353; display:none; padding:20px 0; position:relative } .tool-warp .tool-box li a { color:#535353; } .tool-warp .tool-box li:nth-child(1) { overflow:hidden } .tool-warp .tool-box li:nth-child(3) { width:500px } .tool-warp .tool-box h3.title { font-size:24px; margin-bottom:20px } .backup-domain { display:block; margin-left:82px } .tool-warp .tool-box li iframe { background:0 0; position:relative; z-index:2 } .tool-warp .tool-box li .loading-wrap { display:block; position:absolute; top:50%; left:0; z-index:1; width:100%; transform:translateY(-50%) } .tool-warp .tool-box li .declareBox { line-height:32px; font-size:16px; text-align:justify } .tool-warp .tool-box li .declareBox p { margin-top:10px } .tool-warp .tool-box li .declareBox p.text-right { text-align:right } .tool-warp .tool-box .notice { font-size:12px; margin-bottom:20px; color:#757575 } .tool-warp .tool-box .inp-wrap { width:250px; display:inline-block; margin-left:80px; position:relative } .tool-warp .tool-box .inp-wrap:first-child { margin-left:0 } .tool-warp .tool-box .inp-wrap b { width:0; height:2px; position:absolute; bottom:0; left:0; background:#038d8d; display:block; transition:all .7s ease 0s } .tool-warp .tool-box .inp:focus+b { width:100%; transition:all .7s ease 0s } .tool-warp .tool-box .inp { border:none; border-bottom:1px solid #999; background:0 0; width:100%; height:36px; line-height:36px; padding:0 5px; color:#fff; box-sizing:border-box } input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color:#757575 } input:-moz-placeholder,textarea:-moz-placeholder { color:#757575 } input::-moz-placeholder,textarea::-moz-placeholder { color:#757575 } input:-ms-input-placeholder,textarea:-ms-input-placeholder { color:#757575 } .tool-warp .tool-box .textarea-wrap { position:relative; overflow:hidden; margin-top:20px; width:580px; height:100% } .tool-warp .tool-box textarea { width:100%; resize:none; border:1px solid #999; background:#fff; padding:5px; height:100%; color:#fff; float:left; box-sizing:border-box } .tool-warp .tool-box .textarea-wrap b,.tool-warp .tool-box .textarea-wrap i,.tool-warp .tool-box .textarea-wrap s,.tool-warp .tool-box .textarea-wrap span { position:absolute; background:#038d8d; z-index:1; transition:all .7s ease 0s } .tool-warp .tool-box .textarea-wrap b { left:0; top:0; width:0; height:2px } .tool-warp .tool-box .textarea-wrap.active b { width:100% } .tool-warp .tool-box .textarea-wrap i { right:0; top:0; height:0; width:2px } .tool-warp .tool-box .textarea-wrap.active i { height:100% } .tool-warp .tool-box .textarea-wrap s { right:0; bottom:0; width:0%; height:2px } .tool-warp .tool-box .textarea-wrap.active s { width:100% } .tool-warp .tool-box .textarea-wrap span { left:0; bottom:0; height:0; width:2px } .tool-warp .tool-box .textarea-wrap.active span { height:100% } .tool-warp .tool-box .sub-wrap { margin-top:20px } .tool-warp .tool-box .tip { margin-top:10px; height:20px; line-height:20px; color:#e00; display:none } .tool-warp .tool-box .tip.success { color:#01aa4d } .tool-warp .tool-box .sub { height:34px; line-height:34px; background:#095098; border:none; color:#fff; width:100px; text-align:center; margin-right:20px } .tool-warp .tool-box .sub.reset { background:#aaa; color:#fff } .tool-warp .tool-box .company-info .column { width:44%; float:left; margin-right:6% } .tool-warp .tool-box .company-info .column h4 { font-size:14px; margin-bottom:15px; padding-bottom:20px; border-bottom:1px solid #999 } .tool-warp .tool-box .company-info .column .item { line-height:30px; display:flex } .tool-warp .tool-box .company-info .column .item i { align-items:center; margin-right:10px } .tool-warp .tool-box .company-info .column .item .c-info { flex:1 } .wechat img { float:left; margin-right:20px } .wechat div { margin-top:5px; float:left; font-size:14px } .wechat div p { margin-bottom:10px } .main { position:relative; min-height:100vh } .header { position:fixed; top:0; left:0; width:100%; z-index:5; background:#fff; box-shadow:2px 0 8px #aaa; box-sizing:border-box; display:flex; justify-content:center } .header .menu-wrap { margin-top:0px; height:70px; line-height:70px; display:flex; flex-wrap:wrap; align-items:center; width:1300px; justify-content:space-between } .header .logo,.header .logo i { height:100%; width:200px } .header .logo { display:flex; align-items:center } .header .menu-icon { width:20px; height:18px; position:relative; cursor:pointer; display:none } .header .companyName { font-size:18px; color:#fff; display:none; line-height:100% } .menu-wrap .menu-icon i,.menu-wrap .menu-icon::after,.menu-wrap .menu-icon::before { position:absolute; left:0; width:100%; height:2px; background:#095098; content:""; border-radius:1px } .menu-wrap .menu-icon::before { top:0 } .menu-wrap .menu-icon i { top:50%; margin-top:-1px } .menu-wrap .menu-icon::after { bottom:0 } .header .menu { display:flex; flex-wrap:wrap; justify-content:space-between } .header .menu li a,.header .menu li a::after { display:block; transition:all .3s ease 0s; height:100% } .header .menu li { margin-right:1px; position:relative } .header .menu li a { color:#333; font-size:16px; font-weight:500; padding:0 25px; position:relative; overflow:hidden } .header .menu li.active a,.header .menu li:hover a { color:#fff; transition:all .3s ease 0s } .header .menu li a::after { content:""; width:100%; position:absolute; top:-100%; left:0; background:#095098; z-index:-1 } .header .menu li.active a::after,.header .menu li:hover a::after { top:0; transition:all .3s ease 0s } .tool-nav-icon { display:flex; flex-wrap:wrap; transition:all .7s ease 0s; margin-left:0px } .tool-nav-icon li { padding:0 15px; cursor:pointer; height:100%; display:flex; align-items:center } .submenu li,.submenu li .first-child,.submenuBox,.submenuBox .footer-nav,.submenuBox .tool-nav-icon { display:none } .tool-nav-icon li:last-child { padding-right:0 } .tool-nav-icon li.active .icon.icon-email:before,.tool-nav-icon li:hover .icon.icon-email:before { background-position:0 -25px; transition:all .3s ease 0s } .tool-nav-icon li.active .icon.icon-map:before,.tool-nav-icon li:hover .icon.icon-map:before { background-position:-25px -25px; transition:all .3s ease 0s } .tool-nav-icon li.active .icon.icon-star:before,.tool-nav-icon li:hover .icon.icon-star:before { background-position:-50px -25px; transition:all .3s ease 0s } .tool-nav-icon li.active .icon.icon-declare:before,.tool-nav-icon li:hover .icon.icon-declare:before { background-position:-125px -25px; transition:all .3s ease 0s } .tool-nav-icon li.active .icon.icon-contact:before,.tool-nav-icon li:hover .icon.icon-contact:before { background-position:-100px -25px; transition:all .3s ease 0s } .header .mobile-close { display:none; position:fixed; right:10px; top:10px; z-index:10 } .submenuBox { position:absolute; left:0; top:50px; z-index:6; width:100%; background:rgba(0,0,0,.7) } .submenu-box { padding:0px 0; display:flex; flex-wrap:wrap; justify-content:center; height:60px; line-height:60px; } .submenu-box a { display:block; margin:0 25px; position:relative } .submenu li a img { width:250px } .submenu li a.active img,.submenu li a:hover img { opacity:1 } .submenu-box a span { display:block; color:#fff; font-size:14px; text-align:center } body.onePage { height:100vh; overflow:hidden; background:#fff } body.onePage .header { background:0 0; box-shadow:none; border-bottom:1px solid rgba(255,255,255,.1) } body.onePage .header.fix { box-shadow:0 0 8px #aaa; border-bottom:none } body.onePage .header.fix .menu li a { color:#333 } body.onePage .header .menu li a { color:#fff } body.onePage .footer { position:absolute; left:0; z-index:1; bottom:0; width:100%; box-sizing:border-box; background:rgba(0,0,0,.1); color:#fff } body.onePage .footer a { color:#fff } body.onePage .index-bg { width:100vw; height:100vh; position:absolute; left:0; top:0; z-index:-1 } body.onePage .index-bg img,body.onePage .index-bg video { width:100vw; height:100vh; object-fit:cover } .entranceBox { width:100vw; height:100vh; position:absolute; left:0; top:0; z-index:1; background:rgba(0,0,0,.2) } .entranceBox .entrance { width:100%; position:absolute; top:50%; z-index:1; text-align:center; transform:translateY(-50%); color:#fff } .entranceBox .entrance h2 { font-size:40px; letter-spacing:20px; color:#fff } .entranceBox .entrance .line { height:2px; background:#13E2E5; width:200px; display:block; margin:4vh auto; border:none } .entranceBox .entrance h4 { font-size:18px; letter-spacing:15px; color:#eee } .entrance-module { display:flex; flex-wrap:wrap; justify-content:space-around; margin:15vh auto 0; max-width:1200px } .entrance-module li { width:33.33% } .entrance-module li .iconWrap { width:80px; height:80px; border:1px solid rgba(255,255,255,.6); border-radius:100%; display:flex; justify-content:center; align-items:center; margin:auto } .entrance-module li .iconWrap:hover { border-color:#09aeb0; background:#09aeb0; transition:all .3s ease 0s } .entrance-module li .iconWrap svg { width:35px; height:35px } .entrance-module li .iconWrap path { transition:all .3s ease 0s; opacity:.6 } .entrance-module li .iconWrap:hover path { fill:#fff; opacity:1; transition:all .3s ease 0s } .entrance-module li .title { font-size:18px; line-height:24px; margin:25px 0; color:#fff; letter-spacing:10px } .entrance-module li .description { font-size:14px; line-height:24px; color:#eee; padding:0 30px; letter-spacing:3px; text-align:left } .slide-module { width:100%; position:relative } .slide-module .slide-bg { position:absolute; left:0; top:0; width:100%; height:100%; z-index:1 } .slide-module .title-box { width:600px; position:absolute; bottom:15%; left:50%; z-index:2; margin:0 0 0 -300px; color:#fff; display:none } .slide-module .nav { position:absolute; top:50%; left:20px; z-index:3; transform:translateY(-50%) } .slide-module .nav span { padding:5px; display:block; border:2px solid #fff; margin-bottom:20px; border-radius:100% } .slide-module .nav span.active { background:#fff } .slide-module .title-box .logo { position:absolute; left:50%; top:0; margin-left:-25px } .slide-module .title-box .slogan { width:40%; font-size:14px; letter-spacing:20px; border-bottom:2px solid #fff; padding-bottom:5px; padding-left:20px } .slide-module .title-box .wish { font-size:16px; padding-left:20px; letter-spacing:20px; padding-top:30px; display:block } .slide-module .slide-box { width:100% } .submenu-box2 { position:relative; width:1300px; margin:0 auto; text-align:center; height:60px; line-height:60px; } .submenu-box2 a { display:inline-block; margin:0; margin:0 40px 0 40px; color:#333; font-size:16px; } .submenu-box2 a:first-child { border-left:none } .submenu-box2 a span { font-size:16px } .submenu-box2 a.active{ border-bottom:2px solid #095098; color:#095098!important; } .submenu-box a.active span { color:#095098; } .arrow-icon { font-size:12px; display:block; color:#fff; text-align:center; cursor:pointer; width:50px; height:50px; border-radius:100%; position:absolute; bottom:50px; left:50%; z-index:3; transform:translateX(-50%); border:1px solid #fff } .arrow-icon i { animation:sdb 1.5s infinite } .arrow-icon:hover { border-color:#09aeb0; background:#09aeb0 } @keyframes sdb { 0% { transform:translate(0,0); opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" } 50% { opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" } 100% { transform:translate(0,20px); opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" } }.slide-module .slide-box ul { width:100%; transition:all .7s ease 0s } .slide-module ul li { float:left; display:none; width:100%; position:relative } .slide-module ul li.active { display:block } .slide-project .slide-box { width:100%; height:100%; overflow:hidden } .slide-project ul { display:flex; flex-wrap:wrap; height:100% } .slide-project ul li { width:100%; height:100%; display:block; background-size:cover; background-position:center; background-repeat:no-repeat } .loading-icon { position:absolute; left:50%; top:50%; z-index:-2; width:40px; height:40px; margin:-20px 0 0 -20px; animation:loading 2s linear infinite } @keyframes loading { 0% { transform:rotate(0) } 100% { transform:rotate(360deg) } }.slide-module ul li video,.slide-module ul li>img { width:100%; object-fit:cover; float:left } .slide-module ul li .text { position:absolute; top:50%; left:0; z-index:3; font-size:18px; width:100%; color:#eaeaea; line-height:30px; text-align:center; transform:translateY(-50%); padding:0 30px; box-sizing:border-box } .slide-module ul li .text h4 { font-size:50px; line-height:70px; margin-bottom:20px; color:#fff; letter-spacing:20px; height:auto } .slide-module ul li .text span { margin-top:50px; display:block } .slide-module .navigation { position:absolute; bottom:0; left:50%; z-index:5; transform:translate(-50%); display:flex; flex-wrap:wrap; width:100%; justify-content:center } .slide-module .navigation .arrowBox { background:#fff } .slide-module .navigation .arrow { height:60px; width:100px; margin-top:20px; display:inline-block; position:relative } .slide-module .navigation .arrow.right { border-left:1px solid #ccc } .slide-module .navigation .arrow::after,.slide-module .navigation .arrow::before { content:""; width:20px; height:20px; border-top:2px solid #ccc; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-135deg) } .slide-module .navigation .arrow.right::after,.slide-module .navigation .arrow.right::before { transform:translate(-50%,-50%) rotate(45deg) } .slide-module .navigation .arrow::after { border-right:2px solid #ccc; border-top:none } .slide-module .navigation .arrow:hover::after,.slide-module .navigation .arrow:hover::before { border-color:#01a9aa } .container1 { width:1300px; margin:0 auto; } .introduce { display:flex; flex-wrap:wrap; padding-top:50px } .introduce li { width:31%; margin-left:3.5%; background:#f5f5f5 } .introduce li:first-child { margin-left:0 } .introduce li a { display:block } .introduce li a img { width:100%; height:auto; transition:all .5s ease 0s } .introduce li a:hover img { transform:scale(1.1); transition:all .5s ease 0s } .introduce li .img-box { width:100%; overflow:hidden; position:relative } .introduce li .title { font-size:20px; color:#444; display:block; text-align:center; letter-spacing:10px; padding:15px 0 10px } .introduce li p { padding:5px 20px 20px; font-size:16px; text-align:justify; color:#959595 } .module { padding-top:80px; padding-bottom:40px } .module .title { font-size:32px; color:#095098; text-align:center; margin-bottom:30px } .module .info { font-size:14px; width:700px; margin:0 auto; color:#666; line-height:28px } .six-feature .feature { display:flex; flex-wrap:wrap } .six-feature .feature li { width:33.33%; padding:0 25px; box-sizing:border-box; display:flex; margin-top:100px } .six-feature .feature li .circle-icon { width:120px; height:120px; border-radius:100%; background:linear-gradient(#31cecf 0,#02aaab 100%); display:flex; align-items:center } .unfold::after,.unfold::before { content:''; background:#999 } .six-feature .feature li .circle-icon i { margin:0 auto } .six-feature .feature li .info { padding-left:20px; flex:1; color:#666; font-size:14px; box-sizing:border-box; text-align:justify } .six-feature .feature li .info .icon-title { color:#444; display:block; font-size:24px; margin:10px 0 } .advantage-list { padding:0 170px } .advantage-list li { margin-top:100px } .advantage-list li .text { padding-right:50px; box-sizing:border-box; width:50%; float:left } .advantage-list li .advantage-img { width:50%; float:right } .advantage-list li .advantage-img img { width:100% } .advantage-list li .text h3 { color:#095098; font-size:24px; margin:20px 0 } .advantage-list li .text p { margin-left:40px; font-size:16px; line-height:32px; color:#666; margin-bottom:50px } .advantage-list li:nth-child(2n) .text { float:right; padding:0 0 0 50px } .advantage-list li:nth-child(2n) .advantage-img { float:left } .module .line { border:none; border-top:1px solid #eee } .products-explain li { padding:30px 20px; position:relative; border-bottom:1px solid #ddd } .products-explain li .unfold { right:20px; top:30px } .unfold { position:absolute; width:24px; height:24px; display:block; cursor:pointer } .unfold::before { width:14px; height:1px; position:absolute; top:50%; left:5px } .unfold::after { width:1px; height:14px; position:absolute; left:50%; top:5px } .products-explain li .unfold.active::after { display:none } .products-explain li h3 { font-size:16px; color:#444 } .products-explain li .explain-text { display:none; column-gap:40px; column-count:2; margin-top:20px } .products-explain li .explain-text.no-columns { column-count:1 } .products-explain li p { color:#959595; margin-bottom:30px; font-size:14px; line-height:28px } .products-explain li .explain-text td { height:24px; line-height:24px; padding-left:10px } .province { display:flex; width:100%; font-size:18px; line-height:32px; padding:20px 0; border-bottom:1px solid #eee; position:relative } .province_fix { position:fixed; left:0; top:50px; z-index:5; background:#fff; width:100% } .project-list li,.project-list li .wrap { position:relative; box-sizing:border-box } .province .unfold { right:0; bottom:24px; display:none } .province .area { width:60px } .province .province-list { display:flex; flex-wrap:wrap; flex:1; padding-right:20px; height:26px; overflow:hidden } .province .province-list.active { height:auto; overflow:visible } .province .province-list li { margin-right:24px; font-size:18px } .province .province-list li a { color:#959595 } .province .province-list li a.active,.province .province-list li a:hover { color:#095098 } .project-list { display:flex; flex-wrap:wrap; padding:20px 0 } .project-list li { width:31%; border-radius:5px; margin:20px 1%; font-size:16px; height:300px; color:#fff; overflow:hidden; background:#FFF; box-shadow:2px 2px 14px rgba(0,0,0,.4) } .project-list li.project1 { background:#F54337 } .project-list li.project2 { background:#E82617 } .project-list li.project3 { background:#FF7C7D } .project-list li.project4 { background:#ffc900 } .project-list li.project5 { background:#0079DD } .project-list li.project6 { background:#5dc800 } .project-list li.project7 { background:#4ce8de } .project-list li.project8 { background:#fff; } .project-list li.project9 { background:#9E373B } .project-list li.project10 { background:#FF7C4F } .project-list li.project11 { background:#EDEBE7 } .project-list li .wrap { display:block; justify-content:center; align-items:center; height:100%; width:100%; z-index:2; padding:20px; padding-top:260px; } .project-list li h4 { text-align:center; font-size:20px; margin-bottom:10px; color:#333; } .project-list li .imgwrap { position:absolute; width:100%; height:100%; z-index:0; left:0; top:0 } .project-list li .imgwrap::after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; transition:all .5s ease 0s } .project-list li .imgwrap img { object-fit:cover; width:100%; height:250px; } .project-list li .info { padding:0 25px; width:100%; position:absolute; left:0; top:60px; z-index:2; box-sizing:border-box; display:block; transition:all .5s ease 0s; text-align:left; padding-left:30px; line-height:30px; display:none; color:#fff; } .project-list li:hover .info { top:60px; transition:all .5s ease 0s; display:block; } .project-list li:hover .imgwrap::after { background:rgba(0,0,0,.6); } .project-list li .info>span { margin:0 5px } .project-list li .info>span:first-child { display:none } .page { margin:40px 0; display:flex; justify-content:center } .page a,.page span { display:inline-block; height:40px; line-height:40px; width:40px; text-align:center; margin:0 10px; border:1px solid #959595; color:#959595; font-size:14px } .page a.active { background:#0cc; border-color:#0cc; cursor:default; color:#fff } .container2 { width:1200px; margin:60px auto 20px } .group-title { text-align:center; font-size:24px; color:#444 } .group-module>.title { padding-left:20px; height:24px; line-height:24px; font-size:18px; color:#555; position:relative; margin:80px 0 20px } .eng { font-size:14px; color:#777 } .group-module>.title::before { content:""; height:24px; width:12px; background:#01a9aa; position:absolute; top:0; left:0 } .group-module .group-intro { display:flex; flex-wrap:wrap } .group-module .group-intro .left { color:#777; font-size:14px; text-align:justify; width:65%; padding-right:10%; box-sizing:border-box } .group-module .group-intro .left p { margin-bottom:20px } .group-module .group-intro .right { width:35% } .group-module .group-intro .right img { width:100%; height:auto } .group-cultur { display:flex; flex-wrap:wrap } .group-cultur li { width:280px; margin-left:26px; position:relative } .group-cultur li:first-child { margin-left:0 } .group-cultur li img { width:100%; height:auto; float:left } .group-cultur li .cultur-title { text-align:justify; width:100%; position:absolute; bottom:0; left:0; line-height:24px; padding:8px 20px; font-size:14px; color:#fff; box-sizing:border-box } .group-cultur li:nth-child(1) .cultur-title { background:rgba(92,208,210,.6) } .group-cultur li:nth-child(2) .cultur-title { background:rgba(209,73,52,.6) } .group-cultur li:nth-child(3) .cultur-title { background:rgba(89,127,211,.6) } .group-cultur li:nth-child(4) .cultur-title { background:rgba(47,184,223,.6) } .contact-our { padding:20px 15px; color:#959595; font-size:14px } .line { border:none; border-top:1px solid #eee } .contact-our .company-name { padding-top:30px; height:30px; line-height:30px } .contact-our .company-name .share-link { margin-left:10px; position:relative; top:3px } .contact-our .company-info { display:flex; flex-wrap:wrap; margin-top:10px } .contact-our .company-info li { width:33.33%; line-height:36px } #company-map { height:400px; width:100%; margin-top:30px } .headline { text-align:center; font-size:24px; color:#555; padding:45px 0 0 } .headline .eng { margin-bottom:30px } .database-list { display:flex; flex-wrap:wrap; padding:20px 0 } .database-list li { width:23%; box-sizing:border-box; border:1px solid #ddd; padding:20px; margin:40px 1% 0; display:flex; flex-wrap:wrap } .database-list li .iconWrap { width:80px; height:70px; background-color:#bbb; border-radius:10px; display:flex; align-items:center; justify-content:center } .database-list li .info { margin-left:14px; flex:1 } .database-list li .name { font-size:16px; line-height:20px; height:40px; overflow:hidden; display:block } .database-list li .info .other { font-size:12px; color:#959595; display:block; height:30px; line-height:30px } .database-list li:hover { border-color:#095098 } .database-list li:hover .iconWrap { background:#095098 } .database-list li:hover .info .other,.database-list li:hover .name { color:#095098 } .database-list li:hover .icon.icon-download:before { background-position:-225px -48px } .courseWrap { position:relative } .courseWrap .arrow { position:absolute; top:0; height:100px; width:20px } .courseWrap .arrow:hover { background:rgba(0,0,0,.2) } .courseWrap .arrow::after { position:absolute; top:30px; border:10px solid transparent; height:0; width:0; content:''; transform:translateX(-50%) } .client-list li span img,.popup .content { transform:translate(-50%,-50%); left:50%; top:50% } .courseWrap .arrow.left { left:100px } .courseWrap .arrow.right { right:100px } .courseWrap .arrow.left::after { border-right-color:#46d0d3; left:5px } .courseWrap .arrow.right::after { border-left-color:#46d0d3; right:-15px } .courseWrap .timeline { height:2px; width:100%; background:#46d0d3; position:absolute; top:38px; left:0 } .courseWrap .course-list { margin:0 180px; overflow:hidden; position:relative } .courseWrap .course-list .scroller { position:relative; height:257px } .courseWrap .course-list ul { width:8000px; position:absolute; left:0; top:0 } .courseWrap .course-list ul li { height:auto; color:#555; font-size:14px; padding-right:120px; float:left; position:relative; text-align:center } .courseWrap .course-list ul li time { height:20px; line-height:20px } .courseWrap .course-list ul li .point { width:20px; height:20px; background:rgba(43,217,208,.3); display:flex; justify-content:center; align-items:center; border-radius:100%; margin:9px auto 0 } .courseWrap .course-list ul li .point::after { content:""; height:12px; width:12px; background:#46d0d3; display:block; border-radius:100% } .courseWrap .course-list ul li .vertical-line { width:1px; height:10px; margin:6px auto; background:#777; display:block } .courseWrap .course-list ul li .info { max-height:174px; writing-mode:vertical-lr; display:inline-block; text-align:left } .catalogue,.catalogue div,.popup .content { text-align:center } .patent-list li { display:block; padding:0; border:none } .patent-list img { width:100%; height:auto; border:1px solid #ddd } .patent-list li:hover img { border-color:#095098 } .patent-list li .patent-name { font-size:16px; margin-top:5px; display:block } .popup { position:fixed; display:none; left:0; top:0; z-index:10; width:100%; height:100%; background:rgba(0,0,0,.8) } .popup .close { position:absolute; right:0; top:-50px } .popup .content { position:absolute; width:100%; max-width:960px } .popup .content video { width:100%; height:100%; display:none } .popup .content img { max-height:100%; max-width:100%; display:none } .catalogue h4 { width:200px; margin:0 auto 20px; padding-bottom:20px; border-bottom:1px solid #ddd } .catalogue div { font-size:16px } .catalogue div a { margin:0 10px; color:#777 } .privacy-content { color:#777; max-width:700px; margin:0 auto; font-size:16px; text-align:justify } .privacy-content .title { padding:20px 0; font-size:18px; color:#444 } .privacy-content .text { margin-bottom:40px } .privacy-content .text .column { padding-bottom:40px } .privacy-content .text .column h4 { padding-bottom:10px } .privacy-content .text .column .item { display:flex; flex-wrap:wrap; align-items:center } .client-title { font-size:24px; line-height:36px; color:#5cd0d2; text-align:center; margin-top:20px } .client-title.bold { color:#444 } .client-description { color:#959595; font-size:16px; width:800px; margin:20px auto 0; text-align:left } .ideal { padding:0 100px; display:flex; flex-wrap:wrap } .ideal li { width:33.33%; align-items:center; justify-content:center; padding:40px; box-sizing:border-box } .ideal li span { font-size:28px; color:#5cd0d2; display:block; text-align:center; letter-spacing:20px; margin:20px 0 } .ideal li .intro { font-size:16px; color:#959595; text-align:justify } .client-list-wrap { position:relative; margin-bottom:50px } .client-list { margin:0 100px } .client-list li { display:none; flex-wrap:wrap } .client-list li.active { display:flex } .client-list li div { width:16.66%; padding:20px 0 } .client-list li span { width:130px; height:130px; border:1px solid #eee; overflow:hidden; border-radius:100%; position:relative; margin:0 auto; display:block; box-shadow:0 0 10px #eee } .client-list li span:hover { border-color:#0cc; box-shadow:0 0 6px #0cc } .client-list li span img { position:absolute; width:100% } .client-list-wrap .arrow { height:60px; width:60px; position:absolute; top:50%; left:20px; transform:translateY(-50%); cursor:pointer; display:none } .client-list-wrap .arrow::after,.client-list-wrap .arrow::before { width:60px; height:2px; background:#959595; content:""; display:block } .client-list-wrap .arrow.right { right:20px; left:auto; transform:translateY(-50%) rotate(180deg) } .client-list-wrap .arrow::before { transform:rotate(-45deg) } .client-list-wrap .arrow::after { transform:rotate(45deg); margin-top:39px } .client-list-wrap .arrow:hover::after,.client-list-wrap .arrow:hover::before { background:#0cc } .zizhi-list { display:flex; flex-wrap:wrap; justify-content:space-between } .zizhi-list .item { padding:20px 0; box-sizing:border-box } .zizhi-list .item:first-child { margin-left:0 } .zizhi-list img { border:6px solid #80D2D1; height:350px; box-sizing:border-box; width:auto } .zizhi-list span { display:block; font-size:16px; padding:5px 0; line-height:26px } .zizhi-list.zhizhi2 img { height:230px; border:none } .blogframe { width:100%; height:800px; padding-top:50px; background:#2a2a2a }