@charset "utf-8";
* {margin: 0;padding: 0;}

body {font-family: "Microsoft YaHei";}
ul,ol,li {list-style: outside none none;}
a {text-decoration: none;}
.clear{ clear:both}

.des{ width:100%;height:566px; min-width:1200px; overflow:hidden; background:#f2f2f2}
.des .des1{ width:1200px; height:566px; margin:0 auto; overflow:hidden}
.des .des1 h2{ width:328px; height:97px; background:url(../img/pro.png) no-repeat center; margin:33px auto 0; animation:zoomInDown 1 1s; }
.des .des1 i{ width:894px; height:357px; background:url(../img/pro_bg.jpg) no-repeat center; margin:58px auto 0; display:block; overflow: hidden}
.des .des1 i .tit{ font-size:32px; color:#ff8c1c; text-align:center; line-height:1; font-family:"Arial"; margin-top:115px;font-style:normal;animation:fadeInUp 1 1s; display:none}
.des .des1 i .tit1{ font-size:24px; color:#fff; line-height:48px; width:610px; text-align:center; margin:158px auto 0; font-style:normal;animation:fadeInUp 1 1.4s;}

.adv{ width:100%;min-width:1200px; overflow:hidden; background:#f3f3f3; padding:50px 0;}
.adv .adv1{ width:1200px;  margin:0 auto; overflow:hidden}
.adv1 h2{ width:349px; height:73px; background:url(../img/pro01.png) no-repeat center; margin:0 auto 55px;}
.adv1 .animat0{animation:fadeInUp 1 1.2s; visibility:visible}
.adv1 li{ width:25%; float:left; display:block; text-align:center;}
.adv1 li h3{ font-size:20px; color:#222; line-height:1; text-align:center; margin-top:30px; font-weight:normal;}
.adv1 li p{ font-size:14px; color:#696868; line-height:26px; margin:32px auto; width:339px; text-align:left; visibility:collapse}

 

.fea{ width:100%; min-width:1200px; overflow:hidden; }
.fea .fea1{ width:1200px;  margin:0 auto; overflow:hidden}
.fea1 h2{ width:289px; height:69px; background:url(../img/pro2.png) no-repeat center; margin:55px auto 0;}
.fea1 .animat{ animation:bounceInDown 1 1s; visibility:visible}

.fe-list dl{ width:48%; display: flex;
    justify-content: center;
    align-items: center; background:#f3f3f3; border-radius:20px; height:277px; margin-bottom:80px; transition-duration:.5s;}
.fe-list dl dd{ width:289px; padding-left:30px;}
.fe-list dl dd p{ font-size:20px; color:#31b3fe; padding-bottom:20px;}
.fe-list dl dd span{ display:block; font-size:16px; line-height:1.7}
.fe-list dl:hover dt img{ -webkit-animation: icon-bounce 0.5s alternate;
    -moz-animation: icon-bounce 0.5s alternate;
    -o-animation: icon-bounce 0.5s alternate;
    animation: icon-bounce 0.5s alternate;}
 }

.fea1 li{ width:226px; height:461px; display:block; float:left; box-shadow:0 0 6px #c8c7c7; border-radius:14px; border:1px solid #c8c7c7; margin-right:15px;
 margin-top:65px; transition-duration:500ms}
.fea1 .last{ float:right; margin-right:0;}
.fea1 li i{ width:126px; height:126px; display:block; border-radius:50%;}
.fea1 li hr{ width:99%; border:1px solid #e5e5e5; margin-top:37px;}
.fea1 li h3{ font-size:18px; color:#31b2fd; line-height:21px; text-align:center; padding:0 23px; font-weight:normal; margin-top:12px;}
.fea1 li p{ font-size:14px; color:#696868; line-height:24px; padding:0 12px; margin-top:12px; text-align:justify}
.fea1 .one i{background:url(../img/pro.jpg) no-repeat 0 0; margin:35px auto 0}
.fea1 .two i{background:url(../img/pro.jpg) no-repeat -127px -1px; margin:35px auto 0;width:124px; height:124px;}
.fea1 .two p{ margin-top:33px;}
.fea1 .thr i{background:url(../img/pro.jpg) no-repeat -252px 0; margin:35px auto 0}
.fea1 .for i{background:url(../img/pro.jpg) no-repeat -379px -1px; margin:35px auto 0; width:124px;height:124px;}
.fea1 .for p{margin-top:33px;}
.fea1 .last p{margin-top:33px;}
.fea1 .last i{background:url(../img/pro.jpg) no-repeat -504px 0; margin:35px auto 0}
.fea1 li:hover{box-shadow:0 0 25px #999; margin-top:50px;}

.fun{ width:100%;min-width:1200px; overflow:hidden; padding:50px 0}
.fun .fun1{ width:1200px;margin:0 auto; overflow:hidden}
.fun1 h2{ width:284px; height:67px; background:url(../img/pro3.png) no-repeat center; margin:55px auto 100px;}
.fun1 .animat{ visibility:visible;  animation:fadeInUp 1 1.2s}
.fun1 ul{display: flex;
    justify-content: space-between;}
.fun1 li i{ width:140px; height:140px; margin:0 auto; display:block; border-radius:50%; border:1px solid #8e8e8e; position:relative; transition-duration:.5s;}
.fun1 li i img{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;transition-duration: .5s;}
.fun1 li:hover i{ background:#f86603}
.fun1 li:hover i img{ -webkit-animation: icon-bounce 0.5s alternate;
    -moz-animation: icon-bounce 0.5s alternate;
    -o-animation: icon-bounce 0.5s alternate;
    animation: icon-bounce 0.5s alternate;}

.fun1 li{ width:158px; display:block; margin-right:35px;}
.fun1 li h3{ font-size:18px; color:#333; line-height:1; text-align:center; margin-top:23px;}
.fun1 li p{ font-size:14px; color:#696868; text-align:center; padding:0 15px; margin-top:19px; line-height:22px;; text-align:left}
.fun1 li .animat1{animation:fadeInUp 1 1.2s; visibility:visible}
.fun1 li .animat2{animation:fadeInUp 1 1.4s;visibility:visible}

 

.any{ width:100%;height:770px; min-width:1200px; overflow:hidden; background:#f8f8f8;}
.any .any1{ width:1200px; height:770px; margin:0 auto; overflow:hidden}
.any1 h2{ width:316px; height:73px; background:url(../img/pro4.png) no-repeat center; margin:78px auto 65px;}
.any1 .animat{animation:bounceInLeft 1 1.4s;visibility:visible;}
.any1 p{ width:897px; height:533px; background:url(../img/pro_bg2.jpg) no-repeat center; display:block; margin:0 auto;
}
.any1 .animat1{animation:zoomIn 1 1s;visibility:visible}



.ale{ width:100%;height:694px; min-width:1200px; overflow:hidden; background:#fff;}
.ale .ale1{ width:1200px; height:694px; margin:0 auto; overflow:hidden; position:relative;}
.ale1 h2{ width:274px; height:73px; background:url(../img/pro5.png) no-repeat center; margin:78px auto 53px;}
.ale1 .ale2{ float:left; margin-left:90px;}
.ale1 .ale2 p{ font-size:24px; color:#414141; line-height:1; margin-bottom:40px;} 
.ale1 .ale2 li{ font-size:14px; color:#333; line-height:1; margin-left:9px; margin-bottom:25px;}
.ale1 .word{ float:right; font-size:24px; line-height:1; color:#414141; margin-right:42px;}
.ale1 .word.animat1{ visibility:visible;animation:fadeInUp 1 1.2s;}
.ale1 .miaoshu{ width:500px; height:325px; position:absolute; top:266px; left:715px;;visibility: hidden; }
.ale1 .miaoshu .one{ width:100%; height:50px; margin-bottom:46px;}
.ale1 .miaoshu .one span{ width:44px; height:31px; background:url(../img/fast.jpg) 0 0 no-repeat; display:block; float:left; margin-top:12px;}
.ale1 .miaoshu li .word{ float:left; margin-left:45px; width:300px;}
.ale1 .miaoshu li .word .title{ font-size:20px; color:#767676; line-height:17px;; margin-bottom:13px;}
.ale1 .miaoshu li .word .title1{ font-size:14px; color:#333; line-height:1}
.ale1 .miaoshu .two{ width:100%; height:55px; margin-bottom:37px;}
.ale1 .miaoshu .two span{ width:53px; height:48px; background:url(../img/fast.jpg) -44px 0 no-repeat; display:block; float:left; margin-top:7px;}
.ale1 .miaoshu .two .word{margin-left:39px;}
.ale1 .miaoshu .thr{ width:100%; height:55px; margin-bottom:36px;}
.ale1 .miaoshu .thr span{ width:49px; height:39px; background:url(../img/fast.jpg) -97px 0 no-repeat; display:block; float:left; margin-top:9px;}
.ale1 .miaoshu .thr .word{margin-left:39px;}

.ale1 .miaoshu .for{ width:100%; height:48px;}
.ale1 .miaoshu .for span{ width:48px; height:47px; background:url(../img/fast.jpg) -146px 0 no-repeat; display:block; float:left; margin-top:7px;}
.ale1 .miaoshu .for .word{margin-left:39px;}

.ale1 .jiantou{ width:250px; height:158px; position:absolute; top:370px; left:385px; background:url(../img/shrwlb1.jpg) no-repeat center;}
.ale1 .line{ width:2px; height:155px; border-left:2px dashed #dfdcdc; position:absolute; display:block; top:168px; right:600px;}
.ale1 .animat{ visibility:visible;animation:rotateInDownLeft 1 1s;}
.ale1 .ale2.animat1{animation:bounceInLeft 1 1s;visibility:visible}
.ale1 .animat2{animation:bounceInRight  1 1.2s; visibility:visible}


.boss{width:100%;height:636px; min-width:1200px; overflow:hidden; position:relative; background:#f8f8f8}
.boss .bg2{ width:100%; height:100%; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto }
.boss .boss1{width:1200px; height:636px; margin:0 auto; overflow:hidden; position:relative}
.boss1 h2{ width:273px; height:66px; background:url(../img/boss.png) no-repeat center; float:left; margin-top:170px; ; margin-bottom:40px; margin-left:90px}
.boss1 .animat{animation:fadeInUp 1 1s;visibility:visible}
.boss1 ul{ clear:both; margin-left:90px}
.boss1 ul li{}
.boss1 ul .one{ font-size:20px; line-height:48px; color:#111; width:400px; margin-top:5px;}
.boss1 ul .two{ font-size:14px; line-height:36px; color:#666; width:300px;}
.boss1 ul .thr{ font-size:20px; line-height:48px; color:#111; margin:10px auto}
.boss1 ul .for{ font-size:14px; line-height:36px; color:#666; width:565px;}
.boss1 ul .one.animat2{animation:fadeInUp 1 1s;visibility:visible}
.boss1 ul .two.animat2{animation:fadeInUp 1 1.2s;visibility:visible}
.boss1 ul .thr.animat2{animation:fadeInUp 1 1.4s;visibility:visible}
.boss1 ul .for.animat2{animation:fadeInUp 1 1.6s;visibility:visible}

.boss1 i{ width:400px; height:540px; background:url(../img/iphone.png) no-repeat center; position:absolute; display:block; bottom:0; right:10px; background-size:contain;}
.boss1 .animat1{animation:bounceInRight 1 1.5s;visibility:visible}


.ser{ width:100%;height:452px; min-width:1200px; overflow:hidden; background:#fff;}
.ser .ser1{ width:1200px; height:452px; margin:0 auto; overflow:hidden; }
.ser1 h2{ width:290px; height:68px; background:url(../img/pro6.png) no-repeat center; margin:35px auto 65px;}
.ser1 li{ width:25%; float:left;}
.ser1 li span{ width:110px; height:110px; border-radius:50%; display:block; margin:0 auto; overflow:hidden}
.ser1 li .one{ background:#f5a26c;}
.ser1 li .two{ background:#f79450;}
.ser1 li .thr{ background:#f77e2d;}
.ser1 li .for{ background:#f36b10;}
.ser1 li span .num{ font-size:30px; line-height:24px; text-align:center; margin-top:23PX; color:#fff}
.ser1 li span .tit{ font-size:18px; color:#fff; line-height:1;  text-align:center; margin-top:14px;}
.ser1 li .act{ font-size:16px; line-height:24px; text-align:center; width:235px; margin:12px auto 0; color:#544f4c}
.ser1 .animat{animation:bounceInDown 1 1.4s;visibility:visible}
.ser1 .animat1{animation:fadeInUp 1 1.6s;visibility:visible}


.banner-txt{ position:absolute; top:50%; transform:translateY(-50%); width:100%; color:#fff;}
.banner-txt h1{ font-size:30px; color:#f86603; font-weight:normal;}
.banner-txt h2{ font-size:24px; font-weight:normal; padding:20px 0;}
.banner-txt p{ font-size:20px; margin-bottom:10px; position:relative; padding-left:20px;}
.banner-txt p:before{ content:""; position:absolute; width:7px; height:7px; background:#fff; border-radius:50%; top:12px; left:0;}

@keyframes icon-bounce {
    0%,
    100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    50% {
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    75% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    85% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
}

@-webkit-keyframes icon-bounce {
    0%,
    100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    50% {
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    75% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    85% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
}

@-moz-keyframes icon-bounce {
    0%,
    100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    50% {
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    75% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    85% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
}

@-o-keyframes icon-bounce {
    0%,
    100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    50% {
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    75% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    85% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
}