﻿
@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: 550px;
    min-width: 1200px;
    overflow: hidden;
    background: url(../images/wmstop.jpg) no-repeat center;
}

    .des .des1 {
        width: 1200px;
        height: 350px;
        margin: 200px auto 0;
        color: #fff;
        text-align: center;
    }

        .des .des1 h1 {
            font-size: 50px;
        }

        .des .des1 h2 {
            font-size: 35px;
            margin-top: 70px;
        }

        .des .des1 .trialbtn {
            background-color: #f49f0c;
            border-radius: 40px;
            color: #fff;
            display: inline-block;
            font-size: 26px;
            height: 60px;
            line-height: 60px;
            margin-top: 50px;
            text-align: center;
            width: 200px;
        }

            .des .des1 .trialbtn:hover {
                background-color: #eb8d07;
            }

.adv {
    width: 100%;
    height: 625px;
    min-width: 1200px;
    overflow: hidden;
    background: #fff
}

    .adv .adv1 {
        width: 1200px;
        height: 625px;
        margin: 0 auto;
        overflow: hidden
    }

.adv1 h2 {
    width: 349px;
    height: 73px;
    background: url(../images/pro1.png) no-repeat center;
    margin: 55px auto;
    
}

.adv1 .animat0 {
    animation: fadeInUp 1 1.2s;
    visibility: visible
}

.adv1 li {
    width: 33.33%;
    float: left;
    display: block;
}

    .adv1 li h3 {
        font-size: 18px;
        color: #222;
        line-height: 1;
        text-align: center;
        margin-top: 12px;
        font-weight: normal;
        
    }

    .adv1 li p {
        font-size: 14px;
        color: #696868;
        line-height: 26px;
        margin: 32px auto;
        width: 339px;
        text-align: left;
        visibility: collapse
    }

    .adv1 li .animat {
        animation: fadeInUp 1 1.2s;
        visibility: visible
    }

    .adv1 li .animat1 {
        animation: fadeInUp 1 1.4s;
        visibility: visible
    }

    .adv1 li i {
        width: 180px;
        height: 208px;
        background: url(../images/youshi.jpg) no-repeat;
        display: block;
        margin: 0 auto
    }

.adv1 .adv_one i {
    background: url(../images/youshi.jpg)no-repeat 0 0;
}

.adv1 .adv_two i {
    background: url(../images/youshi.jpg)no-repeat -180px 0;
}

.adv1 .adv_thr i {
    background: url(../images/youshi.jpg)no-repeat -360px 0;
}

.fea {
    width: 100%;
    height: 692px;
    min-width: 1200px;
    overflow: hidden;
    background: #f2f2f2
}

    .fea .fea1 {
        width: 1202px;
        height: 692px;
        margin: 0 auto;
        overflow: hidden
    }

.fea1 h2 {
    width: 294px;
    height: 67px;
    background: url(../images/pro2.png) no-repeat center;
    margin: 55px auto 0;
    
}

.fea1 .animat {
    animation: bounceInDown 1 1s;
    visibility: visible
}


.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(../images/pro.jpg) no-repeat 0 0;
    margin: 35px auto 0
}

.fea1 .two i {
    background: url(../images/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(../images/pro.jpg) no-repeat -252px 0;
    margin: 35px auto 0
}

.fea1 .for i {
    background: url(../images/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(../images/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%;
    height: 689px;
    min-width: 1200px;
    overflow: hidden;
    background: #fff
}

    .fun .fun1 {
        width: 1300px;
        height: 689px;
        margin: 0 auto;
        overflow: hidden
    }

.fun1 h2 {
    width: 284px;
    height: 67px;
    background: url(../images/pro3.png) no-repeat center;
    margin: 55px auto 100px;
    
}

.fun1 .animat {
    visibility: visible;
    animation: fadeInUp 1 1.2s
}

.fun1 li i {
    width: 121px;
    height: 121px;
    margin: 0 auto;
    display: block;
    border-radius: 50%;
}

.fun1 li {
    width: 12.5%;
    display: block;
    float: left
}

    .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
    }

.fun1 .one i {
    background: url(../images/fun.jpg) no-repeat 0 0;
}

.fun1 .two i {
    background: url(../images/fun.jpg) no-repeat -121px 0;
}

.fun1 .thr i {
    background: url(../images/fun.jpg) no-repeat -242px 0;
}

.fun1 .for i {
    background: url(../images/fun.jpg) no-repeat -363px 0;
}

.fun1 .fiv i {
    background: url(../images/fun.jpg) no-repeat -484px 0;
}

.fun1 .six i {
    background: url(../images/fun.jpg) no-repeat -605px 0;
}

.fun1 .sev i {
    background: url(../images/fun.jpg) no-repeat -726px 0;
}

.fun1 .eig i {
    background: url(../images/fun.jpg) no-repeat right top
}

.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(../images/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(../images/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(../images/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;
    ;
    ;
}

    .ale1 .miaoshu .one {
        width: 100%;
        height: 50px;
        margin-bottom: 46px;
    }

        .ale1 .miaoshu .one span {
            width: 44px;
            height: 31px;
            background: url(../images/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(../images/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(../images/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(../images/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(../images/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(../images/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(../images/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(../images/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
}
