.banner{height: 300px;padding-top: 80px;position: relative;overflow: hidden;}
.banner .on{position: absolute;left:0px;top:176px;animation: myMove01 2s;}
.banner .on h3{font-size: 28px;color:#fff;position: absolute;left:260px;top: 24px;animation: myMove 1.6s;animation-delay:.2s;}
.banner .on p{font-size: 18px;color:#fff;position:absolute;left:260px; top:66px;
animation: myMove 1.6s;animation-delay:.6s;
}
@keyframes myMove{
0%{left:0;}
100%{left:260px;}
}
@keyframes myMove01{
0%{left:-1124px;}
100%{left:0;}
}
.wrap{width: 1174px;margin: 0 auto;}
.main{overflow: hidden;border-bottom: 1px solid #e5e5e5;}
.main h3{width: 88px;border-bottom: 2px solid #750173;font-size: 20px;color:#750173;line-height: 86px;}
.software{width: 100%;height:520px;border-bottom: 1px solid #e5e5e5;}
.software_left{width: 470px;height:100%;float: left;}
.software_left h2{font-size: 32px;line-height: 50px;color:#750173;padding-top: 140px;padding-bottom: 50px;}
.software_left p{font-size: 16px;color:#676767;line-height: 30px;padding-bottom: 50px;}
.software_left .btn_b{width: 160px;height: 50px;padding-left: 40px;display: block;text-align: center;line-height: 50px;color:#fff;background: #1b1c1e;border-radius:4px;float: left;margin-right: 28px;font-size: 16px;}

img{vertical-align: middle;}
.software_left .iphone{background: #1b1c1e url(../images/icon.png) no-repeat 30px center;}
.software_left .android{background: #1b1c1e url(../images/icon01.png) no-repeat 30px center;}
.software_left .iphone:hover{background: #750173 url(../images/icon.png) no-repeat 30px center;}
.software_left .current{background: #750173 url(../images/icon01.png) no-repeat 30px center;}
.software_right{width: 630px;height: 400px;background:url(../images/mobile.png) no-repeat left top;float: right;margin-top: 40px;position: relative;}
.software_right .one{width: 37px;height: 40px;display: block;position: absolute;left:50%;top:280px;animation: myFn 1.6s infinite linear;animation-delay:.4s;}
.software_right .two{width: 53px;height: 56px;display: block;position: absolute;left: 55%;top: 220px;animation: myFn01 1.6s infinite linear;animation-delay:.5s;}
.software_right .three{width: 37px;height: 40px;display: block;position: absolute;left:40%;bottom:120px;animation: myFn04 1.6s infinite linear;animation-delay:.5s;}
.software_right .four{width: 53px;height: 56px;display: block;position: absolute;left: 30%;bottom:180px;animation: myFn05 1.6s infinite linear;animation-delay:.6s;}
.software_right .five{width: 37px;height: 40px;display: block;position: absolute;left:46%;top:156px;animation: myFn02 1.6s infinite linear;animation-delay:.8s;}
.software_right .six{width: 53px;height: 56px;display: block;position: absolute;left: 60%;top:140px;animation: myFn03 1.6s infinite linear;
    animation-delay:.8s;}
.software_right .one:hover,.software_right .two:hover,.software_right .three:hover,.software_right .four:hover,.software_right .five:hover,.software_right .six:hover{
    -webkit-transform:translateY(-20px);
    -moz-transform:translateY(-20px);
    -ms-transform:translateY(-20px);
    -o-transform:translateY(-20px);
    transform:translateY(-20px);
}
.software_right .one,.software_right .two,.software_right .three,.software_right .four,.software_right .five,.software_right .six{
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}

@keyframes myFn{    
0%{ top:280px;}
50%{   top:260px;}
100%{   top:280px;}
}
@keyframes myFn04{    
0%{ bottom:120px;}
50%{   bottom:140px;}
100%{   bottom:120px;}
}
@keyframes myFn05{    
0%{ bottom:180px;}
50%{   bottom:200px;}
100%{   bottom:180px;}
}
@keyframes myFn01{    
0%{ top:220px;}
50%{   top:200px;}
100%{   top:220px;}
}
@keyframes myFn02{    
0%{ top:156px;}
50%{   top:136px;}
100%{   top:156px;}
}
@keyframes myFn03{    
0%{ top:140px;}
50%{   top:120px;}
100%{   top:140px;}
}

.software_bd{width: 100%;height:510px;background: #f0f2f6;}
.software_bd_right{width: 650px;height: 510px;overflow: hidden;float: left;position: relative;}
.software_bd_right ul{width: 650px;height:200px;overflow: hidden;position: absolute;left:0;top:50%;margin-top: -100px;}
.software_bd_right ul li{width: 184px;height: 184px;overflow: hidden;float: left;}
.software_bd_right ul li img{width: 100%;height:auto;}
.li01{z-index: 9;position: absolute;left:30%;top:0;}
.software_bd_right ul .li02{width: 160px;height: 160px;z-index: 8;position: absolute;left: 45%;top:10px;}
.software_bd_right ul .li03{width: 140px;height: 140px;z-index: 7;position: absolute;left: 62%;top:12px;}
.software_bd_right ul .li04{width: 160px;height: 160px;z-index: 8;position: absolute;right: 60%;top:10px;}
.software_bd_right ul .li05{width: 140px;height: 140px;z-index: 7;position: absolute;right: 74%;top:12px;}
.software_ft{width: 100%;height:500px;border-bottom: 1px solid #e5e5e5;}
.software_ft_right{width: 400px;height: 400px;overflow: hidden;padding-top:105px;float: right;}
.software_bd_right ul li{
    transition:all 1s;
}
.software_bd_right ul li:hover{
    width: auto;height:auto;transform:scale(1.1,1.1);z-index:11;

}
.none{display: none;}
.software_bd_right ul li:hover img{box-shadow:11px 6px 10px #333;}
@media (min-width:320px) and (max-width:639px) {    
.wrap{width: 93.75%;}
.banner{height:180px;}
.banner .on{display: none;}
.software_left{width: 100%;padding-bottom: 40px;}
.none{display: block;}
.block{display: none;}
.software_left .btn_b{width: 30%;height: 50px;margin-bottom: 10px;margin-right: 10px;}
.software_right{display: none;}
.software_right img{width: 100%;height:auto; }
.software_left h2{font-size: 20px;padding-top: 40px;padding-bottom:10px;}
.software_left p{font-size: 12px;line-height: 22px;padding-bottom: 30px;}
.software_bd_right ul{width: 100%;height:180px;left:0;}
.software_bd,.software{height:auto;}
.software_ft{height:auto;overflow: hidden;}
.software_ft_right{display: none;}
.software_ft_right img{width: 100%;}
.software_bd_right{display: none;}
.software_bd_right ul li{width: 120px;height: 120px;}
.software_bd_right ul .li02{width: 100px;height: 160px;z-index: 8;position: absolute;left: 50%;top:10px;}
.software_bd_right ul .li03{width: 80px;height: 140px;z-index: 7;position: absolute;left: 66%;top:12px;}
.software_bd_right ul .li04{width: 100px;height: 160px;z-index: 8;position: absolute;right: 46%;top:10px;}
.software_bd_right ul .li05{width: 80px;height: 140px;z-index: 7;position: absolute;right: 64%;top:12px;}
.software_left .iphone{background: #1b1c1e url(../images/icon.png) no-repeat 15px center;font-size: 12px;}
.software_left .android{background: #750173 url(../images/icon01.png) no-repeat 15px center;font-size: 12px;}
.software_left .iphone:hover{background: #750173 url(../images/icon.png) no-repeat 15px center;}
.software_left .current{background: #750173 url(../images/icon01.png) no-repeat 15px center;}
.software_left h2.none-b{padding-top: 0;}
}
@media (min-width:640px) and (max-width:1023px) {   
.wrap{width: 93.75%;}
.banner{height:260px;}
.banner .on{position: absolute;left:0px;top:176px;animation: myMove01 2s;}
.banner .on img{width: 100%;padding-left: 60px;}
.banner .on h3{font-size: 20px;left:260px;top:10px;}
.banner .on p{font-size: 14px;left:260px;top:40px;}
.software_left{float:none;margin:0 auto;overflow: hidden;padding-bottom: 40px;}
.software,.software_bd,.software_ft{height:auto;overflow: hidden;}
.none{display: block;}
.block{display: none;}
.software_left h2{font-size: 26px;padding-top: 40px;padding-bottom: 20px;}
.software_ft_right{float:none;margin:0 auto;}
.software_bd_right ul{left:20px;}
.software_ft_right{margin:0 auto;padding-top: 70px;}
.software_right{float:none;margin:0 auto;}
.software_bd_right{float:none;margin:0 auto;height: 400px;}
}
@media (min-width:1024px) and (max-width:1560px) {  
.wrap{width: 1000px;}
.software_left{width: 460px;}
.software_right,.software_bd_right{width: 500px;}

.software_bd_right ul{width: 550px;}
}