﻿#pagescrollNew{
    height:100%;
}
.fp-tableCell{
    vertical-align:top;
}
.section img{
    width:100%;
}

/*第一屏*/
.page_one{
    background:url("../../../../images/publicity/img/page1_bg.jpg");
    background-size:100% 100%;
    position:relative;
}
.page_one .QR-code{
    width:300px;
    position:absolute;
    left:17%;
    top:40%;
    opacity:0;
}
.page_one.active .QR-code{
    -webkit-animation: fade-in-left .8s ease 1s forwards;
    animation: fade-in-left .8s ease 1s forwards;
    width: 442px;
    overflow: hidden;
}
.page_one.active .QR-code img{
    width: 442px;
}
/*第三屏*/
.page_three{
    background:url("../../../../images/publicity/img/page3_bg.jpg");
    background-size:100% 100%;
    position:relative;
}
.page_three img{
    width:400px;
    position:absolute;
    left:17%;
    top:40%;
    opacity:0;
}
.page_three.active img{
    -webkit-animation: fade-in-left .5s ease 1s forwards;
    animation: fade-in-left .5s ease 1s forwards;
}
/*第四屏*/
.page_four{
    background:url("../../../../images/publicity/img/page4_bg.jpg");
    background-size:100% 100%;
    position:relative;
}
.page_four img{
    width:200px;
    position:absolute;
    right:20%;
    top:30%;
    opacity:0;
}
.page_four.active img{
    -webkit-animation: fade-in-right .5s ease 1s forwards;
    animation: fade-in-right .5s ease 1s forwards;
}
/*第五屏*/
.page_five{
    background:url("../../../../images/publicity/img/page5_bg.jpg");
    background-size:100% 100%;
    position:relative;
}
.page_five img{
    width:320px;
    position:absolute;
    right:20%;
    bottom:-100%;
    opacity:0;
}
.page_five.active img{
    -webkit-animation: fade-in-bottom .5s ease 1s forwards;
    animation: fade-in-bottom .5s ease 1s forwards;
}
/*第六屏*/
.page_six{
    background:url("../../../../images/publicity/img/page6_bg.jpg");
    background-size:100% 100%;
    position:relative;
}
.page_six img{
    width: auto;
    height: 50%;
    position: absolute;
    left: 12%;
    bottom: 0;
    opacity: 0;
}
.page_six.active img{
    -webkit-animation: fade-in-left .5s ease 1s forwards;
    animation: fade-in-left .5s ease 1s forwards;
}
/*第八屏*/
.page_eight{
    background:url("../../../../images/publicity/img/page8_bg.jpg");
    background-size:100% 100%;
    position:relative;
}
.page_eight img{
    width: auto;
    height: 70%;
    position: absolute;
    right: 16%;
    bottom: -100%;
    opacity: 0;
}
.page_eight.active img{
    -webkit-animation: fade-in-left .5s ease 1s forwards;
    animation: fade-in-bottom .5s ease 1s forwards;
}

@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translate3d(-180px,0,0);
        opacity: 0
    }

    100% {
        -webkit-transform: translate3d(0,0,0);
        opacity: 1
    }
}
@keyframes fade-in-left {
    0% {
        transform: translate3d(-180px,0,0);
        opacity: 0
    }

    100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translate3d(120px,0,0);
        opacity: 0
    }

    100% {
        -webkit-transform: translate3d(0,0,0);
        opacity: 1
    }
}
@keyframes fade-in-right {
    0% {
        transform: translate3d(180px,0,0);
        opacity: 0
    }

    100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fade-in-bottom {
    0% {
        bottom:-100%;
        opacity: 0;
    }
    100% {
        bottom:0;
        opacity: 1
    }
}
@keyframes fade-in-bottom {
    0% {
        bottom:-100%;
        opacity: 0;
    }
    100% {
        bottom:0;
        opacity: 1
    }
}