.wrap .banner{ background-image: linear-gradient(to bottom,#002eb2 0%, #7422a8 100%); background-size: 100%; width: 100%; height: 650px; }
.screen{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; width: 100%; height: 100%; background: rgba(41, 79, 189, 0.5); z-index: 2; }
.wrap .banner-content{ position: relative; z-index: 5; width: 1400px; height: 100%; margin: 0 auto; padding-top: 5%; overflow: hidden; }
.wrap .banner-content img{ display: block; width: 57%; float: left; margin-top: 300px; opacity: 0; transition: margin-top 0.5s ease-out, opacity 0.3s ease-out; }
.wrap .banner-content h2{ font-size: 48px; float: left; margin-left: -10%; margin-top:450px; opacity: 0; transition: margin-top 0.8s ease-out, opacity 0.3s ease-out; }
.wrap .banner-content p{ text-indent: 30px; }

.wrap .wrap-bussiness .title{ width: 1200px; margin: 50px auto 30px; color: #000; }
.wrap .wrap-bussiness .title h3{ text-align: center; font-size: 30px; line-height: 2; }
.wrap .wrap-bussiness .title p{ text-indent: 30px; font-size: 16px; }

.big-container { max-width: 1200px; margin: auto; }
.text-center { text-align: center; }
.col-6 { float: left; width: 50%; }
.col-4 { float: left; width: 33.33%; }

.wrap .wrap-bussiness .part1{ width: 1200px; margin: 50px auto; }
.wrap .wrap-bussiness .part1 p{ color: #000; text-indent: 36px; font-size: 16px; }
.wrap .wrap-bussiness .part2{ width: 1200px; margin: 0 auto; color: #000; }
.wrap .wrap-bussiness .part2 .item{ position: relative; margin-bottom: 80px; }
.wrap .wrap-bussiness .part2 .item img{ width: 100%; }
.wrap .wrap-bussiness .part2 .item .text{ overflow: hidden; }
.wrap .wrap-bussiness .part2 .item .text h3{ font-size: 30px; width: 27%; float: left; }
.wrap .wrap-bussiness .part2 .item .text h3 span img{ width: 17%; }
.wrap .wrap-bussiness .part2 .item .text .p1{ font-size: 16px; text-indent: 36px; width: 73%; float: left; margin-bottom: 20px; }
.wrap .wrap-bussiness .part2 .item .text .p1 .ask{ padding-bottom: 15px; border-bottom: 2px solid #294fbd; }
.wrap .wrap-bussiness .part2 .item .text .p1 .answer{ padding-top: 15px; }
.wrap .wrap-bussiness .part2 .item .text .p1 strong{ display: inline-block; width: 30px;height: 30px; text-indent: 0; background: #ff4200; color: #fff; text-align: center; margin-right: 20px; position:relative; }
.wrap .wrap-bussiness .part2 .item .text .p1 strong:after{ content: ""; display: inline-block;border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #ff4200; border-right: 15px solid transparent; position:absolute; right: -30px; }
.wrap .wrap-bussiness .part2 .item .text .p1 .answer strong{ background: #294fbd; }
.wrap .wrap-bussiness .part2 .item .text .p1 .answer strong:after{ border-left: 15px solid #294fbd; }

.system-docking { padding: 175px 15px 48px; background: url(../images/bussiness-bg.jpg) no-repeat center; background-size: 100% 94%; color: #fff; margin-bottom: 80px; }
.system-docking__platform-item { display: inline-block; }
.system-docking__systems { position: relative; padding: 30px 0; }
.system-docking__systems:before { content: ""; position: absolute; display: block; top: 2%; left: 50%; width: 1px; height: 25%; background-color: #fff; }
.system-docking__logo { position: absolute; max-width: 120px; top: 30%; left: 50%; transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); -moz-transform: translateX(-50%, -10px); -ms-transform: translateX(-50%, -10px); }
.system-docking__logo img { max-width: 100%; }
.system-docking__platform { display: inline-block; padding: 20px; border: 2px dashed #fff; border-radius: 10px; }
.system-docking__platform span { font-size: 16px; }
.system-docking__erp, .system-docking__express { position: relative; }
.system-docking__erp:after, .system-docking__express:before { content: ""; position: absolute; top: 30%; display: block; width: 30%; height: 1px; background-color: #fff; }
.system-docking__erp:after { left: 54%; }
.system-docking__express:before { right: 54%; }
.system-docking__systems:after, .system-docking__erp-list:after, .system-docking__express-list:after { content: ""; display: block; clear: both; }
.system-docking__erp-brands, .system-docking__express-brands { position: relative; padding: 0 30px; border: 2px dashed #fff; width: 54%; max-width: 322px; border-radius: 10px; }
.system-docking__erp-brands p, .system-docking__express-brands p { font-size: 16px; }
.system-docking__express-brands { margin-left: 46%; }
.system-docking__platform-item { margin: 5px; }
.system-docking__erp-item { margin-bottom: 15px; }
.system-docking__express-item { margin-bottom: 30px; }
.system-docking__erp-intro, .system-docking__express-intro { position: relative; text-align: center; }
.system-docking__erp-intro span, .system-docking__express-intro span { display: inline-block; max-width: 145px; }
.system-docking__erp-intro:before, .system-docking__express-intro:before { content: ""; position: absolute; width: 1px; height: 40%; background-color: #fff; }
.system-docking__erp-intro:after, .system-docking__express-intro:after { content: ""; position: absolute; top: 40%; width: 40%; height: 1px; background-color: #fff; }
.system-docking__erp-intro:before, .system-docking__erp-intro:after { left: 0; }
.system-docking__express-intro:before, .system-docking__express-intro:after { right: 0; }
.system-docking__erp-intro { margin-left: 30%; }
.system-docking__express-intro { margin-right: 30%; }

.wrap .wrap-bussiness .part3{ margin-bottom: 80px; }
.wrap .wrap-bussiness .part3 .title p{ text-align: center; }
.wrap .wrap-bussiness .part3 ul{ width: 1200px; margin: 0 auto; text-align: center; }
.wrap .wrap-bussiness .part3 ul li{ display: inline-block; width: 24%; height: 180px; border: 1px solid #ccc; position: relative; overflow: hidden; cursor: pointer; }
.wrap .wrap-bussiness .part3 ul li em{ display: block; background: #002251; opacity: 0.5; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; transition: opacity 0.3s ease-out; }
.wrap .wrap-bussiness .part3 ul li img{ position: absolute; top: 0; left: 0; width: 100%; z-index: 1; transform: scale(1); transition: transform 0.3s ease-out; }
.wrap .wrap-bussiness .part3 ul li span{ position: absolute; top: 80px; left: 0; display: block; width: 100%; text-align: center; z-index: 3; font-size: 24px; }
.wrap .wrap-bussiness .part3 ul li:hover img{ transform: scale(1.024); }
.wrap .wrap-bussiness .part3 ul li:hover em{ opacity: 0.8; }