@charset 'utf-8'; /*--------------------- banner -------------------*/ #js_banner{ width: 100%; position: relative; overflow: hidden; height: 650px; } #js_banner .swiper-slide > a{ position: relative; overflow: hidden; display: block; width: 100%; height: 650px; } #js_banner .swiper-slide > a.banner-1{ /*background: url(/uploads/image/pi/banner_1.jpg) no-repeat 50% 50%; background-size: cover;*/ -ms-behavior: ; behavior: ; } .swiper-pagination { position: absolute; text-align: center; bottom:15px!important; } .swiper-pagination-bullet { display: inline-block; width: 30px; height: 5px; background: #a1a1a3; margin: 0 5px; cursor: pointer; border-radius: 0; } .swiper-pagination-bullet-active { background: #fff; } /*--------------------- product -------------------*/ .product-nav-ul{ position: relative; overflow: hidden; width: 100%; text-align: center; } .product-nav-ul li{ position: relative; display: inline-block; margin-left: 77px; cursor: pointer; } .product-nav-ul li:first-child{ margin-left: 0; } .product-nav-ul li i{ display: block; width: 70px; height: 70px; margin: 0 auto; } .product-nav-ul li i.drp{ background: url(/uploads/image/pi/product_nav_1.png) no-repeat 50% 50%; } .product-nav-ul li i.baic { background: url(/uploads/image/pi/product_nav_6.png) no-repeat 50% 50%; background-size:90%; } .product-nav-ul li i.erp{ background: url(/uploads/image/pi/product_nav_2.png) no-repeat 50% 50%; } .product-nav-ul li i.wulianbao{ background: url(/uploads/image/pi/product_nav_3.png) no-repeat 50% 50%; } .product-nav-ul li i.order{ background: url(/uploads/image/pi/product_nav_4.png) no-repeat 50% 50%; } .product-nav-ul li i.finance{ background:url(/uploads/image/pi/product_nav_5.png)no-repeat 50% 50%; } .product-nav-ul li.active i.drp{ background: url(/uploads/image/pi/product_nav_1_active.png) no-repeat 50% 50%; } .product-nav-ul li.active i.baic { background: url(/uploads/image/pi/product_nav_6_active.png) no-repeat 50% 50%; background-size:90%; } .product-nav-ul li.active i.erp{ background: url(/uploads/image/pi/product_nav_2_active.png) no-repeat 50% 50%; } .product-nav-ul li.active i.wulianbao{ background: url(/uploads/image/pi/product_nav_3_active.png) no-repeat 50% 50%; } .product-nav-ul li.active i.order{ background: url(/uploads/image/pi/product_nav_4_active.png) no-repeat 50% 50%; } .product-nav-ul li.active i.finance{ background: url(/uploads/image/pi/product_nav_5_active.png) no-repeat 50% 50%; } .product-nav-ul li p.nav-title{ line-height: 1; font-size: 18px; color: #323232; text-align: center; padding: 20px 0 30px; } .product-nav-ul li.active p.nav-title{ color: #0268f2; } .product-nav-ul li span{ display: none; width: 32px; height: 15px; position: absolute; bottom: 0; left: 50%; margin-left: -16px; background: url(/uploads/image/pi/product_nav_active_icon.png) no-repeat 50% 50%; } .product-nav-ul li.active span{ display: block; } .product-content-wrap{ position: relative; overflow: hidden; width: 100%; background: #f4f7ff; } .product-content-ul li{ display: none; position: relative; overflow: initial; width: 100%; padding: 0 40px; } .product-content-ul li.active{ display: block; } .product-content-left{ position: relative; overflow: hidden; width: 520px; height: 470px; float: left; padding: 120px 40px 0 0; } .product-content-left p.detail{ font-size: 16px; color: #6a6a6a; line-height: 210%; } .product-content-left a{ position: absolute; left: 0; bottom: 140px; display: block; width: 144px; height: 45px; background: #0268f2; line-height: 45px; text-align: center; color: #fff; font-size: 16px; } .product-content-right{ position: relative; overflow: inherit; float: right; width: 610px; height: 430px; } .product-content-right i{ display: block; width: 610px; height: 430px; margin-top: 20px; } .product-content-right i.product-1{ background: url(/uploads/image/pi/product_content_1.png) no-repeat 50% 100%; } .product-content-right i.product-2{ background: url(/uploads/image/pi/product_content_2.png) no-repeat 50% 100%; } .product-content-right i.product-3{ background: url(/uploads/image/pi/product_content_3.png) no-repeat 50% 100%; } .product-content-right i.product-4{ background: url(/uploads/image/pi/product_content_4.png) no-repeat 50% 100%; } .product-content-right i.product-5{ background: url(/uploads/image/pi/product_content_5.png) no-repeat 50% 100%; } .product-content-right i.product-6 { background: url(/uploads/image/pi/product_content_6.png) no-repeat 50% 100%; } /*--------------------- advantage -------------------*/ .advantage-content-box{ position: relative; overflow: hidden; width: 100%; } .advantage-content-box i.advantage-bg{ display: block; width:540px; height: 345px; margin:25px auto 90px; background: url(/uploads/image/pi/advantage_bg.png) no-repeat 50% 50%; } .advantage-content-box li{ position: absolute; left: 50%; } .advantage-content-box li p.h3{ line-height: 1; font-size: 18px; color: #323232; padding-bottom: 18px; } .advantage-content-box li p.detail{ line-height: 200%; font-size: 14px; color: #737373; } .advantage-content-box li.advantage-1, .advantage-content-box li.advantage-2{ width: 100px; margin-left: -420px; top: 25px; } .advantage-content-box li.advantage-3, .advantage-content-box li.advantage-4{ width: 120px; margin-left: 340px; top: 25px; } .advantage-content-box li.advantage-2{ top: 210px; } .advantage-content-box li.advantage-4{ top: 210px; } .advantage-content-box li.advantage-1 p, .advantage-content-box li.advantage-2 p{ text-align: right; } /*--------------------- customer-case -------------------*/ .customer-case-wrap{ background: #f4f7ff; } .customer-case-wrap i.customer-case-bg{ width: 100%; height: 412px; display: block; background: no-repeat 50% 50%; margin:20px auto 80px; } /*--------------------- honor -------------------*/ .honor-ul{ position: relative; overflow: hidden; width: 100%; text-align: center; padding: 20px 0 120px; } .honor-ul li{ position: relative; overflow: initial; display: inline-block; margin-left: 40px; } .honor-ul li:first-child{ margin-left: 0; } .honor-ul li i{ display: block; margin: 0 auto; width: 130px; height: 140px; } .honor-ul li i.honor-1{ background: url(/uploads/image/pi/honor_1.png) no-repeat 50% 50%; } /*.honor-ul li i.honor-2{ background: url(/uploads/image/pi/honor_2.png) no-repeat 50% 50%; }*/ .honor-ul li i.honor-3{ background: url(/uploads/image/pi/honor_3.png) no-repeat 50% 50%; } .honor-ul li i.honor-4{ background: url(/uploads/image/pi/honor_4.png) no-repeat 50% 50%; } .honor-ul li i.honor-5{ background: url(/uploads/image/pi/honor_5.png) no-repeat 50% 0%; } .honor-ul li i.honor-6{ background: url(/uploads/image/pi/honor_6.png) no-repeat 50% 50%; } .honor-ul li i.honor-7{ background: url(/uploads/image/pi/honor_7.png) no-repeat 50% 50%; } .honor-ul li i.honor-8{ background: url(/uploads/image/pi/honor_8.png) no-repeat 50% 50%; } .honor-ul li p.h3{ padding-top: 20px; line-height: 120%; font-size: 14px; color: #323232; }