*{ box-sizing: border-box; } .w1280{ min-width: 0; box-sizing: content-box; } body, html { min-width: 0; } .body-wrap{ width: 100%; position: relative; transition: all 0.5s ease 0s; z-index: 1; } .body-wrap.left, header.left .header-main { transform: translateX(-66%); } .solution-banner{ height: 550px; position: relative; overflow: hidden; } .solution-banner-img{ position: absolute; width: 1920px; left: 50%; top: 0; margin-left: -960px; } .solution-banner-con{ position: absolute; left:0; top:0; width:100%; height:100%; } .solution-banner-con .w1280{ height:100%; position: relative; padding: 190px 0 0 57px; } .solution-pa{ padding: 100px 0; overflow: hidden; } .solution-title{ text-align: center; line-height: 1; margin-bottom: 80px; } .solution-title .tit{ font-size: 36px; } .solution-title .text{ font-size: 16px; line-height: 24px; color: #666; margin-top: 30px; } .solution-title .text span{ display: block; } .solution-mode-box{ margin: 0px -17px; } .solution-mode-con{ float: left; width:20%; padding: 0px 17px; text-align: center; -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } .solution-mode-txt{ background: #ffffff; box-shadow: 5px 5px 20px 0 rgba(237, 237, 248, 0.5); padding: 73px 0 0 0; height:350px; position: relative; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; } .solution-mode-txt .tit{ font-size: 36px; line-height: 30px; position: absolute; width:100%; bottom:190px; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; } .solution-mode-txt .tit1{ font-size: 24px; } .solution-mode-txt .text{ margin: 47px 0 15px 0; color: #868fa4; font-size: 14px; line-height: 24px; padding: 0px 15px; } .solution-mode-txt:hover{ box-shadow: 10px 10px 50px 0 rgb(237, 237, 248); } .solution-mode-txt:hover .tit{ color: #1295e8; } .solution-mode-box1{ display: none; } .solution-mode-box1 .solution-mode-con{ width:100%; float: none; -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } .solution-business{ background: url("../img/shop/s2_bg.png") no-repeat center ; background-size: cover; } .solution-business-box{ padding: 110px 124px; position: relative; } .solution-business-con{ padding-left: 470px; } .solution-business .solution-title{ text-align: left; margin-bottom: 80px; color: #fff; } .solution-business .solution-title .text{ color: #fff; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity:0.6; opacity:0.6; } .solution-business-text{ color: #ffffff; display: none; } .solution-business-text .tit{ font-size: 24px; line-height: 1; margin-bottom: 25px; } .solution-business-text .text{ filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity:0.6; opacity:0.6; font-size: 16px; line-height: 24px; margin-bottom: 40px; } .solution-business-text .more{ width: 150px; line-height: 36px; border: 1px solid rgba(214, 214, 214, 0.5); text-align: center; font-size: 14px; display: inline-block; color: #ffffff; } .solution-business-text .img img{ margin-right: 20px; margin-bottom: 20px; } .solution-business-line{ margin-bottom: 40px; } .solution-business-line .line{ background: #D6D6D6; height:1px; filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity:0.1; opacity:0.1; margin-top: 50px; } .solution-business-left{ position: absolute; top:0; left:125px; height:100%; width:300px; background: url("../img/shop/s2_bg1.png") no-repeat center ; background-size: cover; padding-top: 280px; z-index:222; } .solution-business-left div{ cursor: pointer; line-height: 80px; padding-left: 35px; position: relative; color: #fff; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity:0.6; opacity:0.6; font-size: 18px; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; } .solution-business-scol{ -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } .solution-business-left div.on{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; } .solution-business-left div span{ position: relative; z-index:1; } .solution-business-left div::after,.solution-business-left div::before{ position: absolute; left:0; top:0; width:100%; height:100%; background: #000000; content: ''; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; } .solution-business-left div::after{ width:5px; background: #1363ef; } .solution-business-left div.on::before{ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; } .solution-business-left div.on::after{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; } .solution-fun-box{ margin: 0px -12px; -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } .solution-fun-con{ float: left; width:20%; padding: 0px 12px; text-align: center; margin-bottom: 10px; } .solution-fun-txt{ background: #ffffff; box-shadow: 5px 5px 20px 0 rgba(237, 237, 248, 0.26); padding: 57px 0 46px 0; height:202px; position: relative; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; color: #445780; font-size: 18px; line-height: 1; } .solution-fun-txt img{ margin-bottom: 20px; } .solution-fun-txt:hover{ box-shadow: 0px 20px 50px 0px rgba(118, 141, 201, 0.2); z-index:1; } .solution-tool{ background: #313233; color: #d6d6d6; text-align: center; } .solution-tool .solution-title{ color: #d6d6d6; } .solution-tool .solution-title .text{ color: #d6d6d6; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity:0.6; opacity:0.6; } .solution-tool-box{ margin: 0px -10px; } .solution-tool-con{ float: left; width:20%; padding: 30px 10px; text-align: center; font-size: 18px; } .solution-tool-con img{ margin-bottom: 10px; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; } .solution-tool-con:hover img{ -webkit-transform: translate(0, -5px); transform: translate(0, -5px); } .solution-team-box{ max-width:1280px; margin: 0px auto; position: relative; } .solution-team-con{ float: left; width:12.5%; padding: 0px 15px; text-align: center; position: relative; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; height:330px; padding-top: 30px; text-transform: uppercase; -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; z-index:2; } .solution-team-con.on{ /*background: #ffebe6;*/ background: rgba(226, 87, 48, 0.11); } .solution-team-con span{ position: absolute; width:21px; height:21px; background: url("../img/shop/s5_i1.png") no-repeat center ; background-size: cover; left:50%; margin-left: -10px; top:170px; z-index:1; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; } .solution-team-con.on span{ background-image: url("../img/shop/s5_i2.png") } .solution-team-mar{ margin: 0px -15px; } .solution-team-con .tit{ color: #6d7482; font-size: 16px; } .solution-team-con .text{ color: #e25730; font-size: 14px; line-height: 24px; margin-top: 55px; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; } .solution-team-con .tx{ display: none; } .solution-team-con.on .text{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; } .solution-team-line{ position: absolute; left:0; height:1px; background: #e5e5e5; width:100%; top:180px; } .pagination{ text-align: center; margin-top: 30px; } .solution .swiper-pagination-bullet { width: 20px; height: 20px; background:url("../img/shop/s_icon0.png") no-repeat center; background-size: cover; margin:0 10px; border-radius: 50%; } .solution .swiper-pagination-bullet-active { background-image: url("../img/shop/s_icon1.png"); } .mobile-show{ display: none; } .i-advantage .num>div { padding: 0 28px; text-align: center; position: relative; width: 25%; float: left; } .case-module { padding: 100px 0 70px; } .solution-title { margin-bottom: 60px; } .case-module .content { margin-top: 65px; } .solution-business .i-btn:before{ background: #ffffff; } .solution-business .i-btn:hover span{ color: #006699; } .contact-wrap .advis .link-qq a{ box-sizing:content-box; } @media (max-width: 1400px) { .solution-mode-box1{ display: block; } .solution-mode-box2{ display: none; } } @media (max-width: 1300px) { .solution-business-con { padding-left: 370px; } .solution-business-box { padding: 110px 54px; } .solution-business-left { left: 55px; } } @media (max-width: 1050px) { .solution-fun-con { width: 25%; } .solution-team-con { padding: 30px 5px 0px 5px; } .solution-team-mar { margin: 0px -5px; } } @media (max-width: 768px){ .solution-business-con { padding-left: 0; } .mobile-hidden{ display: none; } .mobile-show{ display: block; } .solution-title .tit { font-size: 0.58rem; line-height: 0.68rem; } .solution-title .text { font-size: 0.24rem; line-height: 0.4rem; margin-top: 0.36rem; } .solution-title { margin-bottom: 0.53rem; } .solution-pa{ padding: 0.9rem 0.4rem; } .solution-title .text span{ display: initial; } .solution-mode-con { float: none; width: 100%; padding: 0px 17px; } .solution-pa .w1280{ width:100%; padding: 0; } .solution-mode-ph-fl{ float: left; width:34%; position: relative; } .solution-mode-ph-fr{ text-align: left; position: absolute; right:0; top:50%; width:66%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .solution-mode-ph-fr img{ display: none; } .solution-mode-txt { box-shadow: 5px 5px 20px 0 rgba(237, 237, 248, 0.5); padding: 0.67rem 0 0 0; height: 2.45rem; margin-bottom: 0.36rem; } .solution-mode-txt .text { margin: 0; padding: 0px 0.34rem 0 0; font-size: 0.26rem; line-height: 0.48rem; } .solution-mode-txt .tit { font-size: 0.56rem; line-height: 0.36rem; top: 45px; } .solution-mode-txt .tit1 { font-size: 0.3rem; } .solution-business { background-image: url(../img/shop/s2_bg_ph.png) ; } .solution-business-box { padding: 0.9rem 0.4rem; } .solution-business .solution-title { text-align: center; margin-bottom: 0.74rem; } .solution-business-btn1{ padding-bottom: 0.2rem; height: 0.68rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .solution-business-btn1 div{ color: #fff; font-size: 0.24rem; padding: 0rem 0.12rem; line-height: 0.48rem; float: left; margin-right: 0.1rem; border: 1px solid rgba(255,255,255,.3); } .solution-business-btn1 div.on{ background: #0084ff; } .solution-business-line { margin: 0.5rem 0 0.38rem 0; } .solution-business-text .tit { font-size: 0.28rem; margin-bottom: 0.23rem; } .solution-business-line .tit{ font-size: 0.4rem; } .solution-business-text .text{ font-size: 0.24rem; line-height: 0.48rem; margin-bottom: 0.3rem; } .solution-business-line .line { margin-top: 0.78rem; } .solution-business-text .img img{ height: 0.41rem; } .solution-fun{ padding: 0.9rem 0.6rem; } .solution-fun-con { width: 50%; } .solution-fun-txt img{ width: 0.6rem; } .solution-fun-txt { background: #ffffff; box-shadow: 5px 5px 20px 0 rgba(237, 237, 248, 0.26); padding: 0.46rem 0 0 0; height: 2rem; font-size: 0.24rem; } .solution-tool-con { width: 33.333%; font-size: 0.24rem; padding: 0.35rem 10px; } .solution-tool-con img{ width: 0.68rem; } .solution-team-con{ float: none; width:100%; text-align: left; height: 1.4rem; padding: 0.24rem 0 ; margin-bottom: 0.2rem; } .solution-team-con .tit { color: #000; font-size: 0.3rem; } .solution-team-con img{ float: left; width: 0.92rem; margin: 0rem 0.3rem; } .solution-team-con .text{ display: none; } .solution-team-con .tx{ display: block; color: #6d7481; font-size: 0.24rem; line-height: 0.3rem; } .solution-team-mar{ padding-left: 0.7rem; position: relative; margin: 0; } .solution-team-line { left: 0.2rem; height: 100%; width: 1px; top: 0; } .solution-team-con span { width: 0.21rem; height: 0.21rem; left: -0.6rem; margin-left: 0; margin-top: -0.1rem; top: 50%; } .solution-team-fr{ position: absolute; right:0; top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 4.5rem; } .case-module,.i-advantage{ padding: 0.9rem 0.4rem; overflow: hidden; } .case-module .w1280,.i-advantage .w1280{ padding: 0; margin-top: 0; } .i-advantage .top-box{ width:100%; } .i-advantage .title{ margin-bottom: 0.36rem; } .i-advantage .text { font-size: 0.26rem; line-height: 0.48rem; } .i-advantage .num>div { width:50%; margin-bottom: 0.4rem; padding: 0; } .i-advantage .num>div:nth-child(2) .line{ display: none; } .i-advantage .num{ width:100%; } .i-advantage .num h4 { font-size: 1rem; } .i-advantage .num .line { height: 100%; } .i-advantage .bot-box ul { float: none; width: 100%; } .i-advantage .bot-box li { width: 33.33%; } .i-advantage .bot-box .box{ width:100%; } .i-advantage .bot-box .box img{ width:100%; } .i-advantage .bot-box { margin: 0.3rem 0 0; } .i-advantage .link { margin-top: 0.7rem; } .solution-mode-box2{ display: block; } .solution-mode-box1{ display: none; } .i-advantage .link a,.case-module .i-btn { width: 138px; height: 38px; line-height: 38px; font-size: 14px; } .solution-team-con.on:after{ position: absolute; border-color: transparent; border-style: solid; border-width: 5px 5px 5px 0; border-right-color: rgba(226, 87, 48, 0.11); content: ''; left: -5px; top: 50%; transform: translateY(-50%); } } @media (max-width: 480px) { .solution-mode-txt { padding: 0.5rem 0 0 0; } } @media (max-width: 768px) { .i-warp h2{ height: auto; } /*.new-float { display: none; }*/ .alert-contact-box{ visibility: hidden; z-index: -10; } footer .w1280{ min-width: 0; padding: 0 20px; } .footer-top{ padding: 0 0 20px; } .footer-top .link{ float: none; } .footer-top .phone{ float: none; } .footer-bot{ padding: 10px 0 0; } } .new-float li a,.new-float li p{ box-sizing: content-box; }