html,body,div{margin:0; padding:0;overflow: hidden;}
html,body{width:100%;height: 100%;}
.full{width:100%;height:100%; position: absolute;overflow: hidden}
.wp{display: none}

.loading{top:0;left:0;position: fixed;z-index: 2}
.loading_box{
    position: absolute;
    width:750px;
    height: 1500px;
    top:50%;
    margin-top:-750px;
    left:0;
    background: url("../images/loading_bg.jpg") no-repeat;

}

.flower{
    top:479px;left:288px;
    position: absolute;
    -webkit-transform-origin:center bottom ;
    -webkit-animation:flowerLoop 1.5s infinite linear;
}


@-webkit-keyframes flowerLoop {
    0%{-webkit-transform:rotate(0deg)}
    50%{-webkit-transform:rotate(10deg)}
    100%{-webkit-transform:rotate(0deg)}
}


.loading_music {
    top: 535px;
    left:368px;
    width: 215px;
    height: 128px;
    background: url('../images/music_sprites.png')no-repeat;
    animation: play 2s steps(10) infinite;
    position: absolute;
    -webkit-transform:scale(2);
}

@keyframes play {
    100% { background-position: -2150px 0;; }
    /*100% { background-position: -4300px 0;; }*/
}


.loading_in{
    -webkit-animation:loadingIn 1s;
    -webkit-animation-fill-mode: both;
}
@-webkit-keyframes loadingIn {
    0%{opacity: 0}
    100%{opacity: 1}
}


.loading_out{
    -webkit-animation:loadingOut 1s;
    -webkit-animation-fill-mode: both;
}
@-webkit-keyframes loadingOut {
    0%{opacity: 1}
    100%{opacity: 0}
}


.start_btn{
    top:884px;left:247px;
    position: absolute;
}


#container{width:100%;height:100%;position: fixed;top:0;left:0;}
.video_box{
    position: absolute;
    transform-origin: 0% 0% 0px;
    width: 750px;
    height: 1500px;
    overflow: hidden;
    display: block;
    left: 0;
    top: 50%;
    margin-top:-750px;
}
.btn{
    width:200px;
    height:100px;
    background:red;
    display: none;
    top:0;left:0;position: absolute;
}
#video{
    /*width:1px;*/
    display:block;
}

.end_bg{

    background: url("../images/end_bg.jpg") no-repeat center;
    background-size: cover;
}

.end_btn_box{
    position: absolute;
    width: 651px;
    height: 130px;
    background: url("../images/end_btn.png") no-repeat;
    bottom: 100px;
    left:50px;
}

.btn_l,.btn_r{
    width:260px;
    height:95px;
    /*border:1px solid red;*/
    position: absolute;
}
.btn_l{ top:20px;left:20px;}
.btn_r{top:20px;right:20px;}

.tip_out{
    -webkit-animation:tipOutTween 1s linear;
    -webkit-animation-fill-mode: both;
}

@-webkit-keyframes tipOutTween {
    0%{opacity:1}
    100%{opacity:0}
}
.tip_box{
    width: 750px;
    height:1500px;
    /*background: url("../images/test.jpg") no-repeat;*/
    position: absolute;
    z-index: 2;
    top:50%;
    margin:-750px 0 0 0;
}

.tip_box2{
    width: 260px;height: 150px;
    top:930px;left:143px;position: absolute;
}
.tip_round{
    width:100%;height: 100%;
    top:45px;left:55px;
    position: absolute;
}

.item{
    width: 58px;
    height: 58px;
    background: url("../images/tip_round.png") no-repeat;
    -webkit-animation:itemLoop 1s infinite linear;
    position: absolute;
    opacity:0;
}


@-webkit-keyframes itemLoop {
    0%{-webkit-transform:scale(0);opacity:1}
    100%{-webkit-transform:scale(1.8);opacity:0}
}


.black_bg{
    background:#000;
    opacity:.8;
    /*z-index:10;*/
    position: absolute;
}



.share_icon {
    width: 166px;
    height: 67px;
    right:50px;
    top:50px;
    position: absolute;
    background: url('../images/share.png')no-repeat;
    animation: play2 1.5s steps(10) infinite;
    -webkit-transform:scale(2);
}

@keyframes play2 {
    100% { background-position: -1162px 0;; }
    /*100% { background-position: -4300px 0;; }*/
}


.clickNone{pointer-events:none}