html,body{
    width:100%;
    height:100%;
    background:#fff;
    overflow:hidden;
    position:relative;
}
.rbtn ul li a{
    color:#363636;
}
.twitter{
    background-image:url(../image/weibo2.png);
}
.lettera{
    background-image:url(../image/weixin2.png);
}
.content{
    position:relative;
    width:100%;
    height:100%;
    background:url(../image/homebj.png) no-repeat center/cover;
}
.content > div{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;    
    opacity:0;
}
.content .home_page{
    left:-100%;
    background:url(../image/homewz.png) no-repeat center/cover;
}
.product{
    color:#363636;  
    text-align:center;
}
.product_top{
    width:100%;
    position:absolute;
    left:0;
    top:-100%;
}
.product_top h3{
    height:50px;
    background:url(../image/cp.png) no-repeat center top;
}
.product_top p{
    width:592px;
    margin:0 auto;
    padding-top:33px;
    font-size:18px;
    line-height:24px;
}
.product_bom{
    width:100%;
    position:absolute;
    left:0;
    bottom:-100%;
}
.product_bom ul{
    width:999px;
    margin:0 auto;
}
.product_bom li{
    float:left;
    width:333px;
    text-align:center;
}
.product_bom li i,.product_bom li span{
    display:block;
}
.product_bom li i{
    height:120px;
}
.product_ct i{
    background:url(../image/ct1.png) no-repeat center top;
}
.product_sj i{
    background:url(../image/sj1.png) no-repeat center top;
}
.product_zs i{
    background:url(../image/zs1.png) no-repeat center top;
}
.product_bom li span{
    width:146px;
    height:36px;
    margin:0 auto;
    font:18px/36px 'Microsoft Yahei';
    border:2px solid transparent;
    border-radius:20px;
}
.product_bom li:hover span{
    border-color:#ffc200;
}
.product_ct:hover i{
    background:url(../image/ct2.png) no-repeat center top;
}
.product_sj:hover i{
    background:url(../image/sj2.png) no-repeat center top;
}
.product_zs:hover i{
    background:url(../image/zs2.png) no-repeat center top;
}
.service{
    text-align:center;
}
.service > div{
    width:50%;
    position:absolute;
    bottom:15%;
}
.service_top{
    width:100%;
    height:67px;
    position:absolute;
    left:0;
    top:-100%;
    background:url(../image/fw.png) no-repeat center top;
}
.service_left{
    left:-100%;
}
.service_right{
    right:-100%;
}
.service_left > div{
    float:right;
    margin-right:70px;
    display:inline;
}
.service_right > div{
    float:left;
    margin-left:70px;
    display:inline;
}
.service_left > div,.service_right > div{
    width:286px;
    height:296px;
    border:2px solid #363636;
    border-radius:10px;
}
.service_left > div strong,.service_right > div strong{
    display:block;
    width:240px;
    height:68px;
    line-height:68px;
    border-bottom:2px solid #363636;
    margin:0 auto;
    font-size:28px;
    font-weight:normal;
}
.service_left > div span,.service_right > div span{
    display:block;
    padding-top:83px;
    line-height:30px;
    font-size:20px;
}
.service_left > div:hover,.service_right > div:hover{
    border-color:#ffc200;
}
.service_left > div:hover strong,.service_right > div:hover strong{
    border-color:#ffc200;
}
.hardware_left,.hardware_right{
    width:50%;
    height:100%;
    position:absolute;
    top:0;
}
.hardware_left{
    left:-100%;
    background:url(../image/hardware_l.png) no-repeat center/cover;
}
.hardware_right{
    right:-100%;
    background:url(../image/hardware_r.png) no-repeat center/cover;
}
.case{
    text-align:center;
}
.case_top h3{
    height: 67px;
    background: url(../image/al.png) center top no-repeat;
}
.case_top ul li{
    float:left;
    width:300px;
    height:80px;
}
.rh{
    background:url(../image/rh.png) no-repeat;
}
.rh:hover{
    background:url(../image/rh2.png) no-repeat;
}
.dp{
    background:url(../image/dp.png) no-repeat;
}
.dp:hover{
    background:url(../image/dp2.png) no-repeat;
}
.case_top ul li a{
    display:block;
}
.case_top ul{
    width:900px;
    margin:0 auto;
    padding-top:130px;
}
.case > div{
    width:100%;
    position:absolute;
    left:0;
}
.case_top{
    top:-100%;
}
.wave{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.wave_x1{
    width:572px;
    height:252px;
    position:absolute;
    left:0;
    bottom:0;
    background:url(../image/x1.png) no-repeat;
    animation:wave_x1 3s ease-out infinite alternate running;
}
.wave_x2{
    width:673px;
    height:337px;
    position:absolute;
    left:0;
    bottom:-50px;
    background:url(../image/x2.png) no-repeat;
    animation:wave_x2 3s ease-out infinite alternate running;   
}
.wave_x3{
    width:711px;
    height:216px;
    position:absolute;
    left:330px;
    bottom:-50px;
    background:url(../image/x3.png) no-repeat;
    animation:wave_x3 5s ease-out infinite alternate running;   
}
.wave_x4{
    width:638px;
    height:140px;
    position:absolute;
    right:0;
    bottom:0;
    background:url(../image/x4.png) no-repeat;
    animation:wave_x4 3s ease-out infinite alternate running;   
}
.wave_zs{
    width:547px;
    height:284px;
    position:absolute;
    left:0;
    top:-50px;
    background:url(../image/zs.png) no-repeat;
    animation:wave_x5 3s ease-out infinite alternate running;   
}
.wave_ys{
    width:361px;
    height:156px;
    position:absolute;
    right:0;
    top:-33px;
    background:url(../image/ys.png) no-repeat;
    animation:wave_x6 3s ease-out infinite alternate running;   
}






.foot{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    font-size: 12px;
    color: #333;
    text-align: center;
    font-weight: normal;
    line-height: 20px;
}
.foot span{
    padding:0 10px;
}

/*动画效果*/
@keyframes wave_x1{
    0%{
        left:0;
        bottom:0;
    }
    100%{
        left:0;
        bottom:-50px;
    }
}
@keyframes wave_x2{
    0%{
        left:0;
        bottom:-50px;
    }
    100%{
        left:0;
        bottom:0;
    }
}
@keyframes wave_x3{
    0%{
        bottom:-50px;
    }
    100%{
        bottom:0;
    }
}
@keyframes wave_x4{
    0%{
        bottom:0;
    }
    100%{
        bottom:-50px;
    }
}
@keyframes wave_x5{
    0%{
        top:-50px;
    }
    100%{
        top:0;
    }
}
@keyframes wave_x6{
    0%{
        top:-33px;
    }
    100%{
        top:-83px;
    }
}





/*媒体查询 >- 屏幕适配*/
@media ( min-width:1500px ){
    .service > div{
        bottom:25%;
    }
}