html, body { margin: 0; padding: 0; font-family:"微软雅黑" }
body{background: #262629;color:#7f8286;width: 100%;overflow-x: hidden;}
body h3{font-size: 100%;}
a{ text-decoration:none }
.section { position: relative;width: 100%;min-width:1200px;background-repeat: no-repeat;background-position: center top;color:#fff;}
.section1{height:817px;background-image: url(https://app.games.laohu.com/_s/v3/section-01.jpg);}
.section2{height:1080px;background-image: url(https://app.games.laohu.com/_s/v3/section-02.jpg);}
.section3{height:995px;background-image: url(https://app.games.laohu.com/_s/v3/section-03.jpg);}
.section4{height:1198px;background-image: url(https://app.games.laohu.com/_s/v3/section-04.jpg);}
.section-box{position:absolute;left:0;width: 100%;height:780px;background-repeat: no-repeat;background-position: center top;-webkit-transform: translate3d(0,20px,0);transform: translate3d(0,20px,0);-ms-transform: translate3d(0,20px,0);-moz-transform: translate3d(0,20px,0); }
.section1-box{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);top:0;background-image: url(https://app.games.laohu.com/_s/v3/page1-box.png);}
.section2-box{top:110px;background-image: url(https://app.games.laohu.com/_s/v3/page2-box.png);}
.section3-box{top:70px;background-image: url(https://app.games.laohu.com/_s/v3/page3-box.png);}
.section4-box{top:146px;background-image: url(https://app.games.laohu.com/_s/v3/page4-box.png);}
.rep{width: 1200px;margin:0 auto;position: relative;}
.section1-iphone,.section3-iphone{transform:translateX(-200%);-webkit-transform:translateX(-200%);-moz-transform:translateX(-200%);-ms-transform:translateX(-200%);}
.section2-iphone,.section4-iphone{transform:translateX(200%);-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);}
.section1-iphone{position: absolute;left:-28px;top:80px;width: 362px;height: 711px;background: url(https://app.games.laohu.com/_s/v3/page1-iphone.png) no-repeat center;}
.section2-iphone{position: absolute;right:-75px;top:100px;width: 508px;height: 712px;background: url(https://app.games.laohu.com/_s/v3/page2-iphone.png) no-repeat center;}
.section3-iphone{position: absolute;left:-75px;top:35px;width: 479px;height: 712px;background: url(https://app.games.laohu.com/_s/v3/page3-iphone.png) no-repeat center;}
.section4-iphone{position: absolute;right:-75px;top:30px;width: 525px;height: 711px;background: url(https://app.games.laohu.com/_s/v3/page4-iphone.png) no-repeat center;}
.section-title{opacity: 0;}
.sider-nav{position: fixed;top:50%;margin-top:-150px;right: 60px;width:40px;z-index: 333;}
.sider-dot{width: 5px;margin:0 auto;overflow: hidden;}
.sider-dot span{float:left;margin:4px auto;width: 4px;height: 4px;border-radius: 50%;background-color: #a8a8a9;}
.sider-item{display: block;margin:0 auto;width: 33px;height: 33px;background: url(https://app.games.laohu.com/_s/v3/sider.png) no-repeat center;}
.sider-item:hover,.sider-item.on{background-image: url(https://app.games.laohu.com/_s/v3/sider-hov.png);}
.section1-tex{position: absolute;top:135px;left:480px;width: 760px;}
.section-mid-title{margin-bottom:8px;font-size: 44px;}
.section-min-title{font-size: 34px;line-height: 45px;}
.section-min-title span{font-size: 26px;display: block;}
.section-max-title{padding-bottom:6px;font-size: 60px;}
.section1-btn{position: absolute;left: 0;top:200px;width: 220px;opacity: 0;}
.section1-btn .btn-down{margin:4px 0;}
.section1-code{position: absolute;left: 250px;top:200px;width: 226px;height: 156px;background: url(https://app.games.laohu.com/_s/v3/section1-code-bg.png) no-repeat center;opacity: 0;}
.section1-code img{display: block;margin:10px 0 0 36px;width: 136px;height: 136px;}
.btn-down{display: inline-block;*display: inline;*zoom:1;}
.section2-tex{position: absolute;left: 0;top:280px;width: 520px;text-align: right;}
.section-btn{margin:50px 0 0 50px;opacity: 0;}
.section-btn .btn-down{margin:0 4px;}
.section3-tex{left:580px;top:300px;width: 630px;}
.section3-box .section-btn{margin-left:0;}
.section4-box .section2-tex{top:200px;}
.section4-box .section-max-title{font-size: 68px;}
.leftIn{animation:leftIn 1.2s ease-in forwards;-webkit-animation:leftIn 1.2s ease-in forwards;-moz-animation:leftIn 1.2s ease-in forwards;}
.rightIn{animation:rightIn 1.2s ease-in forwards;-webkit-animation:rightIn 1.2s ease-in forwards;-moz-animation:rightIn 1.2s ease-in forwards;}
.fadeInUp{animation:fadeInUp 0.6s 1s ease-in forwards;-webkit-animation:fadeInUp 0.6s 1s ease-in forwards;-moz-animation:fadeInUp 0.6s 1s ease-in forwards;}
.fadeUp{animation:fadeUp 2.2s ease forwards;-webkit-animation:fadeUp 2.2s ease forwards;-moz-animation:fadeUp 2.2s ease forwards;}

@keyframes leftIn {
    0% {
        opacity: 1;
        transform:translateX(-200%)
    }

    100% {
        opacity: 1;
        transform:translateX(0)
    }
}
@-webkit-keyframes leftIn {
    0% {
        opacity: 1;
        transform:translateX(-200%)
    }

    100% {
        opacity: 1;
        transform:translateX(0)
    }
}
@-moz-keyframes leftIn {
    0% {
        opacity: 1;
        transform:translateX(-200%)
    }

    100% {
        opacity: 1;
        transform:translateX(0)
    }
}

@keyframes rightIn {
     0% {
        opacity: 1;
        transform:translateX(200%)
    }

    100% {
        opacity: 1;
        transform:translateX(0)
    }
}
@-webkit-keyframes rightIn {
     0% {
        opacity: 1;
        transform:translateX(200%)
    }

    100% {
        opacity: 1;
        transform:translateX(0)
    }
}
@-moz-keyframes rightIn {
     0% {
        opacity: 1;
        transform:translateX(200%)
    }

    100% {
        opacity: 1;
        transform:translateX(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,5%,0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,20px,0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,20px,0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeUp {
    0% {
        opacity: 1;
        transform: translate3d(0,20px,0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}
@-webkit-keyframes fadeUp {
    0% {
        opacity: 1;
        transform: translate3d(0,20px,0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@-moz-keyframes fadeUp {
    0% {
        opacity: 1;
        transform: translate3d(0,20px,0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}