/* CSS Document */ /*===========================================通用========================================*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0; } table {border-collapse: collapse; border-spacing: 0;} fieldset,img {border: 0; padding:0px; margin:0px;} ol,ul {list-style: none;} h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size:100%;} body{color:#666;font-family:PingFang SC,MicrosoftYaHei;} a{ color:#333; text-decoration:none;} .fl{ float:left;} .fr{ float:right;} .show{ display:block;} .hide{ display:none;} .cl{ clear:both;} *{ outline:none;} a:hover{ color:#009b4d;} /*=========================================== 首页 全屏banner ========================================*/ .banner{ width:100%; height:670px; overflow:hidden; position:relative;font-size:0; min-width:1300px; z-index:9;} .b-img{ height:500px; position:absolute; left:0; top:0;} .b-img a{ display:block; height:670px; float:left;} .b-list{ height:50px; padding-top:570px; position:relative; margin:0 auto; z-index:9990;} .b-list span{width:150px; height:0px; border:3px solid #b5b8b9;margin:0 5px; _margin:0 3px; display:inline-table;} .b-list .spcss{border:3px solid #222;} .bar-left{ position:absolute; z-index:9990; display:block; width:50px; height:100%; left:0px; background:none; top:0px; } .bar-right{ position:absolute;z-index:9990; display:block; width:50px; height:100%; right:0px; background:none; top:0px; } .bar-left em{ display:block; width:15px; height:30px; background:url(../images/arrow.png) 0px 0px no-repeat; margin:0 auto; margin-top:325px;} .bar-right em{ display:block; width:15px; height:30px; background:url(../images/arrow.png) -15px 0px no-repeat; margin:0 auto; margin-top:325px;} .bar-left .emcss{ background-position:0px -30px;} .bar-right .emcss{ background-position:-15px -30px;} .bannertxt{ max-width:1300px; margin:130px auto 0px auto; position:relative;} .bantxt{max-width:750px; z-index:9990; position:absolute; left:0px; top:0px; padding-left: 20px;} .banben{ display:block;background-image: linear-gradient(to right, rgba(19,115,251,1), rgba(82,171,252,1)); width: 80px; padding:5px 10px;border-radius:20px; color: #fff; text-align: center;} .bannertxt .titletxt{ font-size:60px; line-height:70px; color:#222; display:block;letter-spacing:10px;} .bannertxt .txtsm{ font-size:25px; line-height:40px; display:block;color:rgba(34,34,34,0.9); margin-top:20px;letter-spacing:3px;} .but-k{ position: absolute; left:300px;top:438px; width: 150px; height: 50px; z-index:9999;} .vclose5{ position:absolute; right:25%; top:120px; border-radius:100%; cursor: pointer; } .videos5{ background-color:rgba(0,0,0,0.8); display:none; position: fixed; z-index:99999; left:0%; top:0%; width:100%; height:100%; text-align: center; padding-top:150px;} .imgtit5{ width:150px; height:50px; overflow:hidden;} /* 图片banner */ .banimg{ position:absolute; right: 0px;} /* 登录 */ .dlbox{ height:0px; padding-top:10px; position:relative; margin:0 auto; z-index:9990; max-width: 1300px;} .dengl{ position: absolute; right: 0px; top: 100px; width: 433px; height:450px;} .dltitle{ font-size: 50px; color: #116bea; text-align: center; width: 433px; font-weight:600;letter-spacing:2px;} .dlbj{ width: 433px; height: 380px; background: url(../image/dlbj.png); padding: 20px 0px 0px 0px;} /*鼠标移动弹出*/ #clickMea{ position:relative;} #alerta { width: 400px; height: 150px; text-align: center; background:rgba(255, 255, 255, 0.9); font-size: 18px; position: absolute; display:none; z-index:9999; color:#000; border-radius:10px; font-weight:bold; padding: 20px 10px; } .xcxsm{ width: 190px; font-size: 14px; line-height: 30px;} .xcxtxt{ width: 190px; text-align:left;} .xcxtxt p{ font-size: 14px; line-height: 30px;} .ljgd-but{ margin-top:40px; z-index:9990;} .ljgd-but-l{ background:#0066ff; border:none; text-align:center; width:200px; display:inline-table; line-height:50px; color:#FFF; margin-right:20px;border-radius:3px; font-size:18px;} .ljgd-but-l:hover{ background:#3399ff;border:none;} .ljgd-but-l:focus{ background:#3399ff;border:none;} .ljgd-but-k{ background:none;border:none; text-align:center; width:200px; display:inline-table; line-height:50px; color:#FFF; margin-right:20px; font-size:18px;} .ljgd-but-k:hover{ background:none;border:none;color:#FFF;} .ljgd-but-k:focus{ background:none;border:none;color:#FFF;} .icoimg-gksp{ margin-right:20px;} .gksp{ background: none; border: none; text-align:center; width:200px; display:inline-table; } .gksp span{ margin-right: 10px; font-size: 25px; color: #222;line-height:40px;} .gksp small{line-height:50px; color:#222; font-size:18px;} .banner-img{ position:absolute; left:500px; top:-70px; z-index:1; width:804px; height:628px; } .banner-img2{ position:absolute; left:150px; top:-130px; z-index:1; width:1300px; height:658px; } @media screen and (max-width:1300px) { .banner-img{ display:none;} .banner-img2{ display:none;} } .vclosebut{ position:absolute; right:35%; top:50px; border-radius:100%; cursor: pointer; } .videosbut{ background-color:rgba(0,0,0,0.8); display:none; position: fixed; z-index:99999; left:0%; top:0%; width:100%; height:100%; text-align: center; padding-top:50px;} .sjbox{position:absolute; width:100%; top:620px; z-index:9990; min-width:1300px;} .shuju{ width:100%; position:relative;} .shujubox{ max-width:1300px; margin:0px auto; padding-left: 40px; padding-right: 40px;} .sj{ width:33%;height:20px; line-height:20px; color:#222; font-size:18px; display:inline-block;letter-spacing:3px;} .sj span{ width:30px; text-align:left; display: inline-block; font-size:25px; margin-right: 10px;} .sj1{ text-align:left; border-right:1px solid rgba(0,0,0,0.4);} .sj2{ text-align:center; border-right:1px solid rgba(0,0,0,0.4);} .sj3{ text-align:right;} /*=========================================== end 全屏banner ========================================*/ /*首页申请 视频*/ .rightsq{ width:45%; display: inline-table; float: right;} .leftsp{ width:45%; display: inline-table;} /*普通智能对比*/ .contrastbox{ background:#f2f2f2; padding:0px; width:100%; text-align: center; min-width: 1300px;} .ordinarybox{padding:0px 15px 30px 15px; display: inline-block; width: 40%; height: 150px; vertical-align: middle;} .ordinarybox:hover{border-bottom-left-radius:20px;border-bottom-right-radius:20px;background:rgba(45, 204, 213, 0.1); } .ordinary-title{ font-size:28px; color:#555; margin:0; padding:0px 20px 0 0; height: 80px;display: table-cell;vertical-align: middle;} .ordinarybox:hover .ordinary-title{color:#000;} .ordinary-img1{ margin:0px 10px 0 0; padding:0;display: table-cell;vertical-align: middle;} .ordinary-img1 img{margin:0px; padding:0; width:80px; height:80px;} .ordinary-img2{ margin:0px 10px 0 0; padding:0;display: table-cell;vertical-align: middle;} .ordinary-img2 img{margin:0px; padding:0; width:100px; height:100px;} .formDown{ display:inline-block; padding:0;display: table-cell;vertical-align: middle; height: 120px;} .formDown .fdown{ display:block; margin-left: 10px;} .formDown .down {display:flex; vertical-align:middle;} .formDown .down a{ color:#333; font-size:22px; display:flex; padding:2px 10px;} .formDown .down a:hover{ border-radius:5px; background:rgba(50, 116, 200, 0.6); color:#fff; text-decoration:none; } .ordinary-txt{ font-size:14px; color:#6c6c6c; z-index:98;} .ordinarybox:hover .ordinary-txt{color:#3274c8;} /*=========================================== 解决方案 ========================================*/ .albox{ width:100%; display: block; min-width: 1300px;} .anli-more{ width:100%; text-align:right; display:block; height:50px;} .anli{ width:1300px; margin:50px auto 10px auto; display:block; } .moreico{ width:200px; float:right; font-size:18px; color:#333;} .moreico:hover{color:#0067ed;} .anli-more .icoimg{ font-size:20px; display:inline-table; height:50px; line-height:30px;} /* 解决方案列表 */ .video{position:relative; width:100%;} .videolist { position:relative; width:100%; height:160px;} .imgtit{ width:100%; height:160px; overflow:hidden; border-top-right-radius:5px; border-top-left-radius: 5px;} .news-label{ width:260px; display:block; margin-top: 10px;} .news-label-icon {width:260px; display:block; height:32px;} .iconlabel{ height: 25px; color: #0067ed; padding:0px 10px; line-height:25px; border-bottom:1px solid #4f96f3; border-left:1px solid #4f96f3; border-top:1px solid #4f96f3; display:block; float:left; } .labelxie{ display:block; float:left;} .detail {display:block; width:100%; line-height: 25px; font-size: 18px; color: #222; margin: 10px 0 7px 0px;} .gkbf{ width:250px; height:24px; display:inline-table; } .ljgd-but{ margin-top:40px; z-index:9999;} .gkbf-but-l{ background:#0066ff; float: left; border:none; text-align:center; width:200px; display:inline-table; line-height:50px; color:#FFF; margin-right:20px;border-radius:3px; font-size:18px;} .gkbf-but-l:hover{ background:#3399ff;border:none;} .gkbf-but-l:focus{ background:#3399ff;border:none;} .gkbf-but-k{text-align:center; float: left; width:200px; display:inline-table; line-height:50px; color:#FFF; margin-right:20px; font-size:18px;} .gkbf-but-k:hover{ background:none;border:none;color:#FFF;} .gkbf-but-k:focus{ background:none;border:none;color:#FFF;} .icoimg-gkbf{ margin-right:10px;} /*=========================================== end 解决方案 ========================================*/ /*=========================================== 提高工作效率 ========================================*/ .yingyong{ width:1300px; margin: 80px auto; height: 530px; position:relative; display:block; } .left1box{width:590px; position: absolute; left: 20px; top: 0px;} .lefthead{ width:100%; height:70px; display: block; text-align: left; margin-bottom: 40px;} .headimg{margin-right: 10px; float: left;} .headtitle{line-height: 70px; color: #211f21; font-size: 20px; margin-right: 10px; float: left;} .headbz{ line-height: 70px;color: #9d9d9d; font-size: 14px; float: left;} .left-title{ width: 100%; font-size: 40px; color: #211f21; display: block; margin-bottom: 30px; line-height: 60px;} .left-txt{ width: 100%; font-size: 18px; color: #211f21; display: block; line-height: 35px;} .left-but{ width:100%; display: block; margin-top: 50px;} .but{width: 160px; height: 50px; display: inline-block;line-height: 50px;text-align: center; border-radius:5px; font-size: 18px; font-weight:100;} .butl{ background-color:#116bea; color: #fff;margin-right: 20px;} .buta{ border:1px solid #e7e7e7; color: #211f21;;margin-right: 20px;} .right1box{ position: absolute; right: 20px; top: 0px; width: 660px; height: 514px;} /*=========================================== end 提高工作效率 ========================================*/ /*=========================================== 提升客户关系维护能力 ========================================*/ .jiazhi{ width:1300px; margin: 80px auto; height: 500px; position:relative; display:block;} .left2box{ position: absolute; left: 20px; top: 0px; width: 660px; height: 514px;} .right2box{width:590px; position: absolute; right: 20px; top: 0px;} .butr{ background-color:#28d552; color: #fff;margin-right: 20px;} /*=========================================== end 提升客户关系维护能力 ========================================*/ /*=========================================== 汉武云智慧检车业务管理平台 ========================================*/ .template{padding: 50px 0px 75px 0px;width: 100%;overflow: hidden; height: 750px; min-width: 1300px; background: url(../statics/images/main3-bg.jpg) no-repeat;background-size: 100% 100%; margin-bottom: 60px;} /*=========================================== end 汉武云智慧检车业务管理平台 ========================================*/ /*=========================================== 扫描仪使用场景 ========================================*/ .yingyong1{ width:1300px; margin: 80px auto; height:530px; position:relative; display:block; } .kjtitlecp{ width: 100%; text-align: center; margin: 20px auto; padding-top:30px; } .kjtitlecp span{ display: block; font-size: 32px;text-align: center; color:#211f21; margin: 20px auto; font-weight: 900; width: 1300px;} .kjtitlecp small{ display: block; font-size: 18px;text-align: center; color:#8f9296; margin: 20px auto; margin-bottom:0px; width: 1300px;} /*=========================================== end 扫描仪使用场景 ========================================*/ /*=========================================== 产品价格 ========================================*/ .bjbox{width: 100%; display: block; padding: 50px 0px 50px 0px; height: 905px; min-width: 1300px; text-align: center;} .ktbj{ width: 1300px; margin: 0px auto; text-align: center;} .kjtitle{ width: 100%; text-align: center; margin: 20px 0px;} .kjtitle span{ display: block; font-size: 32px;text-align: center; color:#211f21; margin: 20px 0px; font-weight: 900;} .kjtitle small{ display: block; font-size: 18px;text-align: center; color:#8f9296;margin-bottom: 50px;} .cpbao{ width:1200px; height:646px; margin: 0px auto 60px auto;} .cpbao img{ width: 1200px;height:646px; } /*=========================================== end 产品价格 ========================================*/ /*=========================================== 申请试用 ========================================*/ .sqsy{width: 100%; display: block; padding: 65px 0px 50px 0px;height: 540px; margin-bottom: 60px;background: url(../image/index5_20.jpg) no-repeat; min-width: 1300px;} .sqsybj{ width: 1300px; margin: 30px auto; text-align: center; padding-left: 20px; padding-right: 20px;} .sqsytxt{color: #fff; } .crmtxt{ font-size: 50px; line-height: 50px; } .mftxt{ font-size: 80px; line-height: 90px; font-weight: 900;} .maerwei{ text-align: center; margin: 30px auto; width:142px; height: 142px; } .sqanniu{ text-align: center; margin: 0px auto; width: 250px; height: 50px;} .anniu{ display: block; background-color:#116bea;border-radius:5px; color: #fff; font-size: 23px;letter-spacing:20px; line-height: 50px;} .sysqanniu{ text-align: center; margin: 0px auto; width: 450px; height: 50px;} .sysqanniu100{ text-align: center; margin: 0px auto; width:80%; height: 50px;} /*=========================================== end 申请试用 ========================================*/ /*=========================================== 案例展示 ========================================*/ .alzs{ max-width: 1300px; margin: 20px auto 0px auto; padding:0px 20px 20px 20px;} .allb{box-shadow: 0px 3px 3px #dbdbdb;border-radius:5px; display:inline-table; margin:0px 4px; width:408px; overflow: hidden;} .lbimg{ width: 408px; height: 228px; overflow: hidden;} .lbtxt{ width: 408px; height: 80px; line-height: 80px; padding:0px; text-align: center;} .lbtxt span { width: 350px; line-height: 80px; font-size: 18px;} .lblogo{ max-width: 1300px; display: inline-block; text-align: center;} .logoico{ height: 39px; margin: 10px 20px; float: left; display: block;} .morelogo{ max-width: 1300px; margin: 30px auto 50px auto; text-align: center; display: block;} .morebut{ width: 250px; height: 50px; border: 1px solid #ccc; border-radius:5px; display: block; line-height: 50px; margin: 0px auto;} /*=========================================== end 案例展示 ========================================*/ /*=========================================== 内容页面 ========================================*/ /*=========================================== 内容页面 全屏banner ========================================*/ .con1banner{ margin: 0px auto; width: 100%; height:665px;background:url(../images/pzsqb4_01.jpg) center no-repeat; position:relative; min-width: 1300px;} .con2banner{ margin: 0px auto; width: 100%; height:665px;background:url(../images/wyjc4_01.jpg) center no-repeat; background-size: 100% 100%; position:relative; min-width: 1300px; } .con3banner{ margin: 0px auto; width: 100%; height:665px;background:url(../images/htv8jdc_01.jpg) center no-repeat; position:relative; min-width: 1300px;} .con10banner{ margin: 0px auto; width: 100%; height:665px;background:url(../images/htv8sb_01.jpg) center no-repeat; position:relative; min-width: 1300px;} .con12banner{ margin: 0px auto; width: 100%; height:665px;background:url(../images/htv8qkdny_01.jpg) center no-repeat; position:relative; min-width: 1300px;} .con11banner{ margin: 0px auto; width: 100%; height:665px;background:url(../images/wlwk_01.jpg) center no-repeat; position:relative; min-width: 1300px;} .con4banner{ margin: 0px auto; width: 100%; height:536px;background:url(../images/jjfa1_01.jpg) center no-repeat; position:relative; min-width: 1300px;} .con5banner{ margin: 0px auto; width: 100%; height:536px;background:url(../images/jjfa2_01.jpg) center no-repeat; position:relative; min-width: 1300px;} .con6banner{ margin: 0px auto; width: 100%; height:536px;background:url(../images/jszc_01.jpg) center no-repeat; position:relative; min-width: 1300px;} .con7banner{ margin: 0px auto; width: 100%; height:536px;background:url(../images/gywm_01.jpg) center no-repeat; position:relative; min-width: 1300px;} .con8banner{ margin: 0px auto; width: 100%; height:536px;background:url(../images/alzs_01.jpg) center no-repeat; position:relative; min-width: 1300px;} .con9banner{ margin: 0px auto; width: 100%; height:536px;background:url(../images/new_01.jpg) center no-repeat; position:relative; min-width: 1300px;} /* 物联网卡 左侧文字 */ .banner-img-c{ margin-top:120px; height:459px; position:relative;} .banben{ display:block;background-image: linear-gradient(to right, rgba(19,115,251,1), rgba(82,171,252,1)); width:100px; padding:5px 10px;border-radius:20px; color: #fff; text-align: center;} .banner-left2{max-width:750px; z-index:9990; padding-left: 20px; padding-top: 70px;} .banner-left2 .titletxta{ font-size:60px; line-height:90px; color:rgba(255,255,255,1); display:block;letter-spacing:10px; font-weight: bold;} .banner-left2 .titletxtb{ font-size:40px; line-height:50px; color:rgba(255,255,255,0.7); display:block;letter-spacing:2px; font-weight: bold;} .banner-left2 .txtsm{ font-size:25px; line-height:40px; display:block;color:rgba(255,255,255,0.5); margin-top:20px;letter-spacing:3px;} .gkbf-but-l1{ background:#0066ff; float: left; border:none; text-align:center; display:inline-table; line-height:30px; color:#FFF; margin-right:5px;border-radius:3px; font-size:16px; padding: 0px 8px;} .gkbf-but-l1:hover{ background:#3399ff;border:none;} .gkbf-but-l1:focus{ background:#3399ff;border:none;} /* 导航阴影 */ .bjboxnr{ margin-top: 110px; height: 10px; width: 100%; display: block; box-shadow: 0px 3px 5px rgba(0,0,0,0.08);} .conbanerbox{ height:0px; padding-top:10px; position:relative; margin:0 auto; z-index:9990; width: 1300px;} /* 产品banner文字背景 */ .conbanner-txt{ position: absolute; left: 0px; top: 120px; width: 600px; height:400px; background-color: #fff; border-radius: 8px; padding: 50px 60px;} /* 产品banner文字 */ .conbanner-title{ font-size:50px; color: #000; font-weight:bold; letter-spacing: 3px; margin-bottom: 30px;} .conbanner-h1{ font-size:70px; color: #116bea; font-weight:bold; letter-spacing: 3px; margin-bottom: 30px;} .conbanner-text{ font-size:30px; color: #222; letter-spacing: 3px; line-height: 50px;} /* 解决方案banner文字背景 */ .conbanner-jjal{text-align: center; padding-top: 180px;} /* 内容页banner文字 */ .contitle{ font-size:75px; color: #000; font-weight:bold; margin-bottom:20px; text-align: center; max-width: 1300px;} .context{ font-size:35px; color: #000;text-align: center; max-width: 1300px; margin-bottom: 50px;} /* 流程 */ .jcbj{ width: 100%; background: url("../images/beijing.jpg") no-repeat top center;background-size:100%; display: block; padding-bottom: 30px;} .jczicofont{ width:288px; text-align: center;margin: 5px; height: 178px; float: left; border: 1px #cccccc solid; border-radius:8px; } .jczicofont:hover{ background-color:#2e79ff; border: 1px #0040b3 solid;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;transform: rotateY(180deg);} .jczicofont i{ display: block; margin-top: 15px;line-height: 60px; font-size: 50px; color: #9b9a9a;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .jczicofont:hover i{color: #ffffff;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .jczicofont strong{ display: block; line-height: 50px; font-size: 30px; letter-spacing: 15px; color: #aeaeae;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .jczicofont:hover strong{color: #ffffff;transition:all 1.5s ease;-webkit-transform:all 1.5s ease; transform: rotateY(180deg);} .jczicofont span{ display: block; line-height: 30px; font-size: 16px; letter-spacing: 5px; color: #c1c1c1; transition:all 0.2s ease;-webkit-transform:all 0.4s ease;} .jczicofont:hover span{color: #97b5ff;transition:all 1.8s ease;-webkit-transform:all 1.8s ease; transform: rotateY(180deg);} /* 适用客户 */ .ONE-row_body_list{width:100%; display: inline-block;} .ONE_list_title{font-size:20px;color:#333333;text-align:center;margin-bottom:5px;} .ONE_list_content{font-size:13px;color:#666666;text-align:center;line-height:26px; margin-bottom:50px;} .ONE_list_classification{font-size:13px;color:#666666;text-align:center;line-height:26px;} .ONE_list_classification .ONE_list_classification_list{display:inline-block;width:16.4%;text-align:center;padding:20px 0px;border-right:1px solid #e5e5e5;} .ONE_list_classification .ONE_list_classification_list:hover {background-color:#222222;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;transform: rotateY(180deg); } .ONE_list_classification .ONE_list_classification_list:hover dd {color:#fff;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .ONE_list_classification .ONE_list_classification_list:hover dt {color:#fff;transition:all 1.5s ease;-webkit-transform:all 1.5s ease; transform: rotateY(360deg);} .ONE_list_classification .ONE_list_classification_list:nth-child(1){padding-top:10px;} .ONE_list_classification .ONE_list_classification_list:nth-child(2){padding-top:10px;} .ONE_list_classification .ONE_list_classification_list:nth-child(3){padding-top:10px;border-right:0px;} .ONE_list_classification .ONE_list_classification_list dd{color:#222222;font-size:28px;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .ONE_list_classification .ONE_list_classification_list dt{color:#333;font-size:14px;margin-top:10px;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .TWO-row_body_list{width:49%;display: inline-block;} .TWO-row_body_list .TWO_classification_list:hover{background-color:#116bea;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;transform: rotateY(180deg); } .TWO-row_body_list .TWO_classification_list:hover dd{color:#116bea;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .TWO-row_body_list .TWO_classification_list:hover dt{color:#fff;transition:all 1.5s ease;-webkit-transform:all 1.5s ease; transform: rotateY(360deg);} .TWO-row_body_list .TWO_classification_list:hover p{color:#fff;transition:all 1.5s ease;-webkit-transform:all 1s ease; transform: rotateY(360deg);} .TWO-row_body_list .TWO_classification_list{display:inline-block;width:100%;text-align:center;border-right:1px solid #e5e5e5;padding:20px 0px;} .TWO-row_body_list .TWO_classification_list dd{color:#666666;font-size:50px;transition:all 1s ease;-webkit-transform:all 0.5s ease; background-color: #efefef; border: 1px solid #e1e1e1; border-radius: 50%;margin: 0px auto; padding: 15px 0px; width: 80px;} .TWO-row_body_list .TWO_classification_list dt{color:#000000;font-size:22px;margin-top:15px;transition:all 0.8s ease;-webkit-transform:all 0.5s ease;} .TWO-row_body_list .TWO_classification_list p{color:#999999;font-size:14px;margin-top:5px;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .THREE-row_body_list{width:30%;display: inline-block; height: 150px;} .THREE-row_body_list .THREE_classification_list{display:inline-table;width:100%;text-align:center;padding:0px; height: 100px;} .THREE-row_body_list .THREE_classification_list dd{color:#666666;font-size:50px;transition:all 1s ease;-webkit-transform:all 0.5s ease;} .THREE-row_body_list .THREE_classification_list dt{color:#000000;font-size:22px;margin-top:15px;transition:all 0.8s ease;-webkit-transform:all 0.5s ease;} .THREE-row_body_list .THREE_classification_list i{ font-size:30px;color: #666666; line-height: 100px;} .THREE-row_body_list .THREE_classification_list img{ height:45px; width:45px;} .THREE-row_body_list i{ font-size:50px;color: #666666; line-height: 100px;} .THREE-row_body_list .THREE_classification_list:hover dd{color:#000000;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .THREE-row_body_list .THREE_classification_list:hover dt{color:#999;transition:all 1.5s ease;-webkit-transform:all 1.5s ease; transform: rotateY(360deg);} /* 短信管理 */ .F4-row_body_list{width:49%;display: inline-block; } .F4-row_body_list .F4_classification_list{display:inline-table;width:100%;text-align:center;padding:0px; height: 100px;border-right:1px solid #e5e5e5;} .F4-row_body_list .F4_classification_list .F4-box{ display: flex; margin: 0 auto;} .F4-row_body_list .F4_classification_list .F4-left{color:#ffffff;transition:all 1s ease;-webkit-transform:all 0.5s ease; background-color:#116bea; border: 1px solid #e1e1e1; border-radius: 50%;margin: 0px 40px 0px 80px;width: 100px; height:80px; padding-top:20px;display:inline-block;} .F4-row_body_list .F4_classification_list:hover .F4-left{background-color:#666666;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .F4-row_body_list .F4_classification_list .F4-right{display:inline-block;} .F4-row_body_list .F4_classification_list .F4-right dt{color:#116bea;font-size:28px;margin-top:15px; text-align: left; letter-spacing: 5px;} .F4-row_body_list .F4_classification_list:hover .F4-right dt{color:#000000;font-size:28px;margin-top:15px; text-align: left; letter-spacing: 5px;} .F4-row_body_list .F4_classification_list .F4-right p{color:#999999;font-size:14px;margin-top:15px; text-align: left; letter-spacing: 5px;} .F4-row_body_list .F4_classification_list:hover .F4-right p{color:#000000;font-size:14px;margin-top:15px; text-align: left; letter-spacing: 5px;} .throw-row_body_list{width: 33%;border-right:1px solid #e5e5e5; display: inline-block;} .throw_list_title{font-size:20px;color:#333333;text-align:center;margin-bottom:5px;} .throw_list_content{font-size:13px;color:#666666;text-align:center;line-height:26px; margin-bottom:50px;} .throw_list_classification{font-size:13px;color:#666666;text-align:center;line-height:26px;} .throw_list_classification .throw_list_classification_list{display:inline-block;width:33%;text-align:center;border-right:1px solid #e5e5e5;padding:20px 0px;} .throw_list_classification .throw_list_classification_list:hover {background-color:#222222;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;transform: rotateY(180deg); } .throw_list_classification .throw_list_classification_list:hover dd {color:#fff;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .throw_list_classification .throw_list_classification_list:hover dt {color:#fff;transition:all 1.5s ease;-webkit-transform:all 1.5s ease; transform: rotateY(360deg);} .throw_list_classification .throw_list_classification_list:nth-child(1){padding-top:10px;} .throw_list_classification .throw_list_classification_list:nth-child(2){padding-top:10px;} .throw_list_classification .throw_list_classification_list:nth-child(3){padding-top:10px;border-right:0px;} .throw_list_classification .throw_list_classification_list dd{color:#222222;font-size:28px;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .throw_list_classification .throw_list_classification_list dt{color:#333;font-size:14px;margin-top:10px;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} /* 一键打表 */ .Four-row_body_list{width:24.5%;display: inline-block;} .Four-row_body_list .Four_classification_list:hover{background-color:#116bea;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;transform: rotateY(180deg); } .Four-row_body_list .Four_classification_list:hover dd{color:#116bea;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .Four-row_body_list .Four_classification_list:hover dt{color:#fff;transition:all 1.5s ease;-webkit-transform:all 1.5s ease; transform: rotateY(360deg);} .Four-row_body_list .Four_classification_list:hover p{color:#fff;transition:all 1.5s ease;-webkit-transform:all 1s ease; transform: rotateY(360deg);} .Four-row_body_list .Four_classification_list{display:inline-block;width:100%;text-align:center;border-right:1px solid #e5e5e5;padding:20px 0px;} .Four-row_body_list .Four_classification_list dd{color:#666666;font-size:50px;transition:all 1s ease;-webkit-transform:all 0.5s ease; background-color: #efefef; border: 1px solid #e1e1e1; border-radius: 50%;margin: 0px auto; padding: 15px 0px; width: 80px;} .Four-row_body_list .Four_classification_list dt{color:#000000;font-size:22px;margin-top:15px;transition:all 0.8s ease;-webkit-transform:all 0.5s ease;} .Four-row_body_list .Four_classification_list p{color:#999999;font-size:14px;margin-top:5px;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} /* 预约检车 */ .NO2-row_body_list{width:14%;display: inline-block; height: 150px;} .NO2-row_body_list .NO2_classification_list{display:inline-table;width:100%;text-align:center;padding:0px; height: 100px;} .NO2-row_body_list .NO2_classification_list dd{color:#666666;font-size:50px;transition:all 1s ease;-webkit-transform:all 0.5s ease;} .NO2-row_body_list .NO2_classification_list dt{color:#000000;font-size:22px;margin-top:15px;transition:all 0.8s ease;-webkit-transform:all 0.5s ease;} .NO2-row_body_list .NO2_classification_list i{ font-size:30px;color: #666666; line-height: 100px;} .NO2-row_body_list i{ font-size:50px;color: #666666; line-height: 100px;} .NO2-row_body_list .NO2_classification_list:hover dd{color:#000000;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .NO2-row_body_list .NO2_classification_list:hover dt{color:#fff;transition:all 1.5s ease;-webkit-transform:all 1.5s ease; transform: rotateY(360deg);} /* 客户管理 */ .NO3-row_body_list{width:33%;display: inline-block; } .NO3-row_body_list .NO3_classification_list{display:inline-table;width:100%;text-align:center;padding:0px;border-right:1px solid #e5e5e5;} .NO3-row_body_list .NO3_classification_list dd{color:#666666;font-size:50px;transition:all 1s ease;-webkit-transform:all 0.5s ease;} .NO3-row_body_list .NO3_classification_list dt{color:#666666;font-size:22px;margin-top:15px;transition:all 0.8s ease;-webkit-transform:all 0.5s ease;} .NO3-row_body_list .NO3_classification_list:hover p{color:#999999;transition:all 1.5s ease;-webkit-transform:all 1s ease; transform: rotateY(360deg);} .NO3-row_body_list .NO3_classification_list:hover dd{color:#666666;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .NO3-row_body_list .NO3_classification_list:hover dt{color:#666666;transition:all 1.5s ease;-webkit-transform:all 1.5s ease; transform: rotateY(360deg);} .NO3-row_body_list .NO3_classification_list p{color:#999999;font-size:14px;margin-top:5px;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} /* 短信管理 */ .NO4-row_body_list{width:49%;display: inline-block; } .NO4-row_body_list .NO4_classification_list{display:inline-table;width:100%;text-align:center;padding:0px; height: 100px;border-right:1px solid #e5e5e5;} .NO4-row_body_list .NO4_classification_list .NO4-box{ display: flex; margin: 0 auto;} .NO4-row_body_list .NO4_classification_list .NO4-left{color:#ffffff;transition:all 1s ease;-webkit-transform:all 0.5s ease; background-color: #666666; border: 1px solid #e1e1e1; border-radius: 50%;margin: 0px 40px 0px 80px;width: 100px; height:80px; padding-top:20px;display:inline-block;} .NO4-row_body_list .NO4_classification_list:hover .NO4-left{background-color:#116bea;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .NO4-row_body_list .NO4_classification_list .NO4-right{display:inline-block;} .NO4-row_body_list .NO4_classification_list .NO4-right dt{color:#666666;font-size:28px;margin-top:15px; text-align: left; letter-spacing: 5px;} .NO4-row_body_list .NO4_classification_list:hover .NO4-right dt{color:#000000;font-size:28px;margin-top:15px; text-align: left; letter-spacing: 5px;} .NO4-row_body_list .NO4_classification_list .NO4-right p{color:#999999;font-size:14px;margin-top:15px; text-align: left; letter-spacing: 5px;} .NO4-row_body_list .NO4_classification_list:hover .NO4-right p{color:#000000;font-size:14px;margin-top:15px; text-align: left; letter-spacing: 5px;} /* 收费管理 */ .NO5-row_body_list{width:33%;display: inline-block; } .NO5-row_body_list .NO5_classification_list{display:inline-table;width:100%;text-align:center;padding:0px;border-right:1px solid #e5e5e5;} .NO5-row_body_list .NO5_classification_list dd{color:#666666;font-size:50px;transition:all 1s ease;-webkit-transform:all 0.5s ease; background-color: #efefef; border: 1px solid #e1e1e1; border-radius: 50%;margin: 0px auto; padding: 15px 0px; width: 80px;} .NO5-row_body_list .NO5_classification_list dt{color:#666666;font-size:22px;margin-top:15px;transition:all 0.8s ease;-webkit-transform:all 0.5s ease;} .NO5-row_body_list .NO5_classification_list:hover p{color:#999999;transition:all 1.5s ease;-webkit-transform:all 1s ease; transform: rotatex(360deg);} .NO5-row_body_list .NO5_classification_list:hover dd{color:#666666;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotatey(360deg);} .NO5-row_body_list .NO5_classification_list:hover dt{color:#000000;font-size:22px;margin-top:15px;transition:all 1.5s ease;-webkit-transform:all 1s ease; transform: rotatex(360deg);} .NO5-row_body_list .NO5_classification_list p{color:#999999;font-size:14px;margin-top:5px;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .NO5-row_body_list .NO5_classification_list dd{color:#666666;font-size:50px;transition:all 1s ease;-webkit-transform:all 0.5s ease; background-color: #efefef; border: 1px solid #e1e1e1; border-radius: 50%;margin: 0px auto; padding: 15px 0px; width: 80px;} .NO5-row_body_list .NO5_classification_list:hover dd{color:#666666;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotatey(360deg);} /* 充值消费 */ .NO6-row_body_list{width:33%;display: inline-block; } .NO6-row_body_list .NO6_classification_list{display:inline-table;width:100%;text-align:center;padding:0px; height: 100px;border-right:1px solid #e5e5e5;} .NO6-row_body_list .NO6_classification_list .NO6-box{ display: flex; margin: 0 auto;} .NO6-row_body_list .NO6_classification_list .NO6-left{color:#ffffff;transition:all 1s ease;-webkit-transform:all 0.5s ease; background-color: #666666; border: 1px solid #e1e1e1; border-radius: 50%;margin: 0px 40px 0px 80px;width: 80px; height:70px; padding-top:10px;display:inline-block;} .NO6-row_body_list .NO6_classification_list .NO6-left span{font-size: 55px; color: #ffffff;} .NO6-row_body_list .NO6_classification_list:hover .NO6-left{background-color:#116bea;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .NO6-row_body_list .NO6_classification_list .NO6-right{ display:inline-block;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotatex(360deg);} .NO6-row_body_list .NO6_classification_list .NO6-right dt{color:#666666;font-size:28px;margin-top:15px; text-align: left; letter-spacing: 5px;} .NO6-row_body_list .NO6_classification_list:hover .NO6-right dt{color:#116bea;font-size:28px;margin-top:15px; text-align: left; letter-spacing: 5px;transition:all 1.5s ease;-webkit-transform:all 1s ease; transform: rotatex(360deg);} .NO6-row_body_list .NO6_classification_list .NO6-right p{color:#999999;font-size:14px;margin-top:15px; text-align: left; letter-spacing: 5px;} .NO6-row_body_list .NO6_classification_list:hover .NO6-right p{color:#116bea;font-size:14px;margin-top:15px; text-align: left; letter-spacing: 5px;transition:all 1.5s ease;-webkit-transform:all 1s ease; transform: rotatex(360deg);} /* 系统设置 */ .NO8_classification_list{display:inline-table;width:100%;text-align:center;padding:0px;} .NO8_classification_list dd{color:#666666;font-size:80px;transition:all 1s ease;-webkit-transform:all 0.5s ease; background-color: #efefef; border: 1px solid #e1e1e1; border-radius: 50%;margin: 0px auto; padding: 15px 0px; width: 110px; text-align: center;} .NO8_classification_list:hover dd{color:#666666;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotatey(360deg);} .NO8_classification_list img{ margin: 0px auto;} .NO8_classification_list .NO8-box{ width: 14.2%; display: inline-block;} .NO8_classification_list .NO8-box strong{ color:#666666;font-size:50px;transition:all 1s ease;-webkit-transform:all 0.5s ease; margin: 10px auto 0px auto; display: block; font-weight: normal;} .NO8_classification_list .NO8-box:hover strong{color:#666666;transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotatey(360deg);} .NO8_classification_list .NO8-box span{color:#666666;font-size:18px; display: block; text-align:center; background: #ededed; border-radius: 100px; margin: 10px auto 0px auto; width: 80px;} .NO8_classification_list .NO8-box:hover span{color:#000000;transition:all 1.5s ease;-webkit-transform:all 1s ease; transform: rotatex(360deg);} /* 预约流程 */ /* NO1 */ .wyjcNO1{margin: 0px auto; padding-top: 50px; padding-bottom: 20px; display: block;} .wyjcNO1 .wyjcNO1-BOX{ display: block;transition:all 3s ease;-webkit-transform:all 3s ease; } .wyjcNO1:hover .wyjcNO1-BOX{transition:all 1.5s ease;-webkit-transform:all 1.5s ease;transform: rotateY(360deg);} .wyjcNO1 .wyjcNO1-BOX dd{transition:all 0.5s ease;-webkit-transform:all 0.5s ease; margin: 10px auto 0px auto; display: block; text-align: center;} .wyjcNO1 .wyjcNO1-BOX dd:hover{transition:all 2.5s ease;-webkit-transform:all 2.5s ease;transform: rotateY(360deg);} .wyjcNO1 .wyjcNO1-BOX dt{display: block; margin: 10px auto 0px auto;transition:all 0.8s ease;-webkit-transform:all 0.8s ease;} .wyjcNO1 .wyjcNO1-BOX dt:hover{transition:all 2s ease;-webkit-transform:all 2s ease;transform: rotateX(360deg);} @keyframes warn { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(0.8); opacity: 0.7; } 50% { transform: scale(1); opacity: 0.9; } 75% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .processimgv1-1 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: warn 8s ease-out; -moz-animation: warn 8s ease-out; animation: warn 8s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv1-2 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: warn 10s ease-out; -moz-animation: warn 10s ease-out; animation: warn 10s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* 线1 */ .wyjcXIAN1{margin: 0px auto; display: block;} .wyjcx1{display: inline-block; white-space: nowrap; position: absolute; text-align: center; margin: 0px auto; } .wyjcx1.active{animation:wyjcx1 2s linear infinite;} @keyframes wyjcx1{ 0% { transform: translateY(-10px); } 25% { transform: translateY(0px); } 50% { transform: translateY(10px); } 75% { transform: translateY(0px); } 100% { transform: translateY(-10px); } } /* NO2 */ .wyjcNO2{margin: 0px auto; display: block; position: relative;} .wyjcNO2.wyjcNO2-BOX{ margin: 0px; width:1300px;} .processimgv2-1{ margin-top:180px; position: relative; z-index: 990;} @keyframes processimgv2-1 { 0% { opacity: 1; } 25% { opacity: 0.3; } 50% { opacity: 0.5; } 75% { opacity: 0.3; } 100% { opacity: 1; } } .processimgv2-1 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv2-1 8s ease-out; -moz-animation: processimgv2-1 8s ease-out; animation: processimgv2-1 8s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv2-2{ top: -135px; position:absolute; z-index: 991; left:390px;} @keyframes processimgv2-2 { 0% { transform: scale(1); } 25% { transform: scale(0.9); } 50% { transform: scale(1); } 75% { transform: scale(0.9); } 100% { transform: scale(1); } } .processimgv2-2 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv2-2 8s ease-out; -moz-animation: processimgv2-2 8s ease-out; animation: processimgv2-2 8s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv2-3{ top: 260px; position:absolute; z-index: 991; right: 420px;} @keyframes processimgv2-3 { 0% { transform: scale(1); } 25% { transform: scale(0.9); } 50% { transform: scale(1.1); } 75% { transform: scale(0.9); } 100% { transform: scale(1); } } .processimgv2-3 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv2-3 10s ease-out; -moz-animation: processimgv2-3 10s ease-out; animation: processimgv2-3 10s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv2-4{ top: 300px; position:absolute; z-index: 992; right: 430px;} .processimgv2-5{ top: 285px; position:absolute; z-index: 992; right: 370px;} .processimgv2-6{ top: 230px; position:absolute; z-index: 993; right: 340px; animation: processimgv2-6 2s ease-in-out infinite;} @keyframes processimgv2-6 { 0% { transform: rotate(-20deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(-20deg); } } .processimgv2-6::before { content: ""; position: absolute; top:25%; right:0px; transform: rotate(0deg); } .processimgv2-7{ top:170px; position:absolute; z-index: 992; right: 440px;} .processimgv2-8{ top:195px; position:absolute; z-index: 990; right: 520px;} .processimgv2-9{ top:140px; position:absolute; z-index: 992; left: 360px;} .processimgv2-10{ top:60px; position:absolute; z-index: 993; left: 420px;} .processimgv2-11{ top:110px; position:absolute; z-index: 992; left:240px;} .processimgv2-12{ top:280px; position:absolute; z-index: 992; left:150px;} @keyframes processimgv2-12 { 0% { transform: scale(1); } 25% { transform: scale(0.9); } 50% { transform: scale(1.2); } 75% { transform: scale(0.9); } 100% { transform: scale(1); } } .processimgv2-12 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv2-12 12s ease-out; -moz-animation: processimgv2-12 12s ease-out; animation: processimgv2-12 12s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv2-13{ top:0px; position:absolute; z-index: 992; right: 180px; animation: processimgv2-13 2s ease-in-out infinite;} @keyframes processimgv2-13 { 0% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } } .processimgv2-13::before { content: ""; position: absolute; top:0%; right:0px; transform: rotate(0deg); } .processimgv2-14{ top:-100px; position:absolute; z-index: 992; left: 230px;} @keyframes processimgv2-14 { 0% { transform: scale(1.2); } 25% { transform: scale(1); } 50% { transform: scale(1.4); } 75% { transform: scale(1); } 100% { transform: scale(1.2); } } .processimgv2-14 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv2-14 5s ease-out; -moz-animation: processimgv2-14 5s ease-out; animation: processimgv2-14 5s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* 线2 */ .wyjcXIAN2{margin:0px auto; display: block;} .wyjcx2{display: inline-block;white-space: nowrap;} .wyjcx2.active{animation:wyjcx2 5s linear infinite;} @keyframes wyjcx2{ 0% { transform: translateY(-60px); } 25% { transform: translateY(-45px); } 50% { transform: translateY(-30px); } 75% { transform: translateY(-45px); } 100% { transform: translateY(-60px); } } /* NO3 */ .wyjcNO3{display: block; position: relative; width: 1300px; margin: 0px auto; height:310px;} .wyjcNO3-BOX1{ width: 410px; height:230px; position: absolute; left: 50px; top: 0px;} .processimgv3-1{ position: relative; z-index: 990; display: inline-block;} @keyframes processimgv3-1 { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } .processimgv3-1 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv3-1 8s ease-out; -moz-animation: processimgv3-1 8s ease-out; animation: processimgv3-1 8s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv3-2{ position: absolute; z-index: 991; top:40px; left: 30px; } @keyframes processimgv3-2 { 0% { transform: scale(1.1); } 25% { transform: scale(1); } 50% { transform: scale(1.2); } 75% { transform: scale(1); } 100% { transform: scale(1.1); } } .processimgv3-2 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv3-2 5s ease-out; -moz-animation: processimgv3-2 5s ease-out; animation: processimgv3-2 5s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv3-3{display: inline-block;white-space: nowrap; position: absolute; z-index: 991; top:70px; left:190px; } .processimgv3-3.active{animation:processimgv3-3 2s linear infinite;} @keyframes processimgv3-3{ 0% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 100% { transform: translateX(-5px); } } .processimgv3-4{ position: absolute; z-index: 991; top:40px; right: 50px; } @keyframes processimgv3-4 { 0% { transform: scale(1.1); } 25% { transform: scale(1); } 50% { transform: scale(1.2); } 75% { transform: scale(1); } 100% { transform: scale(1.1); } } .processimgv3-4 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv3-4 3s ease-out; -moz-animation: processimgv3-4 3s ease-out; animation: processimgv3-4 3s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .wyjcNO3-BOX2{ width: 410px; height: 400px; position: absolute; left: 395px; top: -90px;} .processimgv3-5{ position: relative; z-index: 990; display: inline-block;} .processimgv3-6{ position: absolute; z-index: 991; top: 20px; left:90px;} @keyframes processimgv3-6 { 0% { transform: scale(1.2); } 25% { transform: scale(1); } 50% { transform: scale(1.4); } 75% { transform: scale(1); } 100% { transform: scale(1.2); } } .processimgv3-6 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv3-6 3s ease-out; -moz-animation: processimgv3-6 3s ease-out; animation: processimgv3-6 3s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv3-7{ position: absolute; z-index: 991; top: 85px; left:125px;} @keyframes processimgv3-7 { 0% { transform: scale(1.1); } 25% { transform: scale(1); } 50% { transform: scale(1.2); } 75% { transform: scale(1); } 100% { transform: scale(1.1); } } .processimgv3-7 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv3-7 5s ease-out; -moz-animation: processimgv3-7 5s ease-out; animation: processimgv3-7 5s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .wyjcNO3-BOX3{ width: 410px; height:230px; position: absolute; right:150px; top: 0px;} .processimgv3-8{ position: relative; z-index: 990; display: inline-block;} .processimgv3-9{ position: absolute; z-index: 991; bottom: 46px; left:155px;} .processimgv3-10{ position: absolute; z-index: 991; bottom:100px; left:50px;} @keyframes processimgv3-10 { 0% { transform: scale(1.1); } 25% { transform: scale(1); } 50% { transform: scale(1.2); } 75% { transform: scale(1); } 100% { transform: scale(1.1); } } .processimgv3-10 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv3-10 3s ease-out; -moz-animation: processimgv3-10 3s ease-out; animation: processimgv3-10 3s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv3-11{ position: absolute; z-index: 991; bottom:90px; left:140px;display: inline-block;white-space: nowrap; } .processimgv3-11.active{animation:processimgv3-11 2s linear infinite;} @keyframes processimgv3-11{ 0% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 100% { transform: translateX(-5px); } } /* 线3 */ .wyjcXIAN3{margin:0px auto; display: block; height: 230px;} .wyjcx3{display: inline-block;white-space: nowrap;} .wyjcx3 .wyjcx3_1{ margin: 0px auto;} .wyjcx3 .wyjcx3_2{ margin: 0px auto;} .wyjcx3.active{animation:wyjcx3 5s linear infinite;} @keyframes wyjcx3{ 0% { transform: translateY(-10px); } 25% { transform: translateY(-5px); } 50% { transform: translateY(5px); } 75% { transform: translateY(-5px); } 100% { transform: translateY(-10px); } } /* NO4 */ .wyjcNO4{display: block; width: 1300px; margin: 0px auto; height: 830px;} .wyjcNO4-BOX1{position: absolute; left: 50px; top: 0px;} .processimgv4-0{ border:3px solid #1e6fff; display: block; background: url("../images/yuyueimg37.jpg");} .BOX_img1{ margin: 0px auto; position: relative; z-index: 990;} .BOX_img2{ z-index: 991; top:5px; left:0px; position: relative;} @keyframes BOX_img2 { 0% { transform: scale(1.1); } 25% { transform: scale(1); } 50% { transform: scale(1.2); } 75% { transform: scale(1); } 100% { transform: scale(1.1); } } .BOX_img2 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: BOX_img2 3s ease-out; -moz-animation: BOX_img2 3s ease-out; animation: BOX_img2 3s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .BOX_img3{ z-index: 991; position: relative;} @keyframes BOX_img3 { 0% { transform: scale(1.1); } 25% { transform: scale(1); } 50% { transform: scale(1.2); } 75% { transform: scale(1); } 100% { transform: scale(1.1); } } .BOX_img3 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: BOX_img3 1s ease-out; -moz-animation: BOX_img3 1s ease-out; animation: BOX_img3 1s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .wyjcNO4-BOX2{position: absolute; left:425px; top:310px; text-align: center;} .imgv4{ margin: 0px auto; width: 375px;} .processimgv4-0-1{ display: inline-block;white-space: nowrap;} .processimgv4-0-1.active{animation:processimgv4-0-1 2s linear infinite;} @keyframes processimgv4-0-1{ 0% { transform: translateX(-10px); } 50% { transform: translateX(5px); } 100% { transform: translateX(-10px); } } .processimgv4-0-2{display: inline-block; margin: 0px 40px;} .processimgv4-0-3{ display: inline-block;white-space: nowrap;} .processimgv4-0-3.active{animation:processimgv4-0-3 2s linear infinite;} @keyframes processimgv4-0-3{ 0% { transform: translateX(5px); } 50% { transform: translateX(-10px); } 100% { transform: translateX(5px); } } .wyjcNO4-BOX3{position: absolute; right:150px; top: 0px;} /* NO5 */ .wyjcNO5{margin: 0px auto;display: block;} .wyjcNO5.wyjcNO5-BOX{ display: block; margin-top: 20PX;} .wyjcNO5.wyjcNO5-BOX dd{margin:0px auto; display: block; text-align: center;} /* 线4 */ .wyjcXIAN4{margin:0px auto; display: block; height: 100PX;} .wyjcx4{display: inline-block;white-space: nowrap;} .wyjcx4.active{animation:wyjcx4 5s linear infinite;} @keyframes wyjcx4{ 0% { transform: translateY(0px); } 50% { transform: translateY(30px); } 100% { transform: translateY(0px); } } /* NO6 */ .wyjcNO6{margin: 0px auto; display: block; position: relative;} .wyjcNO6 .wyjcNO6-BOX{ margin: 0px; display: block;} .processimgv6-0{ margin: 0px; padding: 0px;border: 3px solid #1e6fff; width: 1159px;} .processimgv6-1{ margin: 0px; padding: 0px;} .processimgv6-1 img{margin: 0px; padding: 0px; position: relative; z-index: 990;display: block;} .processimgv6-2{bottom: 168px; right: 210px; position:absolute; z-index: 991;} @keyframes processimgv6-2 { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .processimgv6-2 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv6-2 4s ease-out; -moz-animation: processimgv6-2 4s ease-out; animation: processimgv6-2 4s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv6-3{bottom: 98px; right: 272px; position:absolute; z-index: 991;} @keyframes processimgv6-3 { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .processimgv6-3 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv6-3 2s ease-out; -moz-animation: processimgv6-3 2s ease-out; animation: processimgv6-3 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .processimgv6-4{bottom:0px; right: 392px; position:absolute; z-index: 991;} @keyframes processimgv6-4 { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .processimgv6-4 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv6-4 1s ease-out; -moz-animation: processimgv6-4 1s ease-out; animation: processimgv6-4 1s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* 线5 */ .wyjcXIAN5{margin:0px auto; display: block; height: 100PX;} .wyjcx5{display: inline-block;white-space: nowrap;} .wyjcx5.active{animation:wyjcx5 2s linear infinite;} @keyframes wyjcx5{ 0% { transform: translateY(0px); } 50% { transform: translateY(30px); } 100% { transform: translateY(0px); } } /* NO7 */ .wyjcNO7{margin: 0px auto;display: block;} .wyjcNO7.wyjcNO7-BOX{ display: block; margin-top: 20PX;} .wyjcNO7.wyjcNO7-BOX dd{margin:0px auto; display: block; text-align: center;} /* NO8 */ .wyjcNO8{margin: 0px auto;display: block;} .wyjcNO8.wyjcNO8-BOX{ display: block; margin-top: 20PX;} .processimgv8-1{ width: 287px; display: inline-block; margin-right: 30px; animation: processimgv8-1 2s ease-in-out infinite;} @keyframes processimgv8-1 { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } .processimgv8-1::before { content: ""; position: absolute; top:25%; right:0px; transform: rotate(0deg); } .processimgv8-2{ width: 843px; display: inline-block;} @keyframes processimgv8-2 { 0% { transform: scale(0.9); } 50% { transform: scale(1.05); } 100% { transform: scale(0.9); } } .processimgv8-2 { background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; -webkit-animation: processimgv8-2 2s ease-out; -moz-animation: processimgv8-2 2s ease-out; animation: processimgv8-2 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } /*=========================================== end 内容页面 全屏banner ========================================*/ /*========================================= 产品 流程 ========================================*/ .cplc{ margin: 0px auto; width: 100%; background-color:#116bea; height: 300px; position: relative; min-width: 1300px;} .cplc-pz{ margin: 0px auto; width: 1300px; } /*=========================================== end 产品 流程 ========================================*/ /*========================================= 产品pzsqb ========================================*/ .left1boxyy{position: absolute; left: 20px; top: 0px; width: 580px; height: 530px;} .left1boxyy img{ width: 580px; height: 530px; } .right1boxyy{width:610px; position: absolute; right: 20px; top: 0px;} .alboxh{ width:100%; display: block; background-color: #f7f9fb; min-width: 1300px;} .right2boxyy{position: absolute; right: 20px; top: 0px; width: 580px; height: 530px;} .right2boxyy img{ width: 580px; height: 530px; } .left2boxyy{width:610px; position: absolute; left: 20px; top: 0px;} .leftyy-title{ width: 100%; font-size: 60px; color: #211f21; display: block; margin-bottom: 40px; line-height: 100px; margin-top: 50px; font-weight: bold;} .leftyy-txt{ width: 100%; font-size: 30px; color: #211f21; display: block; line-height: 60px; font-weight: 300;} /*=========================================== end 产品pzsqb ========================================*/ /*=========================================== 申请试用 产品 ========================================*/ .cpsqsy1{width: 100%; display: block; padding: 65px 0px 50px 0px;background: url(../images/pzsqb4_16.jpg)center center no-repeat; height: 520px; margin-bottom: 60px; min-width: 1300px; text-align: center; margin: 0px auto;} .cpsqsy2{width: 100%; display: block; padding: 65px 0px 50px 0px;background: url(../images/wyjc1_16.jpg)center center no-repeat; height: 520px; margin-bottom: 60px; min-width: 1300px; text-align: center; margin: 0px auto;} .cpsqsy3{width: 100%; display: block; padding: 65px 0px 50px 0px;background: url(../images/htv8jdc_22.jpg)center center no-repeat; height: 520px; margin-bottom: 60px; min-width: 1300px; text-align: center; margin: 0px auto;} .cpsqsy4{width: 100%; display: block; padding: 65px 0px 50px 0px;background: url(../images/htv8jdc_222.jpg)center center no-repeat; height: 520px; margin-bottom: 60px; min-width: 1300px; text-align: center; margin: 0px auto;} .cpsqsybj{ width: 1300px; margin: 30px auto; text-align: center; margin: 0px auto;} .cpsqsytxt{color: #fff; padding-left: 20px; padding-right: 20px;} .cpcrmtxt{ font-size: 50px; line-height: 50px; margin-bottom: 30px;} .cpmftxt{ font-size: 100px; line-height: 120px; font-weight: bold; margin-bottom: 10px;} .cpmtxt{ font-size: 30px; line-height: 50px; margin-bottom: 30px; letter-spacing:10px;} .sqanniu{ text-align: center; margin: 0px auto; width: 250px; height: 50px;} .anniu{ background-color:#116bea;border-radius:5px; color: #fff; font-size: 23px;line-height: 50px; letter-spacing:15px; } .anniu:hover{ color: #22d739; } @media screen and (max-width:1000px) { .zixunlb{width:30%;} .sqsy{padding: 35px 20px 50px 20px;} .cpsqsy1{padding: 35px 20px 50px 20px;} .cpsqsy2{padding: 35px 20px 50px 20px;} .cpsqsy3{padding: 35px 20px 50px 20px;} .sqsybj{ margin: 10px auto;} .crmtxt{ font-size:80px; line-height: 80px; } .mftxt{ font-size: 100px; line-height: 110px;} .cpcrmtxt{ font-size: 50px; line-height: 50px; margin-bottom: 30px;} .cpmftxt{ font-size: 100px; line-height: 160px; font-weight: bold; margin-bottom:10px;} .cpmtxt{ font-size: 30px; line-height: 50px; margin-bottom: 30px; letter-spacing:5px;} } /*=========================================== end 申请试用 产品 ========================================*/ /*=========================================== 产品 介绍 ========================================*/ .jieshao{ max-width: 1300px; margin: 30px auto; text-align: center; margin-bottom: 60px; padding-left: 50px; padding-right: 50px;} .jstitle{ margin: 0px auto; text-align: center; font-weight: bold; font-size: 50px; color: #222; } .jcztxt{ margin: 5px auto 0px auto; text-align: center; font-size: 22px; color: #C4C4C4; } .jstext{ margin: 20px auto 30px auto; text-align: center; color: #999; font-size:30px; font-weight: 300; line-height: 60px; } /*=========================================== end 产品 介绍 ========================================*/ /*=========================================== 解决方案 ========================================*/ /* 解决方案banner文字 */ .conbanner-jjal-al{text-align: center; padding-top: 150px;} .contitle-jjal{ font-size:60px; color: #000; font-weight:bold; text-align: center; max-width: 1300px; line-height: 80px; padding-left: 20px; padding-right: 20px;} .context-jjal{ font-size:35px; color: #000;text-align: center; max-width: 1300px; margin-bottom: 50px;} /* end 解决方案banner文字 */ .leftjjtitle{ width: 100%; font-size:40px; color: #211f21; display: block; margin-bottom: 20px; line-height: 100px; margin-top:20px; font-weight: bold;} .leftjj{ width: 100%; display: block; background-color: #ccc; } .jjfa-pag-left1{ width: 47%; float: left; margin-bottom: 40px;} .jjfa-pag-right1{ width: 47%; float: right; margin-bottom: 40px;} .jjfa-pag-left2{ width: 47%; float: left;} .jjfa-pag-right2{ width: 47%; float: right;} .jjfaico{ height: 160px; width:22%; float: left;} .jjfaico span{border-radius: 50%; text-align: center;padding:10px; font-size: 30px; color: #fff; line-height: 50px; background-color: #116bea;} .jjfa-pag-text{ width:78%; float: right;} .jjfa-pag-text h1{ font-size: 30px; color: #116bea; line-height: 50px; margin-bottom: 10px; font-weight: 800;} .jjfa-pag-text p{ font-size: 18px; color: #222; line-height: 30px; font-weight: 400;} .xllc{ max-width: 1300px; margin: 0px auto; text-align: center; padding-bottom: 80px; padding-top: 80px;} /*=========================================== end 解决方案 ========================================*/ /*=========================================== 技术支持 ======================================*/ /*下载*/ .xzbox{ max-width: 1300px; margin: 0px auto; text-align: center; padding-bottom:30px; position: relative;} .jsxz{ width: 42%; border-radius: 15px; display: inline-block; margin:0px 8px; padding: 50px 40px 30px 40px; margin-top:-35px; position: relative;} .jsxz:hover{box-shadow: 0px 0px 10px rgba(0,0,0,0.3); background-color:rgba(255,255,255,1);} .jsxz .imgxz{ margin: 0px auto; text-align: center; height: 150px; position: relative;} .jsxz .imgxz1{background: url(../images/jszc_04.png) no-repeat; width: 300px; height: 150px; margin: 0px auto;} .jsxz:hover .imgxz1{background: url(../images/jszc_04-1.png) no-repeat; } .jsxz .imgxz2{background: url(../images/jszc_06.png) no-repeat; width: 300px; height: 150px; margin: 0px auto;} .jsxz:hover .imgxz2{background: url(../images/jszc_06-1.png) no-repeat;} .xztitle{ width: 100%; margin-bottom: 20px; text-align:center; margin-top: 30px;} .xztitle strong{ font-size: 25px; color: #222;} .xztxt{ text-align:center; color:#777; line-height: 40px;} .xztxt p{ font-size:20px;} .xzbut{ width: 100%; text-align: center; margin-top:20px;} /* end 下载*/ /* 咨询*/ .zixunbox{margin: 0 auto; display: block; width: 100%; min-width: 1300px;} .zixun{ max-width: 1300px; margin: 20px auto;} .zixunlbbox{ width: 100%; padding: 0px 100px;} .zixunlb{border-radius:15px;margin:0px 4px; width:30%; border: solid 1px #dedede; display:inline-table;} .zxbox{ margin: 40px auto; width: 70%;} .zixunimg{ width: 110px; height: 110px; margin: 0px auto; background-color:#efefef; border-radius: 50%; display: block; border:solid 1px #e3e3e3;} .zximg{ margin:10px auto; width: 100px; height: 100px; text-align: center;} .zximg span{line-height: 100px; text-align: center; margin: 0px auto;} .icozx1{ color: #2dc840; font-size: 90px; } .icozx2{ color: #755acf; font-size: 85px; } .icozx3{ color: #1b6ee7; font-size: 95px; } .zixuntitle{ font-size: 35px; line-height: 50px; color: #222;text-align: center; margin-top: 20px; font-weight:500;} .zixuntxt{ text-align: center; margin-top:2px;} .zixuntxt strong{ text-align: center; font-size: 26px; color: #222;display: block; font-weight: 400;} .zixuntxt span{ font-size: 18px; color: #999; display: block; margin-top: 10px;} .zixunbut{ text-align: center; margin: 20px auto 20px auto; display: block;} .zxbut{ text-align: center; font-size: 20px; color: #fff; width: 150px; height: 50px; line-height: 50px; background-color: #116bea; border: none; border-radius: 5px;} /* end 咨询*/ /*合作伙伴申请、权限管理流程*/ .jslc{ max-width: 1300px; margin: 0px auto; text-align: center; padding-bottom:50px; padding-top: 80px;} /* end 合作伙伴申请、权限管理流程*/ /*常见问题*/ .jswtbox{ max-width: 1300px; margin: 0px auto; text-align: center; padding-bottom:60px;} .jswt{ width: 42%; border-radius: 15px; display: inline-block; margin: 0px 8px; padding: 30px 40px;/* box-shadow: 0px 0px 5px #888888;*/ margin-top:40px; border: 1px solid #d9d9d9;} .wttitle{ width: 100%; margin-bottom: 30px; text-align: left;} .wttitle span{ font-size: 30px; color: #c1c5ce; margin-right:10px;} .wttitle strong{ font-size: 25px; color: #222;} .wttxt{ text-align: left; color:#777; line-height: 40px;} .wttxt p{ font-size:20px;} /* end 常见问题*/ /*=========================================== end 技术支持 =======================================*/ /*=========================================== 关于我们 =======================================*/ /*== 介绍 ==*/ .gywm{ width:1300px; margin:50px auto 50px auto; display:block; height: 860px;} .gywmimg{ width:652px; float: left; margin-left: 20px;} .gytxt{ width: 520px; float: right; margin-right: 20px;} .gytxt strong{ margin-top: 40px; font-size:35px; color:#222; font-weight: 500; display: block; margin-bottom:20px;} .gytxt p{ display: block; font-size:18px; line-height:38px; color: #666;} /*== end 介绍 ==*/ /*== 咨询申请试用 ==*/ .zxsqsybox{ width: 100%; background-color: #116bea; display: block; height: 238px; min-width: 1300px;} .zxsqsy{ width:1300px; margin:50px auto 0px auto; display:block; padding-left: 20px; padding-right: 20px;} .zxsqbox{text-align: center;} .zxsqsy h1{ font-size:45px; color: #fff; line-height:70px; text-align: left; justify-content:center; margin-top: 50px; float: left; display: inherit; letter-spacing: 10px;} .zxsqsyimg{ float: left;display: inherit;} .zxsqsybut{ width: 300px; height: 50px; border:solid 2px #fff; margin-top: 95px; float: right; color: #fff; letter-spacing: 10px; font-size: 23px; line-height: 46px; margin-right: 40px;} .zxsqsybut:hover{color:#ccc;} /*== end 咨询申请试用 ==*/ /*== 更多服务 ==*/ .gdfwbox{ width: 100%; display: block;background: url(../images/gywm_10.jpg) no-repeat; height:550px; min-width: 1300px;} .gdfw{ max-width: 1300px; margin:0px auto; display:block;} .fwbox{display: flex; text-align: center; position: relative;} .fwtxt{ margin-left:20px; margin-top:40px; text-align: left;} .fwbox h1{ font-size:50px; color: #222; line-height:80px; text-align: left; justify-content:center; font-weight: 600;} .fwdz{ text-align: left;} .fwdz strong{ font-size: 40px; font-weight: 500px; color: #222;line-height: 80px;} .fwdz p{ line-height: 40px; font-size: 25px;} .fwlxdh{ text-align: left; margin-top: 30px;} .fwlxdh p{ line-height: 50px; font-size: 35px; color: #116bea;} .fwlxdh p a{ line-height: 50px; font-size: 35px; color: #116bea;} .fwbut{ background-color: #116bea; color: #fff; font-size: 20px;text-align: center; width: 300px; height: 50px; display: block; line-height: 50px; margin-top: 30px; border-radius: 5px;} .fwimg{ width: 585px; height: 678px; right: 0px; top: 0px; position: absolute;} /*== end 更多服务 ==*/ /*=========================================== end 关于我们 =======================================*/ /*=========================================== 案例展示 =======================================*/ .alzsbox{ max-width: 1300px; margin: 40px auto 60px auto;} .fabox{ max-width: 800px; margin: 40px auto 60px auto;} .alzslb{box-shadow: 0px 3px 3px #dbdbdb;border-radius:5px; display: inline-block; margin:30px 8px; width:408px; overflow: hidden;} .fabox h1{ width: 100%;text-align: left; font-size: 35px; line-height: 50px; color: #222; font-weight: 400; height: 100px;} .bqalzs{ width: 100%; height: 40px; display: block; margin-bottom:30px;} .bqtxt{ float: left; color: #777; line-height: 40px; height: 40px; font-size: 20px;} .tbtxt{ float: right; color: #777; line-height: 40px; height: 40px; font-size: 20px; width: 150px; text-align: right; background-color: rgba(255,255,255,0)} .tbtxt span{ font-size: 25px; margin-right: 5px;} /*鼠标移动弹出*/ #clickMec{ position:relative;} #alertc { width: 250px; text-align: center; background:rgba(255, 255, 255, 1); font-size: 18px; position: absolute; display:none; z-index:9999; color:#000; border-radius:10px; font-weight:bold; padding: 30px 10px; text-align: center; } .conalzs{ width: 100%; display: block;} .imgalzs{ display: block;text-align: center; margin-bottom: 30px;} .conalzs p{ text-align: left; line-height: 50px; font-size: 20px;} .conalzs p strong{ text-align: left; line-height: 50px; font-size: 20px;} /*=========================================== end 案例展示 =======================================*/ /*=========================================== end 内容页面 ========================================*/ /*==================================foot begin==================================*/ .foot{ background:#050d16; width:100%; height:340px; min-width: 1300px;} .foot_con{ width: 1300px; margin:0px auto; padding-top:50px; position: relative; } .foot_l{ float:right; display: inherit; height:190px; margin-right: 20px;} .foot_phone{ width:280px; float: left; text-align: left;} .maphone{ width: 220px; float: right; text-align: center;} .maphone small{ width: 142px; text-align:center; font-size: 16px;display: block; line-height: 30px; margin: 0px auto; color:#fff;} .maphone a{ width:220px; height:35px; line-height:45px; color:#fff; font-size:30px; display: block; height: 45px; margin: 0px auto;} .foot_phone i{ float:left; width:42px; height:35px; padding-top:25px;} .foot_phone a{ float:left; width:175px; height:35px; line-height:45px; color:#fff; font-size:30px;} .foot_phone p{ float:left; width:260px; line-height:20px; color:#707171; font-size:12px; text-align:left;} .foot_r{float:left; margin-left: 20px;} .Aunav{ margin:0px 28px; float:left;} .Aunav strong{ display:block; line-height:30px; height:30px; margin-bottom:10px; color:#fff; text-align: left; } .Aunav a{ display:block; line-height:25px; height:25px; margin-bottom:10px; color:#707171; display:block; text-decoration:none; font-size:14px;} .Aunav a:hover{ color:#cbd6e6;} .foot_rtxt{float: left; width: 100%; display: block; margin-bottom: 20px; margin-left: 20px;} .foot_rlj{ margin-right: 30px; line-height: 30px; color: #707171;} .foot_rlj:hover{ color:#cbd6e6;} .foot_xkz{ width:100%; float:left; height:50px; color:#707171;; text-align:center; font-size:14px; line-height:50px; border-top:#30333b 1px solid;} @media screen and (max-width:1000px) { .foot_phone{ width:330px; float: left;} .foot_phone a{ font-size:50px;} .foot_phone p{ font-size:16px;} } /*==================================foot end==================================*/ /*鼠标移动弹出*/ #clickMe1{ position:relative;} #alert1{ width: 220px; height: 255px; text-align: center; background:rgba(255, 255, 255, 0.9); font-size: 18px; position: absolute; display:none; z-index:9999; color:#000; border-radius:10px; font-weight:bold; } #clickMe2{ position:relative;} #alert2 { width: 220px; height: 255px; text-align: center; background:rgba(255, 255, 255, 0.9); font-size: 18px; position: absolute; display:none; z-index:9999; color:#000; border-radius:10px; font-weight:bold; } #clickMe3{ position:relative;} #alert3 { width: 220px; height: 255px; text-align: center; background:rgba(255, 255, 255, 0.9); font-size: 18px; position: absolute; display:none; z-index:9999; color:#000; border-radius:10px; font-weight:bold; } #clickMe4{ position:relative;} #alert4 { width: 220px; height: 255px; text-align: center; background:rgba(255, 255, 255, 0.9); font-size: 18px; position: absolute; display:none; z-index:9999; color:#000; border-radius:10px; font-weight:bold; } #clickMe5{ position:relative;} #alert5 { width: 220px; height: 255px; text-align: center; background:rgba(255, 255, 255, 0.9); font-size: 18px; position: absolute; display:none; z-index:9999; color:#000; border-radius:10px; font-weight:bold; } #clickMe6{ position:relative;} #alert6{ width: 220px; height: 255px; text-align: center; background:rgba(255, 255, 255, 0.9); font-size: 18px; display:none; z-index:9999; color:#000; border-radius:10px; font-weight:bold; position: absolute; } #aler100{ width: 220px; height: 255px; text-align: center; background:rgba(255, 255, 255, 0.9); font-size: 18px; position: absolute; display:none; z-index:9999; color:#000; border-radius:10px; font-weight:bold; } #clickM200{ position:relative;} #aler200{ width: 220px; height: 255px; text-align: center; background:rgba(255, 255, 255, 0.9); font-size: 18px; position: absolute; display:none; z-index:9999; color:#000; border-radius:10px; font-weight:bold; } .img{ width:180px; height:180px; margin: 10px auto; border: 2px dotted #ccc; padding:8px; border-radius:10px; background:rgba(255, 255, 255, 0.9); } .img img{ width: 100%; height: 100%; } /*报价*/ .currencybox{ width:100%; display:block; margin:30px auto 30px auto; position:relative;} .common-title{ width:100%; text-align:center; padding-top:30px;} .common-title strong{ display:block; text-align:center; font-size:22px; color:#333; line-height:50px;} .common-title span{ display:block; text-align:center; font-size:14px; color:#666; margin:0 auto; width:60%; padding-bottom:30px;} .common_like{display:inline-block; margin-left:20px; font-size:16px; color:#0056c4; text-decoration: underline; padding:5px;} .common_like:hover{ background:#CCC;border-radius:5px; padding:5px;} .baojiaimg{ width:100%; margin:0 auto; text-align:center; padding-bottom: 30px;} .baojiaimg img{ margin:0 auto; max-width:1000px;} /* 案例 */ .IndexService{background:#efefef;width: 100%;} .IndexService .IndexService_content{max-width: 1500px;margin:0 auto;padding:75px 0px 35px 0px; width: 1300px; display: block;} .IndexCase{background-color: #efefef;} .IndexCase_content{ width: 1300px; margin: 0px auto;} .anli{ width: 100%; } .IndexCase .IndexCase_content .kongbai{ width:17px; display:inline-block;} .IndexCase .IndexCase_content .IndexCase_content_list{display:inline-block;width:416px;margin-bottom:27px;border-bottom:1px solid #e5e5e5;padding-bottom:25px;position:relative; } .IndexCase .IndexCase_content .IndexCase_content_list:before{content:"";position:absolute;display:inline-block;width:0%;left:0;background:#ff7019;bottom:-1px;height:1px;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;}.IndexCase .IndexCase_content .IndexCase_content_list:nth-child(3n){margin-right:0px;} .IndexCase .IndexCase_content .IndexCase_content_list:hover .content_list_title .list_title_icon{color:#ff7019; border: 1px solid #ff7019; border-radius: 50%;} .IndexCase .IndexCase_content .IndexCase_content_list:hover:before{;width:100%;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .IndexCase .IndexCase_content .IndexCase_content_list:hover .content_list_img .tra{-webkit-transform:scale(1.15);-moz-transform:scale(1.15);-ms-transform:scale(1.15);-o-transform:scale(1.15);filter:scale(1.15);filter:transform;transition:all 0.5s ease 0s;-webkit-transform:all 0.5s ease 0s;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_img{overflow:hidden;position:relative;background:#000;height: 330px;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_img a{display:inline-block;width:100%;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_img img{width:100%;height:330px;object-fit:cover;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_title{margin-top:25px;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_title .list_title_left{width:88%;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_title .list_title_left dd{color:#333333;font-size:20px;line-height:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_title .list_title_left dd a{color:#333333;font-size:20px;line-height:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.IndexCase .IndexCase_content .IndexCase_content_list .content_list_title .list_title_left dd span{font-size:16px;}.IndexCase .IndexCase_content .IndexCase_content_list .content_list_title .list_title_left dd i{font-style:inherit;padding:0px 15px;}.IndexCase .IndexCase_content .IndexCase_content_list .content_list_title .list_title_left dt{color:#999999;font-size:13px;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_title .list_title_icon{color:#bbbbbb;border: 1px solid #bbbbbb; border-radius: 50%;font-size:20px; width: 30px; height: 30px; line-height:32px; transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_hover dt{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);z-index:5;color:#fff;font-size:35px;opacity:0;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;}.IndexCase .IndexCase_content .IndexCase_content_list .content_list_hover dd{background:rgba(0,0,0,0.5);position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;display:none;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_hover .hr{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);z-index:5;} .IndexCase .IndexCase_content .IndexCase_content_list .content_list_hover .hr img{width:auto;height:auto;opacity:0;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .IndexCase .IndexCase_content .IndexCase_content_list:hover .content_list_img img{opacity:.6;transition:all 0.5s ease;-webkit-transform:all 0.5s ease;} .IndexCase .IndexCase_content .IndexCase_content_list:hover .content_list_hover dd{opacity:1;}.IndexCase .IndexCase_content .IndexCase_content_list:hover .content_list_hover .hr img{opacity:1;}.IndexCase .IndexCase_content .IndexCase_content_list:hover .content_list_hover dt{opacity:1;}.IndexCase .IndexCase_content .IndexCase_content_list:hover .content_list_hover .hr img{-webkit-transform:rotate(360deg);animation:rotation 10s linear infinite;-moz-animation:rotation 10s linear infinite;-webkit-animation:rotation 10s linear infinite;-o-animation:rotation 10s linear infinite;} /* 报价 */ .IndexService{background:#efefef; width: 100%; display: block;} .IndexService .IndexService_content{margin:0 auto;padding:75px 0px 45px 0px; width: 1300px;} .IndexService_content_body{display: block;margin:0 auto;} .IndexService .IndexService_content .IndexService_content_title{text-align:center;padding-bottom:55px;} .IndexService .IndexService_content .IndexService_content_title dd{font-size:30px;color:#333333;text-transform:uppercase;} .IndexService .IndexService_content .IndexService_content_title dt{font-size:16px;color:#999999;margin-top:12px; line-height:28px;} .quotationbox{width: 1300px; margin: 40px auto; position: relative;height:620px;} .quotationlist{ width: 21.25%; position: relative; border-radius:2px; -webkit-box-shadow: 0px 0px 10px rgba(18, 8, 81, 0.1); box-shadow: 0px 0px 10px rgba(18, 8, 81, 0.1); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; z-index: 970; } .quotationlist:hover{ -webkit-box-shadow: 0px 8px 30px rgba(18, 8, 81, 0.2); box-shadow: 0px 8px 30px rgba(18, 8, 81, 0.2); } .quotationb{width: 5%;} .quotationlist .quotationbj{ width: 100%; margin: 0px auto; position:absolute; left:0px; top:0px; z-index:971; border-radius:2px; height:665px; } .quotationlist:hover .quotationbj{ width: 100%; margin: 0px auto; background-color: #f3e53e; animation: quotationbj 1s ease 1; /*调用已定义好的动画topeaseinAnimate，全程运行时间8S，进入的速度曲线为ease，只播放一次*/ -webkit-animation: quotationbj 1s ease 1; -ms-animation: quotationbj 1s ease 1; -o-animation: quotationbj 1s ease 1; -moz-animation: quotationbj 1s ease 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; } /*定义一个名字为topeaseinAnimate动画，实现从页面的右边淡入页面效果*/ @keyframes quotationbj{ 0%{ transform: translateY(-150px); transform: scale(1.05);} /*在0%时设置文字在想X轴2000px位移处（右边），透明度为0，也就是看不见文字*/ 100%{ transform: translateY(0px); transform: scale(1);} /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/ } @-webkit-keyframes quotationbj{ 0%{ -webkit-transform: translateY(-150px); transform: scale(1.05);} 100%{ -webkit-transform: translateY(0px); transform: scale(1);} } @-o-keyframes quotationbj{ 0%{ -webkit-transform: translateY(-150px); transform: scale(1.05);} 100%{ -webkit-transform: translateX(0px); transform: scale(1);} } @-ms-keyframes quotationbj{ 0%{ -webkit-transform: translateY(-150px); transform: scale(1.05);} 100%{ -webkit-transform: translateY(0px); transform: scale(1);} } @-moz-keyframes quotationbj{ 0%{ -webkit-transform: translateY(-150px); transform: scale(1.05);} 100%{ -webkit-transform: translateY(0px); transform: scale(1);} } .quotation1{position:relative; z-index:973; width: 90%; margin: 0px auto;} .quotationico{ background-color: #116bea; border-radius: 50%; width: 100px; height: 80px; margin: -50px auto 0px; text-align: center; padding-top:20px;} .quotationico span{ color: #ffffff; font-size: 60px; display: block;} .quotationtlt{margin: 5px auto 5px auto; line-height: 30px; font-size:18px; text-align: center; height: 60px;} .quotationlist .pricing__item h3 { font-size: 30px; background: #120851; font-weight: 700; color: #ffffff; padding: 24px 0 20px; margin-bottom: 26px; margin-left: -30px; border-radius: 10px; margin-right: -30px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; text-align: center; } .quotationlist .pricing__item h3 span { font-size: 16px; font-weight: 400; } .quotationlist:hover .pricing__item h3 { background: #116bea; } .quotationlist:hover .pricing__item .primary-btn { background: #116bea; color: #ffffff; } .quotationlist .pricing__item ul { margin-bottom: 26px; } .quotationlist .pricing__item ul li { font-size: 12px; color: #444444; line-height: 30px; list-style: none; } .quotationlist .pricing__item ul li span{ width:20px; height: 20px; border-radius: 50%; text-align: center;line-height: 20px; margin-right:10px; border: 1px solid #444444; font-size: 12px; padding: 2px;} .quotationlist .pricing__item ul li small{border-radius: 50%; text-align: center; margin-right:10px; border: 1px solid #1ca526; font-size: 12px; color: #ffffff; display: inline-block; background-color: #1ca526; width: 15px; height: 15px;margin-left: 10px; line-height: 15px;} .quotationlist .pricing__item .primary-btn { color: #111111; background: #e7e7e7; display: block; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; padding: 14px 0 12px; } .primary-btn { display: inline-block; font-size: 15px; padding: 14px 30px 12px; color: #ffffff; background: #116bea; text-transform: uppercase; font-weight: 700; border-radius: 50px; text-align: center; margin-bottom: 30px; }