/*@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,500);*/ /*焦点大图*/ #hero-banner{ position: relative; overflow: hidden; height:840px; background: rgba(2,180,197,1.0) url(../images/banner/banner-bg.jpg) no-repeat center bottom; background-size: cover; } #hero-banner .banner-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #hero-banner .banner-inner .container{ position: relative; overflow: visible; } #hero-banner .banner-inner .banner-tex{ position: absolute; left: 0; top: 0; z-index: 1; display: inline-block; width: 40%; height: auto; padding:30px; margin: 0; } #hero-banner .banner-inner .banner-tex h2 { font-size:56px; line-height:72px; background: linear-gradient(to right bottom, #fae364, #8fffee); -webkit-background-clip: text; color: transparent; margin: 100px 0 10px 0; } #hero-banner .banner-inner .banner-tex p { margin:10px 0; font-size:18px; line-height:36px; color: #fff; } #hero-banner .banner-inner .banner-tex a.btn { display: inline-block; border-radius:5px; font-size: 14px; text-decoration: none; transition: all 0.5s ease; border:1px solid rgba(255,255,255,1.0); background:rgba(5,112,141,0); color:rgba(255,255,255,1.0); opacity: 1.0; /* padding: 8px 30px; */padding: 0; margin: 10px; width:120px; height: 36px; line-height: 36px; text-align: center; } #hero-banner .banner-inner .banner-tex a.btn:hover, #hero-banner .banner-inner .banner-tex a.btn:focus{ opacity: 0.8; } #hero-banner .banner-inner .banner-tex a.btn:first-of-type{ color:rgba(5,112,141,1.0); background:rgba(255,255,255,1.0); } #hero-banner .banner-inner .banner-pic{ position: absolute; right: 0; top: 0; z-index: 0; display: inline-block; width:auto; height: auto; padding: 0; margin: 0; text-align: right; } #hero-banner .banner-inner .banner-pic img.pic{ margin: 100px 0 0 0; } /* 通用板块外框*/ .sec_bg{ position: relative; display:inline-block; clear:both; width:100%; height:auto; text-align:center; padding:0; margin:0 auto;} /* 通用板块标题*/ .section-header { display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:20px auto; text-align:center; overflow:hidden; } .section-header h2.section-title { position: relative; display:inline-block; clear:both; width:100%; height:auto; padding:10px; margin:0 auto; text-align:center; overflow:hidden; box-sizing: border-box; } .section-header h2.section-title:before { position: absolute; content: ""; width: 70px; bottom: 0; left: 50%; margin-left: -35px; height: 4px; background: rgba(2,180,197,1.0);} .section-header h2.section-title span{ display:inline-block; clear:both; width: 100%; height:auto; line-height:100%; padding:5px; margin:0 auto; text-align:center; overflow:hidden; font-size:36px; color: rgba(0,0,0,1.0); text-transform: uppercase; font-weight:normal; font-family:Microsoft Yahei, Arial, sans-serif; box-sizing: border-box; } .section-header h2.section-title font { display:inline-block; clear:both; width: 100%; height:auto; line-height:100%; padding:0 0 5px 0; margin:0 auto; text-align:center; overflow:hidden; font-size:14px; color: rgba(160,160,160,1.0); text-transform: uppercase; font-weight:normal; letter-spacing:0; font-family:Microsoft Yahei, Arial, sans-serif; box-sizing: border-box; } /*业务介绍*/ #portfolio{ display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:0 auto; text-align:center; overflow:visible; background:#fff;} #portfolio ul.portfolio-filter{ display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:10px auto; text-align:center; list-style-type:none; } #portfolio ul.portfolio-filter > li { display:inline-block; float:none; width:auto; height:80px; padding:0; margin:0; text-align:center; list-style-type:none;} #portfolio ul.portfolio-filter > li a { position: relative; display:inline-block; float:none; width:auto; height:60px; line-height: 60px; padding:0 30px; margin:10px 30px; text-align:center;text-indent: 50px; box-sizing:border-box; box-shadow:none; cursor:pointer; text-decoration:none; font-size:20px; color: rgba(51,51,51,1.0); border-bottom:2px solid rgba(51,51,51,0.5);} #portfolio ul.portfolio-filter > li a:hover, #portfolio ul.portfolio-filter > li.active a { color: rgba(62,183,192,1.0); border-bottom:2px solid rgba(62,183,192,1.0); } #portfolio ul.portfolio-filter > li:nth-of-type(1) a{ background: url(../images/tit-ico_01.png) no-repeat 30px center; background-size: 40px 40px;} #portfolio ul.portfolio-filter > li:nth-of-type(2) a{ background: url(../images/tit-ico_03.png) no-repeat 30px center; background-size: 40px 40px;} #portfolio ul.portfolio-filter > li:nth-of-type(3) a{ background: url(../images/tit-ico_05.png) no-repeat 30px center; background-size: 40px 40px;} #portfolio ul.portfolio-filter > li:nth-of-type(1) a:hover, #portfolio ul.portfolio-filter > li.active:nth-of-type(1) a{ background: url(../images/tit-ico_02.png) no-repeat 30px center; background-size: 40px 40px;} #portfolio ul.portfolio-filter > li:nth-of-type(2) a:hover, #portfolio ul.portfolio-filter > li.active:nth-of-type(2) a{ background: url(../images/tit-ico_04.png) no-repeat 30px center; background-size: 40px 40px;} #portfolio ul.portfolio-filter > li:nth-of-type(3) a:hover, #portfolio ul.portfolio-filter > li.active:nth-of-type(3) li a{ background: url(../images/tit-ico_06.png) no-repeat 30px center; background-size: 40px 40px;} #portfolio .portfolio-items .portfolio-item { display:inline-block; float: left; width: 100%; height:auto; padding:0; margin:0; box-sizing: border-box; } #portfolio .portfolio-items .portfolio-item.isotope-hidden.isotope-item { pointer-events: none; display: none; z-index: 1;} #portfolio .portfolio-items.isotope {height:680px;} #portfolio .portfolio-items .portfolio-item .portfolio-item-inner { position: relative; display:inline-block; width:100%; height:680px; padding:0; margin:0; text-align: center;background: #fc0;} #portfolio .portfolio-items .portfolio-item.pro_manage .portfolio-item-inner{background: url(../images/pro_manage-pic.png) no-repeat 0 top; min-height: 680px;} #portfolio .pro_manage .features{ display:inline-block; float: right; width:480px; height:auto; text-align:center; padding:0; margin:60px 0 0 0;} #portfolio .pro_manage .features .cell_box { display:inline-block; width:100%; height:200px;text-align:center; padding:0; margin:0 auto; border:none; } #portfolio .pro_manage .features .cell_box .icon_box { position: relative; display:inline-block; float:none; clear:both; width:100%; height:auto; text-align: center; padding:0; margin:0 auto;} #portfolio .pro_manage .features .cell_box .icon_box img { display:inline-block; float:left; width: 40px; height: 40px; border:none; padding:0; margin:0; background: rgba(62,183,192,1.0); border-radius:10px;} #portfolio .pro_manage .features .cell_box .text_box { display:inline-block; float:none; clear:both; width:100%; height:auto; padding:0; margin:0 auto; text-align:center; background:none; } #portfolio .pro_manage .features .text_box h4.s_heading { display:inline-block; clear:both; width:100%; height:30px; line-height:30px; padding:0; margin:0 auto; text-align:left; text-indent:0; font-size:16px; color:rgba(62,183,192,1.0); font-weight: normal;} #portfolio .pro_manage .features .text_box h4.s_heading span{ font-size:16px; color:rgba(62,183,192,1.0); } #portfolio .pro_manage .features .text_box p.s_text { display:inline-block; clear:both; width:100%; height:auto; line-height:150%; padding:0; margin:0.8em auto; text-align:left; text-indent:0; font-size:11px; color: rgba(51,51,51,0.8); overflow:hidden; } #portfolio .portfolio-items .portfolio-item.pro_maintenancen .portfolio-item-inner{background: url(../images/pro_maintenance-pic1.png) no-repeat 0 top; min-height: 520px;} #portfolio .pro_maintenancen ul.pro-items{ display:inline-block; clear:both; width:1140px; height:auto; padding:0; margin:0 auto; text-align:center; list-style-type: none;} #portfolio .pro_maintenancen ul.pro-items li{ display:inline-block; float:left; width:380px;height:auto; padding:0; margin:0; text-align:center; list-style-type: none;} #portfolio .pro_maintenancen .pro-pic{ display:inline-block; float:right; width:auto; height:auto; padding:0; margin:0; text-align:center;} #portfolio .pro_maintenancen .pro-pic img{ display:block; width:700px;height:520px;padding:0; margin:0; border:none;} #portfolio .portfolio-items .portfolio-item.pro_improve .portfolio-item-inner{background: url(../images/pro_improve2.png) no-repeat right top; min-height: 450px;} #portfolio .pro_improve .pro-pic{ display:inline-block; float:left; width:auto; height:auto; padding:0; margin:0; text-align:center;} #portfolio .pro_improve .pro-pic img{ display:block; width:720px;height:450px;padding:0; margin:0; border:none;} #portfolio .pro_improve .features { display:inline-block; clear:both; width:100%; height:auto; text-align:center; padding:15px; margin:0; } #portfolio .pro_improve .features .cell_box { display:inline-block; float: left; height:60px; text-align:center; padding:0; margin:15px;background: rgba(255,255,255,1.0);box-shadow:0 5px 10px 5px rgba(0,147,161,0.2); border-radius: 10px;} #portfolio .pro_improve .features .cell_box .icon_box { position: relative; display:inline-block; float:left!important; width:60px; height: 60px; text-align: center; background: rgba(2,180,197,1.0); padding:0; margin:0; border-top-left-radius: 10px; border-bottom-left-radius: 10px;} #portfolio .pro_improve .features .cell_box .icon_box img { display:inline-block; width:100%; height:100%; border:none; padding:0; margin:0; } #portfolio .pro_improve .features .cell_box .text_box { display:inline-block; float: left!important; width:calc(100% - 60px); height:auto; padding:5px; margin:0; text-align:center; } #portfolio .pro_improve .features .cell_box .text_box h4.s_heading { display:inline-block; clear:both; width:100%; height:25px; line-height:25px; padding:0; margin:0 auto; text-align:left; font-size:16px; color:rgba(2,180,197,1.0); font-weight: normal;} #portfolio .pro_improve .features .cell_box .text_box p.s_text { display:inline-block; clear:both; width:100%; height:25px; line-height:25px; padding:0; margin:0 auto; text-align:left; font-size:13px; color:rgba(0,0,0,0.6); overflow:hidden; } #portfolio .pro_improve .features .cell_box:nth-of-type(1), #portfolio .pro_improve .features .cell_box:nth-of-type(4){ width:220px;} #portfolio .pro_improve .features .cell_box:nth-of-type(2), #portfolio .pro_improve .features .cell_box:nth-of-type(5){ width:375px;} #portfolio .pro_improve .features .cell_box:nth-of-type(3), #portfolio .pro_improve .features .cell_box:nth-of-type(6){ width:425px;} /*行业解决方案*/ #solutions.sec_bg{ z-index:1; position:relative; background: rgba(255,255,255,1.0); overflow:visible; padding:40px 0 0 0; margin: 0; min-height:1250px;} #solutions.sec_bg .container{z-index:2; position:relative; height: 100%; box-sizing: border-box; background: rgba(255,255,255,0);} #solutions.sec_bg:before, #solutions.sec_bg:after, #solutions.sec_bg .container:before{ position: absolute; content:''; background:linear-gradient(120deg, rgba(36,228,192,0.22) 0%, rgba(103,216,213,0.21) 50%, rgba(180,230,230,0.2) 100%); border-radius: 50%;} #solutions.sec_bg:before { z-index: 0; right: 30px; top:120px; width: 710px; height: 710px; animation: a_bg_1 4s linear 0s infinite alternate;} #solutions.sec_bg:after { z-index: 0; right: 20px; top:750px; width: 60px; height: 60px; animation: a_bg_2 4s linear 0s infinite alternate;} #solutions.sec_bg .container:before { z-index: 0; left:-50px; top:1000px; width: 230px; height: 230px; animation: a_bg_3 4s linear 0s infinite alternate;} @keyframes a_bg_1 { 0% { right: 30px; top:120px; width: 710px; height: 710px; } 50% { right: 10px; top:140px; width: 740px; height: 740px; } 100% { right: 50px; top:100px; width: 750px; height: 750px; } } @keyframes a_bg_2 { 0% { right: 20px; top:730px; width: 60px; height: 60px; } 100% { right: 30px; top:700px; width: 100px; height: 100px; } } @keyframes a_bg_3 { 0% { left:-50px; top:980px; width: 230px; height: 230px; } 100% { left:-30px; top:960px; width: 210px; height: 210px; } } /* Firefox */ @-moz-keyframes a_bg_1 { 0% { right: 30px; top:120px; width: 710px; height: 710px; } 50% { right: 10px; top:140px; width: 740px; height: 740px; } 100% { right: 50px; top:100px; width: 750px; height: 750px; } } @-moz-keyframes a_bg_2 { 0% { right: 20px; top:730px; width: 60px; height: 60px; } 100% { right: 30px; top:700px; width: 100px; height: 100px; } } @-moz-keyframes a_bg_3 { 0% { left:-50px; top:980px; width: 230px; height: 230px; } 100% { left:-30px; top:960px; width: 210px; height: 210px; } } /* Safari 和 Chrome */ @-webkit-keyframes a_bg_1 { 0% { right: 30px; top:120px; width: 710px; height: 710px; } 50% { right: 10px; top:140px; width: 740px; height: 740px; } 100% { right: 50px; top:100px; width: 750px; height: 750px; } } @-webkit-keyframes a_bg_2 { 0% { right: 20px; top:730px; width: 60px; height: 60px; } 100% { right: 30px; top:700px; width: 100px; height: 100px; } } @-webkit-keyframes a_bg_3 { 0% { left:-50px; top:980px; width: 230px; height: 230px; } 100% { left:-30px; top:960px; width: 210px; height: 210px; } } /* Opera */ @-o-keyframes a_bg_1 { 0% { right: 30px; top:120px; width: 710px; height: 710px; } 50% { right: 10px; top:140px; width: 740px; height: 740px; } 100% { right: 50px; top:100px; width: 750px; height: 750px; } } @-o-keyframes a_bg_2 { 0% { right: 20px; top:730px; width: 60px; height: 60px; } 100% { right: 30px; top:700px; width: 100px; height: 100px; } } @-o-keyframes a_bg_3 { 0% { left:-50px; top:980px; width: 230px; height: 230px; } 100% { left:-30px; top:960px; width: 210px; height: 210px; } } #solutions .sec-con{ padding:10px; } #solutions .item-wrapper { position: relative; display:inline-block; clear:both; width:310px; height:430px; padding:0; margin:30px auto; overflow: hidden; background: rgba(255,255,255,1.0); border-radius:5px; box-sizing:border-box; box-shadow:0 10px 30px 20px rgba(2,180,197,0.15); transition: all 0.2s ease; cursor:pointer; } #solutions .item-wrapper .icon{ display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:0 auto; text-align:center; overflow:hidden;} #solutions .item-wrapper .icon img{ display:inline-block; clear:both; width:80px; height:80px; padding:0; margin:50px auto 10px auto; overflow:hidden; background: rgba(255,255,255,1.0); border-radius: 50%; border:none;} #solutions .item-wrapper .stit{ display:inline-block; clear:both; width:100%; height:auto; padding: 0; margin:0 auto; text-align:center; overflow:hidden;} #solutions .item-wrapper .stit h3{ display:inline-block; clear:both; width:70%; height:40px; line-height:40px; padding:0; margin:0 auto; text-align:center; font-size:22px; font-weight:normal; color: rgba(0,0,0,1.0); } #solutions .item-wrapper .description{ display:inline-block; clear:both; width:100%; height:auto; padding: 0; margin:0 auto; text-align:center; overflow:hidden;} #solutions .item-wrapper .description p{ display:inline-block; clear:both; width:70%; height:140px; padding:5px 0; margin:0 auto; text-align:left; font-size:14px; color:rgba(160,160,160,1.0); line-height:150%; } #solutions .item-wrapper .btn{ display:inline-block; clear:both; width:100%; height:auto; padding: 0; margin:0 auto; text-align:center; overflow:hidden;} #solutions .item-wrapper .btn a{ display: inline-block; width: 120px; height: 36px; line-height: 36px; text-align: center; font-size: 14px;border:none; text-decoration: none; border-radius:5px; padding: 0; margin: 10px auto; color:rgba(255,255,255,1.0); background: rgba(2,180,197,1.0);} #solutions .item-wrapper:hover {background: rgba(2,180,197,1.0); transition: all 0.5s ease;} #solutions .item-wrapper:hover .stit h3, #solutions .item-wrapper:hover .description p{ color: rgba(255,255,255,1.0); transition: all 0.5s ease;} #solutions .item-wrapper:hover a{ color: rgba(2,180,197,1.0); background:rgba(255,255,255,1.0); transition: all 0.5s ease;} /*服务客户*/ #customers .logo_box { position: relative; display:inline-block; clear:both; width: 100%; height:auto; text-align: center; padding:0; margin:0; } #customers .logo_box img { display:inline-block; width:100%; height: auto; border:none; padding:0; margin:20px auto;} /*开启设备智能化管理之旅*/ #startnow{ display:block; clear:both; width:100%; height:calc(100% * 0.296); padding:80px 0; margin:0 auto; text-align:center; overflow:hidden; box-sizing: border-box; background:rgba(2,180,197,1.0) url(../images/footer-blue.jpg) no-repeat 50% 0; background-size: cover; } #startnow .section-header h2.section-title { position: relative; display:inline-block; clear:both; width:100%; height:auto; padding:10px; margin:0 auto; text-align:center; overflow:hidden; box-sizing: border-box; } #startnow .section-header h2.section-title:before { position: absolute; content: ""; width: 70px; bottom: 0; left: 50%; margin-left: -35px; height: 4px; background: rgba(2,180,197,0);} #startnow .section-header h2.section-title span{ display:inline-block; clear:both; width: 100%; height:auto; line-height:100%; padding:5px; margin:0 auto; text-align:center; overflow:hidden; color: rgba(255,255,255,1.0); text-transform: uppercase; font-weight:normal; font-family:Microsoft Yahei, Arial, sans-serif; box-sizing: border-box; } #startnow .btn-box{ display: inline-block; clear:both; width: auto; height: 80px; padding: 0; margin: 0; line-height: 80px; } #startnow .btn-box .btn { display: inline-block; border-radius:5px; font-size: 14px; text-decoration: none; transition: all 0.5s ease; border:1px solid rgba(255,255,255,1.0); background:rgba(5,112,141,0); color:rgba(255,255,255,1.0); opacity: 1.0; /* padding: 8px 30px; */padding: 0; margin: 10px; width:120px; height: 36px; line-height: 36px; text-align: center; } #startnow .btn-box .btn:hover, #startnow .btn-box .btn:focus{ opacity: 0.8; } #startnow .btn-box .btn:first-of-type{ color:rgba(5,112,141,1.0); background:rgba(255,255,255,1.0); } /*联系我们*/ #contact{ } #contact h3{ display:inline-block; clear:both; width:auto; height:60px; line-height:60px; padding:0 2em; margin:20px auto; text-align:center; overflow:hidden; font-size: 24px; color: #fff; font-weight: normal; letter-spacing: 2px; border:1px solid #aaa; border-radius:30px; box-sizing:border-box; } #contact .contact-list{ display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:0 auto; text-align:center; overflow:hidden;} #contact .contact-list ul { display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:1em auto; text-align:center; overflow:hidden; list-style-type:none; } #contact .contact-list ul li{ display:inline-block; float:left; width:50%; height:auto; padding:0.2em 0; margin:0; text-align:center; overflow:hidden; list-style-type:none; } #contact .contact-list ul li.address, #contact .contact-list ul li.phone, #contact .contact-list ul li.email, #contact .contact-list ul li.wechat, #contact .contact-list ul li.weimob, #contact .contact-list ul li.qq, #contact .contact-list ul li.weibo{} #contact .contact-list ul li i{ display:inline-block; float:left; width:40px; height:40px; line-height:40px; padding:0; margin:0; text-align:center; overflow:hidden; } #contact .contact-list ul li i img{ display:inline-block; width:24px; height:24px; padding:0; margin:8px; border:none; } #contact .contact-list ul li h4{ display:inline-block; float:left; width:auto; height:40px; line-height:40px; padding:0; margin:0; text-align:center; overflow:hidden; font-size: 18px; color:#ccc; font-weight:normal; } #contact .contact-list ul li p{ display:inline-block; clear:both; width:100%; height:40px; line-height:40px; padding:0; margin:0 auto; text-align:left; overflow:hidden; text-indent:40px; font-size: 16px; color:#888;} #contact .contact-list ul li p span, #contact .contact-list ul li p a{ font-size: 16px; color:#888;} #contact .contact-list ul li p a:hover{ color:#fff; } #contact .contact-qrcode{ display:inline-block; clear:both; width:100%; height:auto; padding:60px 0 100px 0; margin:0 auto; text-align:center; overflow:hidden; background:url(../images/qrcode_bg.png) no-repeat right bottom;} #contact .contact-qrcode ul { display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:0.6em auto; text-align:center; overflow:hidden; list-style-type:none; } #contact .contact-qrcode ul li{ display:inline-block; float:left; width:38%; height:auto; padding:0; margin:0 4% 0 0; text-align:center; overflow:hidden; list-style-type:none; } #contact .contact-qrcode ul li i{ display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:0; text-align:center; overflow:hidden; } #contact .contact-qrcode ul li img{ display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:0 auto; border:none; } #contact .contact-qrcode ul li span{ display:inline-block; clear:both; width:100%; height:30px; line-height:30px; padding:0 0.1em; margin:0 auto; text-align:center; overflow:hidden; font-size: 14px; color:#ccc; text-indent:0; border-radius:14px; background:#000; } /*********************************************************移动端*********************************************************/ /*@media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } }*/ @media screen and (max-width: 1000px){ /* 通用板块标题*/ .section-header {margin:1.5em auto; } .section-header h2.section-title span{ font-size:20px; } .section-header h2.section-title font { font-size:12px; } /*焦点大图*/ #hero-banner{ position: relative; overflow: hidden; height:calc(100vw / 1.8); background: rgba(2,180,197,1.0) url(../images/banner/banner.jpg) no-repeat center bottom; background-size: cover; } #hero-banner .banner-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #hero-banner .banner-inner .container{ position: relative; overflow: visible; height: 100%; } #hero-banner .banner-inner .banner-tex{ position: absolute; left:15px; top:60%; z-index: 1; display: inline-block; width:100%; height: auto; padding:0; margin: 0; } #hero-banner .banner-inner .banner-tex h2 { display: none; font-size:1.5em; line-height:120%; margin: 10px 0; } #hero-banner .banner-inner .banner-tex p { display: none; margin:10px 0; font-size:0.5em; line-height:100%; } #hero-banner .banner-inner .banner-tex a.btn { border-radius:0.2em; font-size:0.8em; padding:0.2em 1em; margin:0.5em; width:auto; height:auto; line-height:normal; background:rgba(5,112,141,0.8); color:rgba(255,255,255,1.0); opacity: 1.0; } #hero-banner .banner-inner .banner-tex a.btn:hover, #hero-banner .banner-inner .banner-tex a.btn:focus{ opacity: 0.8; } #hero-banner .banner-inner .banner-tex a.btn:first-of-type{ color:rgba(5,112,141,1.0); background:rgba(255,255,255,1.0); } #hero-banner .banner-inner .banner-pic{ display: none; position: absolute; right: 0; top: 20px; z-index: 0; width:auto; height: auto; padding: 0; margin: 0; text-align: right; } #hero-banner .banner-inner .banner-pic img.pic{ width:55%; height: auto; margin: 0; } /*业务介绍*/ #portfolio ul.portfolio-filter { padding:0; margin:1em 0 0 0; text-align:center; list-style-type:none; overflow: hidden; } #portfolio ul.portfolio-filter > li { display:inline-block; float:left; width:32%; height:80px; padding:0; margin:0; text-align:center; list-style-type:none; overflow: hidden; } #portfolio ul.portfolio-filter > li:nth-of-type(2) { margin:0 2%; } #portfolio ul.portfolio-filter > li a { position: relative; display:inline-block; float:none; width:100%; height:auto; line-height:100%; padding:2.8em 0.5em 0.5em 0.5em; margin:0; text-align:center; text-indent:0; box-sizing:border-box; box-shadow:none; cursor:pointer; text-decoration:none; font-size:14px; color: rgba(51,51,51,1.0); border:1px solid rgba(51,51,51,0); } #portfolio ul.portfolio-filter > li a:hover, #portfolio ul.portfolio-filter > li.active a { color: rgba(62,183,192,1.0); border:1px solid rgba(62,183,192,0);} #portfolio ul.portfolio-filter > li:nth-of-type(1) a{ background:rgba(51,51,51,0.03) url(../images/tit-ico_01.png) no-repeat 50% 0.5em; background-size: 2em 2em;} #portfolio ul.portfolio-filter > li:nth-of-type(2) a{ background:rgba(51,51,51,0.03) url(../images/tit-ico_03.png) no-repeat 50% 0.5em; background-size: 2em 2em;} #portfolio ul.portfolio-filter > li:nth-of-type(3) a{ background:rgba(51,51,51,0.03) url(../images/tit-ico_05.png) no-repeat 50% 0.5em; background-size: 2em 2em;} #portfolio ul.portfolio-filter > li:nth-of-type(1) a:hover, #portfolio ul.portfolio-filter > li.active:nth-of-type(1) a{ background:rgba(62,183,192,0.1) url(../images/tit-ico_02.png) no-repeat 50% 0.5em; background-size: 2em 2em;} #portfolio ul.portfolio-filter > li:nth-of-type(2) a:hover, #portfolio ul.portfolio-filter > li.active:nth-of-type(2) a{ background:rgba(62,183,192,0.1) url(../images/tit-ico_04.png) no-repeat 50% 0.5em; background-size: 2em 2em;} #portfolio ul.portfolio-filter > li:nth-of-type(3) a:hover, #portfolio ul.portfolio-filter > li.active:nth-of-type(3) a{ background:rgba(62,183,192,0.1) url(../images/tit-ico_06.png) no-repeat 50% 0.5em; background-size: 2em 2em;} #portfolio .portfolio-items .portfolio-item { display:inline-block; float: left; width: 100%; height:auto; padding:0; margin:0; box-sizing: border-box; } #portfolio .portfolio-items .portfolio-item .portfolio-item-inner { position: relative; display:inline-block; width:100%; height:auto;} #portfolio .portfolio-items .portfolio-item.pro_manage .portfolio-item-inner{background: url(../images/pro_manage-pic.png) no-repeat 50% 0; background-size: 100% auto; padding-top: calc(100vw * 0.95); min-height:10px; } #portfolio .pro_manage .features{ display:inline-block; float:none; width:100%; height:auto; text-align:center; padding:0; margin:0;} #portfolio .pro_manage .features .cell_box { position: relative; display:inline-block; width:100%; height:auto; text-align:center; padding:0; margin:0 auto; border:none; } #portfolio .pro_manage .features .cell_box .icon_box { position: absolute; top: 5px; left: 0; width:20px; height:20px; text-align: center; padding:0; margin:0;} #portfolio .pro_manage .features .cell_box .icon_box img { width: 100%; height:100%; border:none; padding:0; margin:0; background: rgba(62,183,192,1.0); border-radius:5px; box-sizing: border-box; } #portfolio .pro_manage .features .text_box h4.s_heading { height:30px; line-height:30px; padding:0; margin:0 auto; text-align:left; text-indent:30px; font-size:16px; color:rgba(62,183,192,1.0); font-weight: normal;} #portfolio .pro_manage .features .text_box p.s_text { line-height:120%; padding:0; margin:0.5em auto; font-size: 12px;} #portfolio .portfolio-items .portfolio-item.pro_maintenancen .portfolio-item-inner{background: url(../images/pro_maintenance-pic1.png) no-repeat 50% 0; background-size: 80% auto; padding-top: calc(80vw * 0.92); min-height:10px; } #portfolio .pro_maintenancen ul.pro-items{ display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:0 auto; text-align:center; list-style-type: none;} #portfolio .pro_maintenancen ul.pro-items li{ width:33.33%;} #portfolio .pro_maintenancen ul.pro-items li img{ width:100%; height:auto; border: none;} #portfolio .pro_maintenancen .pro-pic{ display:inline-block; float:none; width:100%; height:auto; padding:0; margin:0 auto; text-align:center;} #portfolio .pro_maintenancen .pro-pic img{ width:100%; height:auto;} #portfolio .portfolio-items .portfolio-item.pro_improve .portfolio-item-inner{background: url(../images/pro_improve2.png) no-repeat 50% 0; background-size: 80% auto; padding-top: 80vw; min-height:10px;} #portfolio .pro_improve .pro-pic{ display:inline-block; float:none; width:100%; height:auto; padding:0; margin:0 auto; text-align:center;} #portfolio .pro_improve .pro-pic img{ display:block; width:100%;height:auto;padding:0; margin:0; border:none;} #portfolio .pro_improve .features { display:inline-block; clear:both; width:100%; height:auto; text-align:center; padding:0; margin:0; box-sizing: border-box; } #portfolio .pro_improve .features .cell_box { display:inline-block; float: none; clear: both; height:60px; text-align:center; padding:0; margin:5px auto; background: rgba(255,255,255,1.0);box-shadow:0 2px 5px 2px rgba(0,147,161,0.2); border-radius: 5px; box-sizing: border-box;} #portfolio .pro_improve .features .cell_box .icon_box { position: relative; display:inline-block; float:left!important; width:60px; height: 60px; text-align: center; background: rgba(2,180,197,1.0); padding:0; margin:0; border-top-left-radius: 5px; border-bottom-left-radius: 5px;} #portfolio .pro_improve .features .cell_box .icon_box img { display:inline-block; width:100%; height:auto; border:none; padding:0; margin:0; } #portfolio .pro_improve .features .cell_box .text_box { display:inline-block; float: left!important; width:calc(100% - 60px); height:auto; padding:0; margin:0; text-align:center; } #portfolio .pro_improve .features .cell_box .text_box h4.s_heading { display:inline-block; clear:both; width:100%; height:20px; line-height:20px; padding:0 5px; margin:0 auto; text-align:left; font-size:14px; color:rgba(2,180,197,1.0); font-weight: normal;} #portfolio .pro_improve .features .cell_box .text_box p.s_text { display:inline-block; clear:both; width:100%; height:40px; line-height:120%; padding:0 5px; margin:0 auto; text-align:left; font-size:12px; color:rgba(0,0,0,0.6); overflow:hidden; } #portfolio .pro_improve .features .cell_box:nth-of-type(1), #portfolio .pro_improve .features .cell_box:nth-of-type(4), #portfolio .pro_improve .features .cell_box:nth-of-type(2), #portfolio .pro_improve .features .cell_box:nth-of-type(5), #portfolio .pro_improve .features .cell_box:nth-of-type(3), #portfolio .pro_improve .features .cell_box:nth-of-type(6){ width:90%;} /*行业解决方案*/ #solutions.sec_bg{ z-index:1; position:relative; background: rgba(255,255,255,1.0); overflow:visible; padding:0; margin: 0; min-height:auto;} #solutions.sec_bg .container{z-index:2; position:relative; height: 100%; box-sizing: border-box; background: rgba(255,255,255,0);} #solutions.sec_bg:before, #solutions.sec_bg:after, #solutions.sec_bg .container:before{ position: absolute; content:''; background:linear-gradient(120deg, rgba(36,228,192,0.22) 0%, rgba(103,216,213,0.21) 50%, rgba(180,230,230,0.2) 100%); border-radius: 50%;} #solutions.sec_bg:before { z-index: 0; right: 30px; top:120px; width: 710px; height: 710px; animation: a_bg_1 4s linear 0s infinite alternate;} #solutions.sec_bg:after { z-index: 0; right: 20px; top:750px; width: 60px; height: 60px; animation: a_bg_2 4s linear 0s infinite alternate;} #solutions.sec_bg .container:before { z-index: 0; left:-50px; top:1000px; width: 230px; height: 230px; animation: a_bg_3 4s linear 0s infinite alternate;} #solutions .sec-con{ padding:0; } #solutions .item-wrapper { position: relative; display:inline-block; clear:both; width:100%; height:auto; padding:10px 0 20px 0; margin:10px auto; overflow: hidden; background: rgba(255,255,255,1.0); border-radius:5px; box-sizing:border-box; box-shadow:0 5px 10px 5px rgba(2,180,197,0.15); transition: all 0.2s ease; cursor:pointer; } #solutions .item-wrapper .icon{ display:inline-block; clear:both; width:100%; height:auto; padding:0; margin:0 auto; text-align:center; overflow:hidden;} #solutions .item-wrapper .icon img{ display:inline-block; clear:both; width:80px; height:80px; padding:0; margin:20px auto 10px auto; overflow:hidden; background: rgba(255,255,255,1.0); border-radius: 50%; border:none;} #solutions .item-wrapper .stit{ display:inline-block; clear:both; width:100%; height:auto; padding: 0; margin:0 auto; text-align:center; overflow:hidden;} #solutions .item-wrapper .stit h3{ display:inline-block; clear:both; width:70%; height:40px; line-height:40px; padding:0; margin:0 auto; text-align:center; font-size:18px; font-weight:normal; color: rgba(0,0,0,1.0); } #solutions .item-wrapper .description{ display:inline-block; clear:both; width:100%; height:auto; padding: 0; margin:0 auto; text-align:center; overflow:hidden;} #solutions .item-wrapper .description p{ display:inline-block; clear:both; width:80%; height:auto; padding:5px 0; margin:0 auto; text-align:left; font-size:14px; color:rgba(160,160,160,1.0); line-height:150%; } #solutions .item-wrapper .btn{ display:inline-block; clear:both; width:100%; height:auto; padding: 0; margin:0 auto; text-align:center; overflow:hidden;} #solutions .item-wrapper .btn a{ display: inline-block; width: 120px; height: 36px; line-height: 36px; text-align: center; font-size: 14px;border:none; text-decoration: none; border-radius:5px; padding: 0; margin: 10px auto; color:rgba(255,255,255,1.0); background: rgba(2,180,197,1.0);} #solutions .item-wrapper:hover {background: rgba(2,180,197,1.0); transition: all 0.5s ease;} #solutions .item-wrapper:hover .stit h3, #solutions .item-wrapper:hover .description p{ color: rgba(255,255,255,1.0); transition: all 0.5s ease;} #solutions .item-wrapper:hover a{ color: rgba(2,180,197,1.0); background:rgba(255,255,255,1.0); transition: all 0.5s ease;} /*开启设备智能化管理之旅*/ #startnow{ height:calc(100vw * 0.6); padding:2em 0; margin:0 auto; box-sizing: border-box; } #startnow .section-header { margin: 0 auto;} /*#startnow .btn-box { height:auto; line-height:auto; padding: 0; margin: 0 auto; }*/ }