*{ margin:0;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-text-size-adjust:none;}


body {
    font-family: Microsoft Yahei;
    font-weight: 400;
    background: black;
    margin: 0;
    padding: 0;
    text-align:center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

html {
    font-size: 20px;
    -webkit-text-size-adjust:none;
}
ul,li{
    margin:0;
    padding: 0;
}

.black{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0);
    text-align: center;
    z-index: 99;
}

.frame{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    background: white; 
    z-index: 100;
}
.bottom{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999; 
    background: white;
    overflow-x: auto;
    overflow-y: hidden;
}
.black-t{
    position: absolute;
    top:0%;
    height: 100%;
    left: 0%;
    background: rgb(0,0,0);
    text-align: center;
    z-index: 99999;
}

.main{
    width: 100%;
    height: 100%;
    
}
.bottom_image{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url(../horizon_hint.png) 50% 50% /80% auto no-repeat;
}

.game{
    position:absolute;
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px;
    z-index: 100;
}

.index{
    position:absolute;
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px;
    z-index: 200;
    background: url('../index/bg.png') center /auto 100% no-repeat;
    
}
.stage{
    position:absolute;
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px;
    z-index: 300;
    background-image: url('../bg.png');
    background-position: 0px;
    background-size: auto 100% ;
    background-repeat: repeat-x;
    display:none;
    overflow: hidden;
}


.title{
    position:absolute;
    width: 100%; 
    height: 70%; 
    left: 0px; 
    top: 20%;
    z-index: 200;
    background: url('../index/title.png') center /auto 100% no-repeat;
}

.title-bg{
    position:absolute;
    width: 50%;
    height: 70%;
    left: 25%;
    top: 2%;
    z-index: 190;
    background: url('../index/title-bg.png') center /auto 100% no-repeat;
    animation: clockwise 80s linear 0s infinite forwards;
    -moz-animation: clockwise 80s linear 0s infinite forwards;
    -webkit-animation: clockwise 80s linear 0s infinite forwards;
    -o-animation: clockwise 80s linear 0s infinite forwards;
}

.start{
    position:absolute;
    width: 30%;
    height: 9%;
    left: 35%;
    top: 72%;
    z-index: 201;
    background: url('../index/start.png') center /auto 100% no-repeat;
}
.help{
    position:absolute;
    width: 30%;
    height: 9%;
    left: 35%;
    top: 83%;
    z-index: 201;
    background: url('../index/help.png') center /auto 100% no-repeat;
}
.rule{
    position:absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: 251;
    background: url('../rule.png') center /auto 80% no-repeat rgba(0,0,0,0.6); 
    display:none;
}
@-webkit-keyframes clockwise {
    from{
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes clockwise {
    from{
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-moz-keyframes clockwise {
    from{
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@-o-keyframes clockwise {
    from{
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}




.tree{
    position:absolute;
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px;
}
.center{
    z-index: 300;
    background: url('../stage1/center.png') center /auto 100% no-repeat;
}
.left{
    z-index: 310;
    background: url('../stage1/left.png') center /auto 100% no-repeat;
}
.right1{
    z-index: 310;
    background: url('../stage1/right1.png') center /auto 100% no-repeat;
}
.right2{
    z-index: 300;
    background: url('../stage1/right2.png') center /auto 100% no-repeat;
}
.blackbg{
    z-index: 320;
    background: url('../stage1/blackbg.png') center /auto 100% no-repeat;
}
.stage1{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 350;
    display: none;
}
.clear{
    position: absolute;
    width: 100%;
    height: 40%;
    left: 0px;
    top: 15%;
    z-index: 360;
    background: url('../stage1/clear.png') center /auto 80%   no-repeat;
    display:none;
}
.downmusic{
    position:absolute;
    width: 100%; 
    height: 20%; 
    left: 0px; 
    bottom: 0px;
    background: url('../stage1/down/music.png') center /100% auto  no-repeat;
}
.upmusic{
    position:absolute;
    width: 100%;
    height: 40%;
    left: 0px;
    top: 15%;
    background: url('../stage1/up/music.png') center /100% auto  no-repeat;
}
.downmusic1{
    position:absolute;
    width: 100%; 
    height: 100%; 
    left: 0px; 
    bottom: 0px;
    background: url('../stage1/down/music1.png') center /100% auto  no-repeat;
    display: none;
}
.video{
    display: none;
}
.down_note0{
    position:absolute;
    width: 3rem; 
    height: 3.4rem; 
    left: 0.1rem; 
    top: 0.6rem;
    background: url('../stage1/down/0.png') center /auto 100%   no-repeat;
}
.down_note1{
    position:absolute;
    width: 4rem;
    height: 3.3rem;
    left: 2.3rem;
    top: 0.4rem;
    background: url('../stage1/down/1.png') center /auto 100%   no-repeat;
}
.down_note2{
    position:absolute;
    width: 3rem;
    height: 3.5rem;
    left: 4.5rem;
    top: 1.0rem;
    background: url('../stage1/down/2.png') center /auto 100%   no-repeat;
}
.down_note3{
    position:absolute;
    width: 3rem;
    height: 3rem;
    left: 6rem;
    top: 1.0rem;
    background: url('../stage1/down/3.png') center /auto 100%   no-repeat;
}
.down_note4{
    position:absolute;
    width: 5rem;
    height: 4rem;
    left: 8rem;
    top: 0.5rem;
    background: url('../stage1/down/4.png') center /auto 100%  no-repeat;
}
.down_note5{
    position:absolute;
    width: 6rem;
    height: 4rem;
    left: 12.5rem;
    top: 0.5rem;
    background: url('../stage1/down/5.png') center /auto 100%  no-repeat;
}
.down_note6{
    position:absolute;
    width: 5rem;
    height: 4rem;
    left: 20rem;
    top: 0rem;
    background: url('../stage1/down/6.png') center /auto 100%  no-repeat;
}

.down_note7{
    position:absolute;
    width: 3rem;
    height: 3.5rem;
    left: 25.2rem;
    top: 1rem;
    background: url('../stage1/down/7.png') center /auto 100%  no-repeat;
}
.down_note8{
    position:absolute;
    width: 5rem;
    height: 3.5rem;
    left: 27.5rem;
    top: 1rem;
    background: url('../stage1/down/8.png') center /auto 100%  no-repeat;
}
.down_note9{
    position:absolute;
    width: 5rem;
    height: 3.5rem;
    left: 32rem;
    top: 0.5rem;
    background: url('../stage1/down/9.png') center /auto 100%  no-repeat;
}
.down_note10{
    position:absolute;
    width: 3rem;
    height: 3.3rem;
    left: 36.5rem;
    top: 1.2rem;
    background: url('../stage1/down/10.png') center /auto 100%  no-repeat;
}
.down_note11{
    position:absolute;
    width: 3rem;
    height: 3.3rem;
    left: 39rem;
    top: 0.5rem;
    background: url('../stage1/down/11.png') center /auto 100%  no-repeat;
}
.down_note12{
    position:absolute;
    width: 3rem;
    height: 2.5rem;
    left: 42rem;
    top: 1.2rem;
    background: url('../stage1/down/12.png') center /auto 100%  no-repeat;
}


.down_note0_1{
    position:absolute;
    width: 3rem; 
    height: 3.4rem; 
    left: 0.1rem; 
    top: 0.6rem;
    background: url('../stage1/down/0_1.png') center /auto 100%   no-repeat;
}
.down_note1_1{
    position:absolute;
    width: 4rem;
    height: 3.3rem;
    left: 2.3rem;
    top: 0.4rem;
    background: url('../stage1/down/1_1.png') center /auto 100%   no-repeat;
}
.down_note2_1{
    position:absolute;
    width: 3rem;
    height: 3.5rem;
    left: 4.5rem;
    top: 1.0rem;
    background: url('../stage1/down/2_1.png') center /auto 100%   no-repeat;
}
.down_note3_1{
    position:absolute;
    width: 3rem;
    height: 3rem;
    left: 6rem;
    top: 1.0rem;
    background: url('../stage1/down/3_1.png') center /auto 100%   no-repeat;
}
.down_note4_1{
    position:absolute;
    width: 5rem;
    height: 4rem;
    left: 8rem;
    top: 0.5rem;
    background: url('../stage1/down/4_1.png') center /auto 100%  no-repeat;
}
.down_note5_1{
    position:absolute;
    width: 6rem;
    height: 4rem;
    left: 12.5rem;
    top: 0.5rem;
    background: url('../stage1/down/5_1.png') center /auto 100%  no-repeat;
}
.down_note6_1{
    position:absolute;
    width: 5rem;
    height: 4rem;
    left: 20rem;
    top: 0rem;
    background: url('../stage1/down/6_1.png') center /auto 100%  no-repeat;
}

.down_note7_1{
    position:absolute;
    width: 3rem;
    height: 3.5rem;
    left: 25.2rem;
    top: 1rem;
    background: url('../stage1/down/7_1.png') center /auto 100%  no-repeat;
}
.down_note8_1{
    position:absolute;
    width: 5rem;
    height: 3.5rem;
    left: 27.5rem;
    top: 1rem;
    background: url('../stage1/down/8_1.png') center /auto 100%  no-repeat;
}
.down_note9_1{
    position:absolute;
    width: 5rem;
    height: 3.5rem;
    left: 32rem;
    top: 0.5rem;
    background: url('../stage1/down/9_1.png') center /auto 100%  no-repeat;
}
.down_note10_1{
    position:absolute;
    width: 3rem;
    height: 3.3rem;
    left: 36.5rem;
    top: 1.2rem;
    background: url('../stage1/down/10_1.png') center /auto 100%  no-repeat;
}
.down_note11_1{
    position:absolute;
    width: 3rem;
    height: 3.3rem;
    left: 39rem;
    top: 0.5rem;
    background: url('../stage1/down/11_1.png') center /auto 100%  no-repeat;
}
.down_note12_1{
    position:absolute;
    width: 3rem;
    height: 2.5rem;
    left: 42rem;
    top: 1.2rem;
    background: url('../stage1/down/12_1.png') center /auto 100%  no-repeat;
}
.hide{
    display: none;
}


.x{
    width: 5rem;
    height: 5rem;
    left: 0rem;
    top: 0rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: -3.5rem;
    background: url('../stage1/up/x.png') center /auto 100%  no-repeat;
    display: none;
}
.note_group1{
    display: ;
}
.up_note1{
    position:absolute;
    width: 5rem;
    height: 6rem;
    left: 25rem;
    top: 1rem;
    background: url('../stage1/up/1.png') center /auto 100%  no-repeat;
}
.up_note2{
    position:absolute;
    width: 5rem;
    height: 6rem;
    left: 5rem;
    top: 2.5rem;
    background: url('../stage1/up/2.png') center /auto 100%  no-repeat;
}
.up_note3{
    position:absolute;
    width: 5rem;
    height: 5rem;
    left: 33rem;
    top: 2.5rem;
    background: url('../stage1/up/3.png') center /auto 100%  no-repeat;
}
.up_note4{
    position: absolute;
    width: 8rem;
    height: 6.5rem;
    left: 14rem;
    top: 2rem;
    background: url('../stage1/up/4.png') center /auto 100%  no-repeat;
}



.note_group2{
    display: none;
}
.up_note5{
    position:absolute;
    width: 10rem;
    height: 6rem;
    left: 26rem;
    top: 2rem;
    background: url('../stage1/up/5.png') center /auto 100%  no-repeat;
}
.up_note6{
    position:absolute;
    width: 10rem;
    height: 5rem;
    left: 4.5rem;
    top: 2.5rem;
    background: url('../stage1/up/6.png') center /auto 100%  no-repeat;
}
.up_note7{
    position:absolute;
    width: 5rem;
    height: 6rem;
    left: 37rem;
    top: 2.5rem;
    background: url('../stage1/up/7.png') center /auto 100%  no-repeat;
}
.up_note8{
    position: absolute;
    width: 7rem;
    height: 6rem;
    left: 16.5rem;
    top: 2.5rem;
    background: url('../stage1/up/8.png') center /auto 100%  no-repeat;
}

.note_group3{
    display: none;
}
.up_note9{
    position:absolute;
    width: 10rem;
    height: 6rem;
    left: 30rem;
    top: 1rem;
    background: url('../stage1/up/9.png') center /auto 100%  no-repeat;
}
.up_note10{
    position:absolute;
    width: 5rem;
    height: 6rem;
    left: 6rem;
    top: 3rem;
    background: url('../stage1/up/10.png') center /auto 100%  no-repeat;
}
.up_note11{
    position:absolute;
    width: 5rem;
    height: 6rem;
    left: 22rem;
    top: 1rem;
    background: url('../stage1/up/11.png') center /auto 100%  no-repeat;
}
.up_note12{
    position: absolute;
    width: 7rem;
    height: 4rem;
    left: 13rem;
    top: 3rem;
    background: url('../stage1/up/12.png') center /auto 100%  no-repeat;
}



.animation{
    position: absolute;
    width: 18rem;
    height: 18rem;
    left: 50%;
    top: 1.3rem;
    margin-left: -9rem;
    background: url(../stage4/bg.png) center /auto 100%  no-repeat;
    z-index: 400;
    display:none;
}
.animation-1{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../stage4/bg-2.png) center /auto 100%  no-repeat;
    display: none;
}

.spot{
    position: absolute;
    width: 3rem;
    height: 3rem;
    background: url(../stage4/spot.png) center /auto 100%  no-repeat;
    z-index:420; 
    animation:blink 2s linear 0s infinite forwards;
    -moz-animation:blink 2s linear 0s infinite forwards;
    -webkit-animation:blink 2s linear 0s infinite forwards;
    -o-animation:blink 2s linear 0s infinite forwards;
    display: none;
}
.smallspot{
    position: absolute;
    width: 3rem;
    height: 3rem;
    background: url(../stage4/smallspot.png) center /auto 50%  no-repeat;
    z-index:410; 
}

.line{
    z-index: 401;
}
.animation1{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../stage4/1/bg.png) center /auto 70%  no-repeat;
    display: none;
}
.animation2{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../stage4/2/bg.png) center /auto 70%  no-repeat;
    display: none;
}
.animation3{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../stage4/3/bg.png) 60% 50% /auto 70%  no-repeat;
    display: none;
}
.animation4{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../stage4/4/bg.png) center /auto 70%  no-repeat;
    display: none;
}
.animation1 .spot1{
    left: 6rem;
    top: 0.5rem;
}
.animation1 .spot2{
    left: 3.5rem;
    top: 4.2rem;
}
.animation1 .spot3{
    left: 7.5rem;
    top: 4.5rem;
}
.animation1 .spot4{
    left: 12.2rem;
    top: 2.2rem;
}
.animation1 .spot5{
    left: 10.8rem;
    top: 6.5rem;
}
.animation1 .spot6{
    left: 7.5rem;
    top: 10rem;
}
.animation1 .spot7{
    left: 7.2rem;
    top: 14rem;
}
.animation1 .line1{
    position: absolute;
    width: 3rem;
    /*height: 4rem;*/
    left: 4.7rem;
    top: 2rem;
    background: url(../stage4/1/1.png) top /100% auto   no-repeat;
}
.animation1 .line2{
    position: absolute;
    /*width: 4rem;*/
    height: 0.8rem;
    left: 5.2rem;
    top: 5.5rem;
    background: url(../stage4/1/2.png) left top/auto 100%    no-repeat;
}
.animation1 .line3{
    position: absolute;
    /*width: 4.5rem;*/
    height: 3rem;
    left: 9.2rem;
    top: 3.3rem;
    background: url(../stage4/1/3.png) left /auto 100%  no-repeat;
}
.animation1 .line4{
    position: absolute;
    width: 2rem;
    /*height: 4rem;*/
    left: 11.9rem;
    top: 4rem;
    background: url(../stage4/1/4.png) top /100% auto   no-repeat;
}
.animation1 .line5{
    position: absolute;
    width: 3.5rem;
    /*height: 4rem;*/
    left: 9rem;
    top: 7.8rem;
    background: url(../stage4/1/5.png) top /100% auto   no-repeat;
}
.animation1 .line6{
    position: absolute;
    width: 1rem;
     /*height: 4.3rem;*/
    left: 8.3rem;
    top: 11.5rem;
    background: url(../stage4/1/6.png) left top /100% auto    no-repeat;
}

.animation2 .spot1{
    left: 6.1rem;
    top: 1.2rem;
}
.animation2 .spot2{
    left: 8.8rem;
    top: 4.5rem;
}
.animation2 .spot3{
    left: 6.5rem;
    top: 7.5rem;
}
.animation2 .spot4{
    left: 10.1rem;
    top: 10.9rem;
}
.animation2 .spot5{
    left: 5rem;
    top: 10.4rem;
}
.animation2 .spot6{
    left: 6.8rem;
    top: 14.5rem;
}
.animation2 .line1{
    position: absolute;
    width: 3rem;
    /*height: 4rem;*/
    left: 7.4rem;
    top: 2.5rem;
    background: url(../stage4/2/1.png) top /100% auto  no-repeat;
}
.animation2 .line2{
    position: absolute;
    width: 3rem;
    /*height: 4rem;*/
    left: 7.5rem;
    top: 5.8rem;
    background: url(../stage4/2/2.png) top /100% auto  no-repeat;
}
.animation2 .line3{
    position: absolute;
    width: 3.8rem;
    /*height: 3.2rem;*/
    left: 8rem;
    top: 9.1rem;
    background: url(../stage4/2/3.png) top /100% auto  no-repeat;
}
.animation2 .line4{
    position: absolute;
    /*width: 5rem;*/
    height: 1.3rem;
    right: 6.3rem;
    top: 11.6rem;
    background: url(../stage4/2/4.png) right /auto 100%   no-repeat;
}
.animation2 .line5{
    position: absolute;
    width: 2rem;
    /*height: 4rem;*/
    left: 6.3rem;
    top: 12rem;
    background: url(../stage4/2/5.png) top /100% auto    no-repeat;
}


.animation3 .spot1{
    left: 5.8rem;
    top: 1.2rem;
}
.animation3 .spot2{
    left: 5.8rem;
    top: 7.7rem;
}
.animation3 .spot3{
    left: 5.8rem;
    top: 13.3rem;
}
.animation3 .spot3{
    left: 5.8rem;
    top: 13.3rem;
}
.animation3 .spot4{
    left: 9.5rem;
    top: 11.2rem;
}
.animation3 .spot5{
    left: 11.3rem;
    top: 8.5rem;
}
.animation3 .spot6{
    left: 9.8rem;
    top: 5.4rem;
}
.animation3 .line1{
    position: absolute;
    width: 0.8rem;
    /*height: 6rem;*/
    left: 6.9rem;
    top: 2.9rem;
    background: url(../stage4/3/1.png) top /100% auto   no-repeat;
}
.animation3 .line2{
    position: absolute;
    width: 0.8rem;
    /*height: 6rem;*/
    left: 6.9rem;
    top: 9rem;
    background: url(../stage4/3/1.png) top /100% auto   no-repeat;
}
.animation3 .line3{
    position: absolute;
    /*width: 4rem;*/
    height: 3rem;
    left: 7.3rem;
    top: 12rem;
    background: url(../stage4/3/3.png) left /auto 100%    no-repeat;
}
.animation3 .line4{
    position: absolute;
    width: 2.2rem;
    /*height: 2.6rem;*/
    left: 11rem;
    bottom: 5.2rem;
    background: url(../stage4/3/4.png) bottom /100% auto   no-repeat;
}
.animation3 .line5{
    position: absolute;
    width: 3.36rem;
    /*height: 2.7rem;*/
    left: 9.6rem;
    bottom: 8.0rem;
    background: url(../stage4/3/5.png) bottom /100% auto   no-repeat;
}
.animation3 .line6{
    position: absolute;
    /*width: 4rem;*/
    height: 2.5rem;
    right: 6.7rem;
    top: 6.8rem;
    background: url(../stage4/3/6.png) right /auto 100%  no-repeat;
}


.animation4 .spot1{
    left: 5.5rem;
    top: 9rem;
}
.animation4 .spot2{
    left: 2rem;
    top: 11.4rem;
}
.animation4 .spot3{
    left: 4.5rem;
    top: 14.4rem;
}
.animation4 .spot4{
    left: 7.6rem;
    top: 12.4rem;
}
.animation4 .spot5{
    left: 7.8rem;
    top: 1.3rem;
}
.animation4 .spot6{
    left: 11.5rem;
    top: 5rem;
}
.animation4 .spot7{
    left: 11.3rem;
    top: 10rem;
}
.animation4 .line1{
    position: absolute;
    /*width: 3.5rem;*/
    height: 3rem;
    right: 10.9rem;
    top: 10.4rem;
    background: url(../stage4/4/1.png) right /auto 100%  no-repeat;
}
.animation4 .line2{
    position: absolute;
    width: 2.5rem;
    /*height: 3rem;*/
    left: 3.6rem;
    top: 13rem;
    background: url(../stage4/4/2.png) top /100% auto  no-repeat;
}
.animation4 .line3{
    position: absolute;
    /*width: 2.8rem;*/
    height: 2rem;
    left: 6.2rem;
    top: 14rem;
    background: url(../stage4/4/3.png) left /auto 100%   no-repeat;
}
.animation4 .line4{
    position: absolute;
    width: 0.9rem;
    /*height: 11rem;*/
    left: 8.8rem;
    bottom: 4.2rem;
    background: url(../stage4/4/4.png) bottom /100% auto  no-repeat;
}
.animation4 .line5{
    position: absolute;
    width: 4.5rem;
    /*height: 5rem;*/
    left: 9rem;
    top: 2.4rem;
    background: url(../stage4/4/5.png) top /100% auto  no-repeat;
}
.animation4 .line6{
    position: absolute;
    width: 0.8rem;
    /*height: 5rem;*/
    left: 12.6rem;
    top: 6.5rem;
    background: url(../stage4/4/6.png) top /100% auto  no-repeat;
}

.dialogue{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
}
.left-chara{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../left-chara.png) left bottom/auto 70%  no-repeat;
}
.right-chara{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../right-chara.png) right bottom/auto 70%  no-repeat;
}
.left-d{
    position: absolute;
    width: 10rem;
    left: 6rem;
    top: 7rem;
    background:rgba(0,0,0,.8);
    border-radius: 10px;
    display: none;
}

.right-d{
    position: absolute;
    width: 10rem;
    right: 6rem;
    top: 6rem;
    background:rgba(0,0,0,.8);
    border-radius: 10px;
    display: none;
}
.dialogue p{
    margin: 0.5rem 0.8rem 0.5rem 0.8rem;
    text-align: left;
    font-size: 0.8rem;
    color: white;
}


.notice{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%, -50%);
    background: url(../stage4/notice.png) center /auto 100%  no-repeat;
    animation:notice 2s linear 0s infinite forwards;
    -moz-animation:notice 2s linear 0s infinite forwards;
    -webkit-animation:notice 2s linear 0s infinite forwards;
    -o-animation:notice 2s linear 0s infinite forwards;
}
.notice_half{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%, -50%);
    background: url(../stage4/notice.png) center /auto 100%  no-repeat;
    animation:notice_half 2s linear 0s infinite forwards;
    -moz-animation:notice_half 2s linear 0s infinite forwards;
    -webkit-animation:notice_half 2s linear 0s infinite forwards;
    -o-animation:notice_half 2s linear 0s infinite forwards;
}

@-moz-keyframes notice
{
    0%{
        width: 20%;
        height: 20%;
    }
    100%{
        width: 100%;
        height: 100%;
    }
}
@-webkit-keyframes notice
{
    0%{
        width: 20%;
        height: 20%;
    }
    100%{
        width: 100%;
        height: 100%;
    }
}

@keyframes notice
{
    0%{
        width: 20%;
        height: 20%;
    }
    100%{
        width: 100%;
        height: 100%;
    }
}
@-o-keyframes notice
{
    0%{
        width: 20%;
        height: 20%;
    }
    100%{
        width: 100%;
        height: 100%;
    }
}
@-moz-keyframes notice_half
{
    0%{
        width: 20%;
        height: 20%;
    }
    50%{
        width: 20%;
        height: 20%;
    }
    100%{
        width: 70%;
        height: 70%;
    }
}
@-webkit-keyframes notice_half
{
    0%{
        width: 20%;
        height: 20%;
    }
    50%{
        width: 20%;
        height: 20%;
    }
    100%{
        width: 70%;
        height: 70%;
    }
}

@keyframes notice_half
{
    0%{
        width: 20%;
        height: 20%;
    }
    50%{
        width: 20%;
        height: 20%;
    }
    100%{
        width: 70%;
        height: 70%;
    }
}
@-o-keyframes notice_half
{
    0%{
        width: 20%;
        height: 20%;
    }
    50%{
        width: 20%;
        height: 20%;
    }
    100%{
        width: 70%;
        height: 70%;
    }
}
.queue{
    position: absolute;
    width: 100%;
    height: 15rem;
    bottom: 1rem;
    z-index: 390;
    left: -100%;
}
.queue-1{
    position: absolute;
    width: 90%;
    height: 15rem;
    bottom: 1rem;
    z-index: 390;
    left: 8%;
    display:none;
}
.queue-chara{
    position: absolute;
    width: 8rem;
    height: 6rem;
    bottom: 0;
}
#chara-1{
    background: url(../1.png) center /auto 100%  no-repeat;
    left: 30rem;
    height: 8rem;
    /*
    -moz-transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    transform:rotate(20deg);*/
}
#chara-2{
    background: url(../2.png) center /auto 100%  no-repeat;
    left: 23.5rem;
}
#chara-3{
    background: url(../3.png) center /auto 100%  no-repeat;
    left: 18rem;
}
#chara-4{
    background: url(../4.png) center /auto 100%  no-repeat;
    left: 12.5rem;
}
#chara-5{
    background: url(../5.png) center /auto 100%  no-repeat;
    left: 7rem;
}
.flipH{
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}
.queue-1 #chara-1{
    left: 2.2rem;
    bottom: 3rem;
    height: 7rem;
    -moz-transform:rotate(50deg);
    -webkit-transform:rotate(50deg);
    -o-transform:rotate(50deg);
    transform:rotate(50deg);
}

#x{
    height: 10rem;
    left: 30rem;
    background: url(../x.png) center /auto 100%  no-repeat;
}
#b{
    height: 10rem;
    left: 0.5rem;
    background: url(../b.png) center /auto 100%  no-repeat;
}


.float
{
    animation:float 1.5s ease 0s infinite forwards;
    -moz-animation:float 1.5s ease 0s infinite forwards;
    -webkit-animation:float 1.5s ease 0s infinite forwards;
    -o-animation:float 1.5s ease 0s infinite forwards;
}
.float1
{
    animation:float 1.5s ease 0.5s infinite forwards;
    -moz-animation:float 1.5s ease 0.5s infinite forwards;
    -webkit-animation:float 1.5s ease 0.5s infinite forwards;
    -o-animation:float 1.5s ease 0.5s infinite forwards;
}
.float2
{
    animation:float 1.5s ease 1s infinite forwards;
    -moz-animation:float 1.5s ease 1s infinite forwards;
    -webkit-animation:float 1.5s ease 1s infinite forwards;
    -o-animation:float 1.5s ease 1s infinite forwards;
}
.float3
{
    animation:float 1.5s ease 1.5s infinite forwards;
    -moz-animation:float 1.5s ease 1.5s infinite forwards;
    -webkit-animation:float 1.5s ease 1.5s infinite forwards;
    -o-animation:float 1.5s ease 1.5s infinite forwards;
}
.float4
{
    animation:float 1.5s ease 2s infinite forwards;
    -moz-animation:float 1.5s ease 2s infinite forwards;
    -webkit-animation:float 1.5s ease 2s infinite forwards;
    -o-animation:float 1.5s ease 2s infinite forwards;
}

@-moz-keyframes float
{
    0%{margin-bottom:-5px;}
    50%{margin-bottom:5px;}
    100%{margin-bottom:-5px;}
}
@-webkit-keyframes float
{
    0%{margin-bottom:-5px;}
    50%{margin-bottom:5px;}
    100%{margin-bottom:-5px;}
}

@keyframes float
{
    0%{margin-bottom:-5px;}
    50%{margin-bottom:5px;}
    100%{margin-bottom:-5px;}
}
@-o-keyframes float
{
    0%{margin-bottom:-5px;}
    50%{margin-bottom:5px;}
    100%{margin-bottom:-5px;}
}



.getaward{
    position:absolute;
    width: 100%;
    height:100%;
    z-index: 1000;
    background: url('../award/bg.png') 50% 50% /auto 100% no-repeat rgba(0,0,0,.7);
    display:none;
}
.evaluate{
    position: absolute;
    width: 40%;
    left: 28%;
    height: 3rem;
    top: 49%;
}

.starts,.starts ul{float:left;}

.starts{
    position: absolute;
    left: 0.8rem;
    width:100%;
}

.starts ul{
    list-style-type:none;
    height: 100%;
    width: 100%;
}

.starts ul li{
    width:3.5rem;
    height:3.5rem;
    float:left;
    background: url("../award/star0.png") no-repeat;
    background-size: auto 100%;
    background-position: center;
    padding-right:0rem;
    cursor: none;
}

.starts ul li.on{
    background: url("../award/star1.png") no-repeat;
    background-size: auto 100%;
    background-position: center;
    padding-right:0rem;
}

.starts ul span{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}

#preload-01 { background: url("../star1.png") no-repeat -9999px -9999px; }

.submit{
    position:absolute;
    width: 15rem;
    height: 2.6rem;
    left: 48%;
    top: 72.5%;
    background: url('../award/submit.png') 50% 50% /auto 100% no-repeat;
}
.share{
    position:absolute;
    width: 20rem;
    height: 3.5rem;
    left: 50%;
    margin-left: -10rem;
    bottom: 0;
}
.weixin{
    position:absolute;
    width: 3rem;
    height: 3rem;
    left: 30%;
    margin-left: -1.5rem;
    top: 0.25rem;
    background: url('../award/weixin.png') 50% 50% /auto 100% no-repeat;
}
.weibo{
    position:absolute;
    width: 3rem;
    height: 3rem;
    left: 50%;
    margin-left: -1.5rem;
    top: 0.25rem;
    background: url('../award/weibo.png') 50% 50% /auto 100% no-repeat;
}
.tieba{
    position:absolute;
    width: 3rem;
    height: 3rem;
    left: 70%;
    margin-left: -1.5rem;
    top: 0.25rem;
    background: url('../award/tieba.png') 50% 50% /auto 100% no-repeat;
}
.weixin_notice{
    position: absolute;
    width: 10rem;
    right: 0%;
    height: 6rem;
    top: 0%;
    display: none;
    background: url('../share.png') 50% 50% /auto 100%  no-repeat;
}

.arrow_down {
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: -1.5rem;
    left: 40%;
}

.arrow_down i {
    position: absolute;
    left: 0;
    display: block;
    width: 1.2rem;
    height: 0.8rem;
    background: url('../stage1/arrow_down.png') 0 0 no-repeat;
    background-size: 100%;
    opacity: 0;
}

.arrow_down i:nth-child(2n+1) {
    -webkit-animation: fadeInOut .6s ease 1s infinite alternate;
    -moz-animation: fadeInOut .6s ease 1s infinite alternate;
    -ms-animation: fadeInOut .6s ease 1s infinite alternate;
    animation: fadeInOut .6s ease 1s infinite alternate;
}
.arrow_down i:nth-child(2n+2) {
    -webkit-animation: fadeInOut .6s ease 1.2s infinite alternate;
    -moz-animation: fadeInOut .6s ease 1.2s infinite alternate;
    -ms-animation: fadeInOut .6s ease 1.2s infinite alternate;
    animation: fadeInOut .6s ease 1.2s infinite alternate;
}
.arrow_down i:nth-child(2n+1) {
    top: 0;
}
.arrow_down i:nth-child(2n+2) {
    top: .50rem;
}


@keyframes fadeInOut{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeInOut{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fadeInOut{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fadeInOut{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-ms-keyframes fadeInOut{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.black_chara{
    position:absolute;
    width: 100%;
    height: 55%;
    top: 30%;
    background: url('../black_chara.png') 50% 50% /auto 100% no-repeat;
    display:none;
}