@import "compass";
@import "compass/reset";
@import "base/variable";
@import "base/animate";
@import "base/swiper";

html, body {
    width: 100%;
    height: 100%;
}

body {
    font-family: helvetica,Arial,"SimHei";
    background: image-url("bg.png") repeat-y;
    background-size: 100% auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.endact {
    background: #fff;
    display: block;
    width: 100%;
    height: 100%;

    span {
        display: block;
        width: 100%;
        height: 100%;
        background: inline_image("over.jpg") center center no-repeat;
    }
}

.overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 99;
}

.swiper-container, .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.swiper-slide {
    overflow: hidden;
}

.page1 {
    /*background: image-url("pege1-wyf.jpg") no-repeat center bottom;*/
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;

    img {
        display: block;
        overflow: hidden;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .enter-next {
        position: absolute;
        bottom: pxToRem(156px);
        left: 50%;
        margin: 0 0 0 pxToRem(-182px);
        width: pxToRem(365px);
        height: pxToRem(113px);
        background: image-url("pege1-tip.png");
        background-size: 100% 100%;
        z-index: 10;
    }
}

.page3, .page4 {
    /*background: image-url("pege2-wyf.jpg") no-repeat center bottom;
    background-size: 100% auto;*/
    .wyf-bg {
        display: block;
        overflow: hidden;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    #tip-source {
        display: none;
    }

    #t1, #t2 {
        position: absolute;
        display: block;
        padding: 0 pxToRem(20px);
        height: pxToRem(60px);
        line-height: pxToRem(60px);
        background: #5a4d49;
        font-size: pxToRem(35px);
        font-weight: bold;
        border-right: pxToRem(2px) solid #fff;
        border-bottom: pxToRem(2px) solid #fff;
        color: #fff;

        @include box-shadow(2px 10px 10px #5a4d49);

        em {
            color: #a0c185;
        }
    }

    #t1 {
        z-index: 2;
        bottom: pxToRem(861px);
        left: 50%;
        margin-left: pxToRem(-216px);

        @include transform(rotate(-2deg));
    }

    #t2 {
        z-index: 1;
        bottom: pxToRem(787px);
        left: 50%;
        margin-left: pxToRem(-144px);

        @include transform(rotate(1deg));
    }
}

.receive-gift {
    .receive {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: pxToRem(-256px) 0 0 pxToRem(-161px);
        width: pxToRem(143px);
        height: pxToRem(109px);
        background: image-url("recive-icon.png");
        background-size: 100% 100%;
    }

    .gift {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: pxToRem(-136px) 0 0 pxToRem(-153px);
        width: pxToRem(307px);
        height: pxToRem(273px);
        background: image-url("gift-icon.png");
        background-size: 100% 100%;
    }
}

.page4 {
    .overlay {
        display: block;
    }

    .receive-success {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-image: image-url("recive-success.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;

        a {
            position: absolute;
            left: 50%;
            top: 50%;
            margin: pxToRem(320px) 0 0 pxToRem(-139px);
            width: pxToRem(278px);
            height: pxToRem(76px);
        }
    }

    .have-received {
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: pxToRem(-118px) 0 0 pxToRem(-167px);
        width: pxToRem(334px);
        height: pxToRem(237px);
        background-image: image-url("have-recived.png");
        background-size: 100% 100%;

        a {
            position: absolute;
            width: pxToRem(329px);
            height: pxToRem(74px);
            left: 0;
            bottom: 0;
        }
    }
}

.page4.received {
    .receive-success {
        display: none;
    }

    .have-received {
        display: block;
    }
}

.page4.success {
    .receive-success {
        display: block;
    }

    .have-received {
        display: none;
    }
}

@include keyframes(dropDown) {
    0%, 30% {
        @include opacity(0);

        @include translate(0, 10px);
    }

    60% {
        @include opacity(1);

        @include translate(0, 0);
    }

    100% {
        @include opacity(0);

        @include translate(0, -10px);
    }
}


.page6 {
    .hd {
        padding: pxToRem(12px) 0 0;
        height: pxToRem(246px);
        background: image-url("pege6-wyf.png") no-repeat right pxToRem(12px);
        background-size: auto 100%;
    }

    .bd {
        width: pxToRem(600px);
        margin: pxToRem(-50px) auto 0;

        li {
            height: pxToRem(176px);
            line-height: pxToRem(176px);
            margin: 0 0 pxToRem(3px);
            text-align: center;
            font-size: 0;

            img {
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
            }
        }
    }

    .ft {
        position: relative;

        h2 {
            line-height: pxToRem(35px);
            color: #fff;
            font-size: 0;
            text-align: center;

            span, em {
                display: inline-block;
                font-size: pxToRem(24px);
            }

            span {
                margin: 0 pxToRem(11px);
            }

            em {
                width: pxToRem(133px);
                height: 1px;
                background: #fff;
                vertical-align: 20%;
            }
        }

        .down-icon {
            position: absolute;
            top: pxToRem(40px);
            left: 0;
            right: 0;
            height: pxToRem(30px);
            background: image-url("down.png") no-repeat center center;
            background-size: auto 100%;

            @include animation(dropDown 2s linear infinite);
        }
    }
}

.page7 {
    /*background: image-url("pege7-wyf.gif") no-repeat center bottom;
    background-size: 100% auto;*/

    img {
        display: block;
        overflow: hidden;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    a {
        position: absolute;
        bottom: pxToRem(112px);
        left: 50%;
        margin: 0 0 0 pxToRem(-142px);
        width: pxToRem(285px);
        height: pxToRem(101px);
        z-index: 10;
    }

    .share {
        position: absolute;
        top: pxToRem(99px);
        right: pxToRem(94px);
        width: pxToRem(382px);
        height: pxToRem(430px);
        background-image: image-url("share.png");
        background-size: 100% 100%;
    }
}

/*video*/
.video-w-one-dimensions, .video-w-two-dimensions {
    width: 100%;
    height: 100%;
    display: none;
}

:-webkit-full-screen video {
    width: 100%;
    height: 100%;
}

@media screen and (max-height: 504px) {
    .page1 {
        background-position: center center;
    }

    .page3, .page4 {
        #t1 {
            top: pxToRem(32px);
            bottom: auto;
        }

        #t2 {
            top: pxToRem(110px);
            bottom: auto;
        }
    }

    .page6 {
        .hd {
            padding: 0;
        }

        .bd {
            margin: pxToRem(-70px) auto 0;
        }
    }
}