*{margin: 0;padding: 0;list-style: none}
.hide{
    display: none;
}
.inHide{
    visibility: hidden;
}
.iBox{
    height: 8.6rem;
    /*width: 100%;*/
}
.iBox1{
    /*margin-top: .7rem;*/
    width: 5.47rem;
    height: 6.88rem;
    box-sizing: border-box;
    /*margin-top: 1.1rem;*/
    margin: .8rem auto 1.5rem auto;
    background: url("/images/mobile/mw_01_middle.png") no-repeat;
    background-size: contain;
}
.item{
    display: inline-block;
    position: absolute;
    border-radius: .8rem;
}
.item2{
    display: inline-block;
    position: relative;
    border-radius: .8rem;
}
.item3{
    display: inline-block;
    position: relative;
}
.item11{
    width: .67rem;
    height: .67rem;
    background: url("/images/mobile/mw_01_file.png") no-repeat;
    background-size: 100% 100%;
}
.item11Anime11{
    animation-name:item11, item111;
    animation-duration:2s, 2s;
    animation-timing-function:linear, linear;
    animation-delay:0s, 2s;
    animation-iteration-count:1, infinite;
    animation-fill-mode:forwards, forwards;
    animation-direction:normal, alternate;
    -webkit-animation-name:item11, item111;
    -webkit-animation-duration:2s, 2s;
    -webkit-animation-timing-function:linear, linear;
    -webkit-animation-delay:0s, 2s;
    -webkit-animation-iteration-count:1, infinite;
    -webkit-animation-fill-mode:forwards, forwards;
    -webkit-animation-direction:normal, alternate;
}
.item12{
    width: .92rem;
    height: .92rem;
    background: url("/images/mobile/mw_01_music.png") no-repeat;
    background-size: 100% 100%;
}
.item11Anime12{
    animation-name:item12, item121;
    animation-duration:2s, 2s;
    animation-timing-function:ease-in, linear;
    animation-delay:0s, 3s;
    animation-iteration-count:1, infinite;
    animation-fill-mode:forwards, forwards;
    animation-direction:normal, alternate;
    -webkit-animation-name:item12, item121;
    -webkit-animation-duration:2s, 2s;
    -webkit-animation-timing-function:linear, linear;
    -webkit-animation-delay:0s, 2s;
    -webkit-animation-iteration-count:1, infinite;
    -webkit-animation-fill-mode:forwards, forwards;
    -webkit-animation-direction:normal, alternate;
}
.item13{
    width: .86rem;
    height: .86rem;
    background: url("/images/mobile/mw_01_game.png") no-repeat;
    background-size: 100% 100%;
}
.item11Anime13{
    animation-name:item13, item131;
    animation-duration:2s, 2s;
    animation-timing-function:ease-in, linear;
    animation-delay:0s, 3s;
    animation-iteration-count:1, infinite;
    animation-fill-mode:forwards, forwards;
    animation-direction:normal, alternate;
    -webkit-animation-name:item13, item131;
    -webkit-animation-duration:2s, 2s;
    -webkit-animation-timing-function:linear, linear;
    -webkit-animation-delay:0s, 2s;
    -webkit-animation-iteration-count:1, infinite;
    -webkit-animation-fill-mode:forwards, forwards;
    -webkit-animation-direction:normal, alternate;
}
.item14{
    width: .95rem;
    height: .95rem;
    background: url("/images/mobile/mw_01_vedio.png") no-repeat;
    background-size: 100% 100%;
}
.item11Anime14{
    animation-name:item14, item141;
    animation-duration:2s, 2s;
    animation-timing-function:ease-in, linear;
    animation-delay:0s, 3s;
    animation-iteration-count:1, infinite;
    animation-fill-mode:forwards, forwards;
    animation-direction:normal, alternate;
    -webkit-animation-name:item14, item141;
    -webkit-animation-duration:2s, 2s;
    -webkit-animation-timing-function:linear, linear;
    -webkit-animation-delay:0s, 2s;
    -webkit-animation-iteration-count:1, infinite;
    -webkit-animation-fill-mode:forwards, forwards;
    -webkit-animation-direction:normal, alternate;
}
.item15{
    width: 1.21rem;
    height: 1.21rem;
    background: url("/images/mobile/mw_01_picture.png") no-repeat;
    background-size: 100% 100%;
}
.item11Anime15{
    animation-name:item15, item151;
    animation-duration:2s, 2s;
    animation-timing-function:ease-in, linear;
    animation-delay:0s, 3s;
    animation-iteration-count:1, infinite;
    animation-fill-mode:forwards, forwards;
    animation-direction:normal, alternate;
    -webkit-animation-name:item15, item151;
    -webkit-animation-duration:2s, 2s;
    -webkit-animation-timing-function:linear, linear;
    -webkit-animation-delay:0s, 2s;
    -webkit-animation-iteration-count:1, infinite;
    -webkit-animation-fill-mode:forwards, forwards;
    -webkit-animation-direction:normal, alternate;
}
/*page1的动画*/
/*animation: spaceMan 2s infinite alternate;*/
@keyframes item111
{
    from {transform:translateY(3rem) translateX(-3rem);}
    to {transform:translateY(3.3rem) translateX(-3rem);}
}
@-webkit-keyframes item111
{
    from {-webkit-transform:translateY(3rem) translateX(-3rem);}
    to {-webkit-transform:translateY(3.3rem) translateX(-3rem);}
}
@keyframes item11
{
    from {transform:translateY(2rem) translateX(-1.2rem) scale(0.1);}
    to {transform:translateY(3rem) translateX(-3rem) scale(1);}
}
@-webkit-keyframes item11
{
    from {-webkit-transform:translateY(2rem) translateX(-1.2rem) scale(0.1);}
    to {-webkit-transform:translateY(3rem) translateX(-3rem) scale(1);}
}
/**/

@keyframes item12
{
    from {transform:translateY(2rem) translateX(-1.2rem) scale(0.1);}
    to {transform:translateY(1rem) translateX(-2.5rem) scale(1);}
}
@-webkit-keyframes item12
{
    from {-webkit-transform:translateY(2rem) translateX(-1.2rem) scale(0.1);}
    to {-webkit-transform:translateY(1rem) translateX(-2.5rem) scale(1);}
}
@keyframes item121
{
    from {transform:translateY(1rem) translateX(-2.5rem);}
    to {transform:translateY(1.3rem) translateX(-2.5rem);}
}
@-webkit-keyframes item121
{
    from {-webkit-transform:translateY(1rem) translateX(-2.5rem)}
    to {-webkit-transform:translateY(1.3rem) translateX(-2.5rem)}
}
/*

*/
@keyframes item13
{
    from {transform:translateY(2rem) translateX(-1.2rem) scale(0.1);}
    to {transform:translateY(0rem) translateX(-.9rem) scale(1);}
}
@-webkit-keyframes item13
{
    from {-webkit-transform:translateY(2rem) translateX(-1.2rem) scale(0.1);}
    to {-webkit-transform:translateY(0rem) translateX(-.9rem) scale(1);}
}
@keyframes item131
{
    from {transform:translateY(0rem) translateX(-.9rem);}
    to {transform:translateY(0.3rem) translateX(-.9rem);}
}
@-webkit-keyframes item131
{
    from {-webkit-transform:translateY(0rem) translateX(-.9rem)}
    to {-webkit-transform:translateY(0.3rem) translateX(-.9rem)}
}

/*


*/
@keyframes item14
{
    from {transform:translateY(2rem) translateX(-1.2rem) scale(0.1);}
    to {transform:translateY(.7rem) translateX(2rem) scale(1);}
}
@-webkit-keyframes item14
{
    from {-webkit-transform:translateY(2rem) translateX(-1.2rem) scale(0.1);}
    to {-webkit-transform:translateY(.7rem) translateX(2rem) scale(1);}
}
@keyframes item141
{
    from {transform:translateY(.7rem) translateX(2rem);}
    to {transform:translateY(1rem) translateX(2rem);}
}
@-webkit-keyframes item141
{
    from {-webkit-transform:translateY(.7rem) translateX(2rem)}
    to {-webkit-transform:translateY(1rem) translateX(2rem)}
}

/*
*/

@keyframes item15
{
    from {transform:translateY(2rem) translateX(-1.2rem) scale(0.1);}
    to {transform:translateY(2.2rem) translateX(2.2rem) scale(1);}
}
@-webkit-keyframes item15
{
    from {-webkit-transform:translateY(2rem) translateX(-1.2rem) scale(0.1);}
    to {-webkit-transform:translateY(2.2rem) translateX(2.2rem) scale(1);}
}
@keyframes item151
{
    from {transform:translateY(2.2rem) translateX(2.2rem);}
    to {transform:translateY(2.5rem) translateX(2.2rem);}
}
@-webkit-keyframes item151
{
    from {-webkit-transform:translateY(2.2rem) translateX(2.2rem)}
    to {-webkit-transform:translateY(2.5rem) translateX(2.2rem)}
}





.fBox{
    position: fixed;
    top:80%;
    width: 100%;
    line-height: 20px;
    font-size: 16px;

}
.f1{
    color:#484848;
    font: .36rem "时尚中黑简体";
    opacity: .8;
    width: 100%;
    text-align: center;
    /*position: fixed;*/
}
.f2{
    color:#484848;
    width: 100%;
    font: .56rem "时尚中黑简体";
    text-align: center;
    /*position: fixed;*/
}



/*page2*/
.iBox2{
    width: 5.4rem;
    height: 5.4rem;
    background: url("/images/mobile/mw_02_middle.png") no-repeat;
    background-size: contain;
    margin: 1.47rem auto 2.2rem auto;
    position: relative;
}
.item21{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background: url("/images/mobile/mw_02_rotate.png") no-repeat;
    background-size: contain;
}

.item21Anime{
    animation-name:item21;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    -webkit-animation-name:item21;
    -webkit-animation-duration:5s;;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
}

@keyframes item21
{
    from {transform:rotate(0);}
    to {transform:rotate(360deg);}
}
@-webkit-keyframes item21
{
    from { -webkit-transform:rotate(0);}
    to { -webkit-transform:rotate(360deg);}
}

.item22{
    width: 1.65rem;
    height: 1.66rem;
    background: url("/images/mobile/mw_02_android.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 15%;
    margin-left: -0.8rem;
}
.item23{
    position: absolute;
    width: 1.56rem;
    height: 1.56rem;
    background: url("/images/mobile/mw_02_pc.png") no-repeat;
    background-size: 100% 100%;
    left: 60%;
    top: 0;
    margin-top: -0.6rem;
}
.item24{
    position: absolute;
    width: 1.65rem;
    height: 1.66rem;
    right: 0;
    top: 50%;
    margin-right: -0.8rem;
    margin-top: -0.8rem;
    background: url("/images/mobile/mw_02_iphone.png") no-repeat;
    background-size: 100% 100%;

}
.item25{
    position: absolute;
    width: 1.25rem;
    height: 1.24rem;
    left: 70%;
    bottom: 0;
    background: url("/images/mobile/mw_02_wp.png") no-repeat;
    background-size: 100% 100%;
}
.item26{
    position: absolute;
    width: 1.33rem;
    height: 1.33rem;
    left: 10%;
    bottom: 0;
    background: url("/images/mobile/mw_02_ox.png") no-repeat;
    background-size: 100% 100%;
}
.item226Anime{
    animation-name:item226;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-iteration-count:1;
    -webkit-animation-name:item226;
    -webkit-animation-duration:1s;;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:1;
}

@keyframes item226
{
    from {transform: scale(0);}
    to {transform: scale(1);}
}
@-webkit-keyframes item226
{
    from { -webkit-transform:scale(0);}
    to { -webkit-transform:scale(1);}
}


/*page3*/
.iBox3{
    margin-bottom: -1rem;
}
.item31{
    display: block;
    width: 4.66rem;
    height: 3.87rem;
    margin: 1.1rem auto -1rem auto;
background: url("/images/mobile/mw_03_rabbit.png") no-repeat;
    background-size: contain;
}
.item32{
    width: 2.69rem;
    height: 2.75rem;
    background:url("/images/mobile/mw_03_cat.png") no-repeat;
    background-size: 100% 100%;
}
.item33{
    width: 1.26rem;
    height: 2.1rem;
    background: url("/images/mobile/mw_03_man.png") no-repeat;
    background-size: 100% 100%;
}
.item34{
    width: 1.41rem;
    height: 1.61rem;
    background: url("/images/mobile/mw_03_mouse.png") no-repeat;
    background-size: 100% 100%;
}
.item3Anime{
    animation-name:item314;
    animation-duration:2s;
    animation-timing-function:linear;
    animation-iteration-count:1;
    -webkit-animation-name:item314;
    -webkit-animation-duration:2s;;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:1;
}

@keyframes item314
{
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes item314
{
    from { opacity: 0;}
    to { opacity: 1;}
}

.downBtn>i{
    display: inline-block;
    position: fixed;
    width: 1.56rem;
    height: 1.56rem;
    border-radius: 1.56rem;
    background-color: white;
    top:65%;
    left: 80%;
}
.downBtn>i>img{
    width: 1.56rem;
    height: 1.56rem;
}

.downBtnAnime{
    animation-name:downBtnAnime;
    animation-duration:.5s;
    animation-timing-function:linear;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
    -webkit-animation-name:downBtnAnime;
    -webkit-animation-duration:.5s;;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode:forwards;;
}
.downBtnAnime2{
    animation-name:downBtnAnime2;
    animation-duration:.5s;
    animation-timing-function:linear;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
    -webkit-animation-name:downBtnAnime2;
    -webkit-animation-duration:.5s;;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode:forwards;;
}
.downBtn>div{
    display: inline-block;
    position: fixed;
    height: 1.08rem;
    width: 4.08rem;
    background: url("/images/mobile/download.png") no-repeat;
    background-size: 100% 100%;
    top:67%;
    transform:translateX(148%);
    -webkit-transform:translateX(148%);
}


@keyframes downBtnAnime
{
    from{transform: translateX(148%)}
    to{transform: translateX(39%)}
}
@-webkit-keyframes downBtnAnime
{
    from{-webkit-transform: translateX(148%)}
    to{-webkit-transform: translateX(39%)}
}
@keyframes downBtnAnime2
{
    from{transform: translateX(39%)}
    to{transform: translateX(148%)}
}
@-webkit-keyframes downBtnAnime2
{
    from{-webkit-transform: translateX(39%)}
    to{-webkit-transform: translateX(148%)}
}


/*

媒体查询


*/

@media screen and (-webkit-min-device-pixel-ratio : 2) {
    .iBox1{
        margin:.6rem auto 2rem auto;
    }
    .iBox2{
        margin:1.5rem auto 2.2rem auto;
    }
    .iBox3{
        margin-bottom: 0;
    }
    .item31{
        margin:.8rem auto -1.3rem auto;
    }

}


@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {
    .iBox1{
        margin: 0 auto -1rem auto;
    }

    .iBox2{
        margin:.6rem auto -2rem auto;
    }

    .item31{
        margin:0 auto -2rem auto;
    }

    .iBox3{
        margin-bottom: -1rem;
    }

    @keyframes downBtnAnime
    {
        from{transform: translateX(148%)}
        to{transform: translateX(42%)}
    }
    @-webkit-keyframes downBtnAnime
    {
        from{-webkit-transform: translateX(148%)}
        to{-webkit-transform: translateX(42%)}
    }
    @keyframes downBtnAnime2
    {
        from{transform: translateX(42%)}
        to{transform: translateX(148%)}
    }
    @-webkit-keyframes downBtnAnime2
    {
        from{-webkit-transform: translateX(42%)}
        to{-webkit-transform: translateX(148%)}
    }
    .fBox{
        top:82%;
    }
}

@media screen and (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {
    .item31{
        margin:0 auto -2rem auto;
    }
}