
/*轮播*/
.banner{ height:500px; position:relative; z-index:1; overflow:hidden; color: #fff; background: url('../images/banner_bg.png') #1372FC center top no-repeat; background-size: 1600px auto; }
.banner .pics{ height:500px; width: 100vw; transition: transform .3s ease-out; }
.banner .pics li{ width:100vw; height:100%; background-position: center top;  background-repeat: no-repeat; background-size: auto 100%; float: left; position: relative; z-index: 1; }
.banner h1{ font-size: 32px; font-weight: 100; margin-top: 120px; margin-bottom: 20px;}
.banner p{ font-size: 16px; font-weight: 100; margin: 0;}
.banner .cmds{ width:1180px; height:6px; position:absolute; z-index:999; top:340px; left:50%; margin-left: -590px; }
.banner .cmds span{ width:6px; height:6px; border-radius: 6px; background:#4DBAF4; cursor:pointer; display:inline-block; margin:0 2px; vertical-align:top; cursor: pointer; transition: all .3s ease-out;}
.banner .cmds span.curr{ width: 20px; background:#fff;}
.banner .banner_01{ position: absolute; right: 0; top: -60px; z-index: 3; }
.banner .banner_02{ position: absolute; right: 0; top: -60px; z-index: 3; }
.banner .banner_09{ position: absolute; right: 0; top: -60px; z-index: 3; }
.banner .fix{ height: 120px; width: 100%; position: fixed; z-index: 999; }
.banner .container{ position: relative; z-index: 1; }

.sys { padding: 72px 0; }
.sys h3{ font-size: 28px; margin: 8px 0; }
.sys p{ font-size: 14px; }
.sys .tbar{ padding: 70px 0 0px 50px }
.sys .tbar{ width: 500px; }
.sys .p{ width: 600px; }
.sys .p .qb{ width: 240px; height: 240px; float: left; margin: 0 24px; }

.fn{ padding: 50px 0;}
.fn .qb{ width: 377px; height: 240px; margin-right: 24px; margin-bottom: 24px; background-color: #f4f6fb; float: left; box-sizing:border-box; padding: 32px; transition: all .3s; }
.fn .qb:hover{ box-shadow: 0 5px 30px #ccc; }
.fn .qb h3{ font-size: 22px; margin: 12px 0;}
.fn .qb:nth-child(3){ margin-right: 0; }
.fn .qb:nth-child(6){ margin-right: 0; }

.mutiple{ padding: 40px 0; }
.mutiple .tbar{ }
.mutiple .c{ width: 214px; height: 474px; margin-right: 4px; background-color: #fff; transition: all .3s ease-out; box-sizing: border-box; text-align: center; float: left; position: relative; z-index: 0; padding: 36px 0; }
.mutiple .c:last-child{ margin-right: 0; }
.mutiple .c .button{ display: none; width: 120px; height: 40px; line-height: 40px; box-sizing: border-box; }
.mutiple .c .ico{ margin: 24px 0; }
.mutiple .c p{ margin-top: 20px; }
.mutiple .c .t{ font-size: 18px; transition: all .3s;}
.mutiple .c .p{ position: absolute; left: 50%; top: 50%; transform: scale(.6, .6); transition: transform .3s ease-out; transform-origin: bottom; top: 58%; }
.mutiple .c.curr{ width: 308px; border: 1px solid #1372FC; }
.mutiple .c.curr .t{ height: 64px; line-height: 64px; background: url('../images/bg_1.png') center no-repeat; background-size: auto 100%; color: #fff; position: absolute; left: 0; top: 0; width: 100%; z-index: 3; font-size: 18px;}
.mutiple .c.curr .ico{ visibility: hidden; margin: 12px 0; }
.mutiple .c.curr .cen{ display: block; position: absolute; left: 0; bottom: 20px; width: 100%; text-align: center; z-index: 3; }
.mutiple .c.curr .p{ transform: scale(1, 1); }
.mutiple .c.curr .button{ display: inline-block; }

.service { padding: 72px 0; }
.service .h2{ margin: 24px 0; }
.service .p{ box-sizing: border-box; }
.service .b{ color: #fff; padding: 48px; box-sizing: border-box; }
.service .bg_2 .b{ width: 363px; padding-top: 290px; }
.service .bg_3 .b{ padding-top: 142px; }
.service .bg_4 .b{ padding-top: 132px; }

.ali{ padding: 48px 0; }
.ali h2{ margin: 24px 0; }
.ali ul{ margin: 72px 0; }
.ali li{ width: 348px; height: 456px; box-sizing: border-box; padding: 48px; position: relative; z-index: 1; margin-right: 66px; background-color: #fff; text-align: center; float: left; transition: all .3s ease-out; }
.ali li:hover{ box-shadow: 0 5px 30px #ccc; }
.ali li .ico{ margin: 24px auto; display: block; }
.ali li h3{ font-size: 24px; margin-bottom: 24px; }
.ali li:last-child{ margin-right: 0; float: right; }
.ali li .btm{ height: 64px; line-height: 64px; background: url('../images/bg_1.png') center no-repeat; background-size: 100% auto; color: #fff; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 3; font-size: 18px;}

.cus{ padding: 72px 0; }
.cus .bar{ width: 180px; text-align: right; }
.cus .b{ width: 700px; position: relative; z-index: 1; overflow: hidden; }
.cus .b p{ font-size: 18px; }
.cus .b .name{ position: absolute; width: 200px; line-height: 48px; left: 0; bottom: 0; z-index: 3; font-size: 14px; }
.cus .b ul{ transition: transform .4s ease-in-out; overflow: hidden; position: relative; z-index: 1; }
.cus .b li{ width: 700px; min-height: 160px; float: left; box-sizing: border-box; position: relative; z-index: 1; }
.cus .b .cmds{ width: 130px; position: absolute; right: 0; bottom: 0; z-index: 3; text-align: right; }
.cus .b .cmds span{ display: inline-block; margin: 0 4px; width: 48px; height: 48px; border-radius: 48px; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 12px 22px; cursor: pointer; transition: background .3s; }
.cus .b .cmds span:hover{ background-color: #1372FC;}
.cus .b .cmds span.prev{ background-image: url('../images/arrow_gray_left.png');}
.cus .b .cmds span.prev:hover{ background-image: url('../images/arrow_white_left.png');}
.cus .b .cmds span.next{ background-image: url('../images/arrow_gray_right.png'); }
.cus .b .cmds span.next:hover{ background-image: url('../images/arrow_white_right.png'); }

.news { padding: 72px 0; }
.news ul{ margin: 24px 0; width: 1240px; }
.news li{ width: 385px; color: rgba(0, 0, 0, .7); float: left; margin-right: 12px;}
.news li .p{ height: 280px; background-color: #f2f2f2; margin-bottom: 24px;}
.news li .p img{ width: 100%; height: 100%; }
.news h3{ font-size: 18px; color: #000; margin: 12px 0; }

/* 价格 */
.price{ padding: 72px 0; }
.price .tbar{ padding: 48px 0; }
.price .w{ box-sizing: border-box; }
.price .b{ width: 377px; background-color: #f2f5fb; border-radius: 10px; position: relative; z-index: 1; overflow: hidden; float: left; margin-right: 24px; box-sizing: border-box; }
.price .b.b1 .info{ background-color: #f2f3f3; }
.price .b.b2 .info{ background-color: #1757fb; color: #fff; }
.price .b.b3 .info{ background-color: #fad37a; }
.price .b .info{ height: 260px; padding: 48px; font-size: 12px; box-sizing: border-box; }
.price .b .info .i{ font-size: 12px; }
.price .b .info .i em{ font-weight: bold; font-style: normal; }
.price .b .info .i strong{ font-size: 28px; font-weight: bold; margin: 0 8px; }
.price .b .info h3{ font-size: 16px; margin: 12px 0; }
.price .b:last-child{ margin-right: 0; float: right; }
.price .list{ box-sizing: border-box; padding: 48px 0; }
.price .item{ box-sizing: border-box; padding: 8px 48px; }
.price .item .title{ line-height: 32px; font-weight: 400; cursor: pointer; font-size: 14px; }
.price .item .title .ico{ margin-right: 8px; transform: rotate(-90deg);}
.price .item ul{ display: none; }
.price .item.open .ico_arrow_down{ transform: rotate(0); }
.price .item.open ul{ display: block; }
.price .item li{ box-sizing: border-box; padding: 0 32px; line-height: 26px; }

.about .info{ padding: 96px 0;  }
.about .info .t{ width: 460px; }
.about .info .t h3{ font-size: 32px; margin: 16px 0; }
.about .info .p{ width: 500px; }
.about .info .p img{ width: 100%; }
.about .slogan{ display: flex; background-color: #f2f3f3; }
.about .slogan .b{ flex: 1; box-sizing: border-box; padding: 48px; }
.about .slogan .b p{ margin: 8px  0; }
.about .brand{ padding: 72px 0; }
.about .brand .steps{ display: flex; }
.about .brand .item{ flex: 1; padding-right: 36px; }
.about .brand .item .i{ height: 2px; background-color: #1370fc54; margin-bottom: 16px; margin: 16px 0; position: relative; z-index: 1; margin-left: 32px;}
.about .brand .item .i:before{ display: inline-block; content: ' '; width: 20px; height: 20px; position: absolute; z-index: 3; left: -32px; top: -10px; border-radius: 20px; background-color: #1372FC; }
.about .brand .item h3{ font-size: 16px; margin: 16px 0; }
.about .contact{ padding: 72px 0; }
.about .contact li{ width: 48%; float: left; margin-right: 24px; background-color: #fff; }
.about .contact li .p{ height: 344px;}
.about .contact li .p img{ width: 100%; height: 100%; object-fit: cover; }
.about .contact li .b{ box-sizing: border-box; height: 140px; padding: 24px; }
.about .contact li h3{ font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.about .contact li:last-child{ margin-right: 0; float: right; }

.article{ padding: 72px 0;}
.article h1{ font-size: 32px; margin: 16px 0; text-align: center; }
.article .content{ padding: 24px 48px; }
.article .content p{ text-indent: 2em; }

.banner_03{ height: 280px; background: url('../images/banner_03.png') #1372FC center no-repeat; background-size: auto 100%; color: #fff; text-align: center; box-sizing: border-box; padding-top: 80px; }
.banner_03 h2{ font-size: 36px; font-weight: bold; }
.banner_03 p{ font-size: 16px; }
.banner_04{ height: 476px; background: url('../images/banner_bg2.png') #1372FC center no-repeat; background-size: auto 100%; color: #fff; box-sizing: border-box; padding-top: 140px; }
.banner_04 .container{ position: relative; z-index: 1; }
.banner_04 h2{ font-size: 36px; margin-bottom: 32px; }
.banner_04 p{ font-size: 16px; }
.banner_04p{ width: 361px; height: 272px; background: url('../images/banner_3.png') #1372FC center no-repeat; background-size: auto 100%; color: #fff; position: absolute; right: 70px; top: -40px; }

.fn { padding: 30px 0; }
.fn h2{ text-align: center; padding: 48px 0; }
.fn p{ font-size: 14px; }
.fn .p{ box-sizing: border-box; padding: 48px 0; }
.fn .p .qb{ width: 572px; height: 180px; float: left; margin-right: 36px; margin-bottom: 36px; box-sizing: border-box; padding-left: 130px; }
.fn .p .qb .ico{ float: left; margin-left: -100px; }
.fn .p .qb.r{ float: right; margin-right: 0; }

.ebox .box{ background-position: center; background-color: #fff; background-repeat: no-repeat; background-size: auto 100%;  }
.ebox .box1 { height: 663px; background-color: #de0412; background-image: url('../images/box/1.jpg');}
.ebox .box2 { height: 571px; background-color: #de0412; background-image: url('../images/box/2.jpg');}
.ebox .box3 { height: 523px; background-image: url('../images/box/3.jpg');}
.ebox .box4 { height: 571px; background-image: url('../images/box/4.jpg');}
.ebox .box5 { height: 571px; background-image: url('../images/box/5.jpg');}
.ebox .box6 { height: 571px; background-color: #de0412; background-image: url('../images/box/6.jpg');}
.ebox .box7 { height: 571px; background-color: #1a1a1a; background-image: url('../images/box/7.jpg');}
.ebox .box8 { height: 460px; background-image: url('../images/box/8.jpg');}
.ebox .box9 { height: 402px; background-image: url('../images/box/9.jpg');}

.client{ height: 626px; background-position: center; background-repeat: no-repeat; background-size: auto 626px;}
.client8 .t{ height: 119px; background-repeat: no-repeat; background-position: center; background-size: auto 119px; padding: 30px 0}

.clt .btns{ text-align: center; padding-top: 250px;}
.clt .btns .btn{ display: inline-block; width: 163px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: auto 40px; margin: 0 10px; cursor: pointer; }
.clt .tabs{ height:36px; font-size:16px; text-align:center; margin:20px auto;}
.clt .tabs span{ background:#eee; margin-left:2px; display:inline-block; width:130px; height:36px; line-height:36px; cursor:pointer;}
.clt .tabs span.curr{ background:#dfdfdf;}
.clt .pp{ width:960px; height:540px; margin:30px auto; overflow: hidden;}
.clt .pp li{ width:960px; height: 540px; float:left; background-position: center; background-repeat: no-repeat; background-size: 960px 540px;}
.clt .c1{ background-image: url(../images/c1.jpg);}
.clt .c2{ background-image: url(../images/c2.jpg);}
.clt .c3{ background-image: url(../images/c3.jpg);}
.clt .c4{ background-image: url(../images/c4.jpg);}
.clt .c5{ background-image: url(../images/c5.jpg);}
.clt .c6{ background-image: url(../images/c6.jpg);}
.clt .c7{ background-image: url(../images/c7.jpg);}
.clt .c9{ background-image: url(../images/c9.jpg);}
.clt .c10{ background-image: url(../images/c10.jpg);}

.software{ padding: 72px 0; }
.software h2{ text-align: center; margin: 24px 0; }
.software h3{ font-size: 14px; }
.software p{ font-size: 14px; }
.software .p{ box-sizing: border-box; padding: 48px 0; }
.software .p .qb{ width: 220px; height: 308px; float: left; margin-right: 20px; box-sizing: border-box; background-color: #f4f6fb; border-radius: 10px; transition: .3s all; }
.software .p .qb .ico{ display: block; margin: 32px auto; }
.software .p .qb:last-child{ float: right; margin-right: 0; }
.software .p .qb h3{ font-size: 20px; margin-bottom: 24px; }
.software .p .qb:hover{ box-shadow: 0 5px 30px #ccc; }

.modules { padding: 72px 0 96px 0; }
.modules .tab{ width: 528px; }
.modules .tab .qb{ width: 528px; height: 132px; padding: 24px 40px; box-sizing: border-box; user-select: none; }
.modules .tab .qb.curr{ background: url('../images/bg_6.png') center no-repeat; background-size: cover; color: #fff; }
.modules .tab h3{ font-size: 20px; margin-bottom: 10px; }
.modules .tab p{ font-size: 14px; word-break: break-all; }
.modules .p { width: 585px; height: 668px; background: url('../images/bg_7.png') center no-repeat; background-size: cover; }
.modules .p .item{ display: none; text-align: center; }
.modules .p .item.curr{ display: block; }
.modules .p .item img{ margin-top: 90px; width: 500px; }

.clients{ padding: 30px 0; }
.clients h2{ text-align: center;  }
.clients p{ font-size: 14px; }
.clients .p{ box-sizing: border-box; padding: 48px 0; }
.clients .p .qb{ width: 230px; height: 373px; float: left; margin-right: 6px; box-sizing: border-box; transition: .3s all; text-align: center; }
.clients .p .qb:hover{ background: url('../images/bg_8.png') center no-repeat; background-size: cover; }
.clients .p .qb .ico{ display: block; margin: 24px auto; }
.clients .p .qb:last-child{ float: right; margin-right: 0; }
.clients .p .qb h3{ font-size: 20px; margin-top: 48px; margin-bottom: 24px; }

.banner_09{ width:559px; height:344px; background: url('../images/banner_04.png') #1372FC center no-repeat; background-size: auto 100%; color: #fff; position: absolute; right: -30px; top: -80px; }
