.p1{
    background: url(../images/page_bg.jpg) center no-repeat;
    background-size: cover;
}

.year_border{
    position: absolute;
    background: url(../images/year_border.png) center no-repeat;
    background-size: contain;
    width: 695px;
    height: 1180px;
    top: 10px;
    left: 24px;
}

.year_chick{
    position: relative;
    background: url(../images/year_chick.png) center no-repeat;
    background-size: contain;
    width: 659px;
    height: 467px;
    margin-top:224px;
    left: 24px;  
}

.chick{
    position: relative;
    background: url(../images/chick.png) center no-repeat;
    background-size: contain;
    width: 360px;
    height: 427px;
    top: 36px;
    left: 151px;  
}


@keyframes jump{
    100%{transform: rotate(1deg);}
}
@-webkit-keyframes jump{
    100%{-webkit-transform: rotate(1deg);}
}
.lr_jump{
    animation: jump infinite ease;
    -webkit-animation: jump infinite ease;
    animation-direction:alternate;
    -webkit-animation-direction:alternate;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
}
.year_txt{
    position: relative;
/*    background: url(../images/year_txt.png) center no-repeat;
    background-size: contain;*/
    width: 600px;
    height:384px;
    margin: 0 auto;
    margin-top: 20px;
}



.year_d1{
    position: absolute;
    background: url(../images/year_d1.png) center no-repeat;
    background-size: contain;
    width: 130px;
    height: 384px;
    right: -65px;
}

.year_d2{
    position: absolute;
    background: url(../images/year_d2.png) center no-repeat;
    background-size: contain;
    width: 130px;
    height: 384px;
    right: 70px;
}

.year_d3{
    position: absolute;
    background: url(../images/year_d3.png) center no-repeat;
    background-size: contain;
    width: 130px;
    height: 384px;
    right: 216px;
}

.year_d4{
    position: absolute;
    background: url(../images/year_d4.png) center no-repeat;
    background-size: contain;
    width: 130px;
    height: 384px;
    right: 356px;
}

.year_d5{
    position: absolute;
    background: url(../images/year_d5.png) center no-repeat;
    background-size: contain;
    width: 130px;
    height: 384px;
    right: 470px;
}


.logo{
    position: relative;
    background: url(../images/logo.png) center no-repeat;
    background-size: contain;
    width:356px;
    height: 47px;
    margin: 0 auto;
    margin-top: 20px; 
}

.bless_border{
    position: absolute;
    background: url(../images/bless_border.png) center no-repeat;
    background-size: contain;  
    width: 717px;
    height:  1124px;
    top: 35px;
    right: 2px;    
}

.bless_txt1{
    position: relative;
    background: url(../images/bless_txt1.png) center no-repeat;
    background-size: contain;
    width: 465px;
    height: 87px;
    margin: 0 auto;
    margin-top: 118px;
}

.bless_txt2{
    position: relative;
    background: url(../images/bless_txt2.png) center no-repeat;
    background-size: contain;
    width: 310px;
    height: 76px;
    margin: 0 auto;
    margin-top: 25px;
}

.bless_lantern{
    position: absolute;
    background: url(../images/bless_lantern.png) center no-repeat;
    background-size: contain;  
    width: 73px;
    height:  104px;
    top: 14px;
    left:30px;      
}

.bless_logo{
    position: absolute;
    background: url(../images/bless_logo.png) center no-repeat;
    background-size: contain;  
    width: 55px;
    height:  84px;
    top: 38px;
    right: 50px;      
}

.bless_title{
    position: relative;
    background: url(../images/bless_title.png) center no-repeat;
    background-size: contain;
    width: 440px;
    height: 64px;
    margin: 0 auto;
    margin-top: -25px;
  
}

.bless_title1{
    position: relative;
    background: url(../images/bless_title1.png) center no-repeat;
    background-size: contain;
    width: 440px;
    height: 213px;
    margin: 0 auto;
    margin-top: 25px;    
}

.bless_code_border{
    position: relative;
    width: 356px;
    height: 160px;
    margin: 0 auto;
    margin-top: 35px; 
}

.logo1{
    position: relative;
    background: url(../images/logo.png) center no-repeat;
    background-size: contain;
    width: 356px;
    height: 47px;
    margin: 0 auto;
    margin-top: 25px;      
}

/*.bless_code{
    position: absolute;
    background: url(../images/bless_code.png) center no-repeat;
    background-size: contain;  
    width: 160px;
    height: 160px;
    top: 0px;
    left: 0px;       
}*/

.bless_txt{
    position: absolute;
    background: url(../images/bless_txt.png) center no-repeat;
    background-size: contain;  
    width: 176px;
    height:148px;
    top: 8px;
    right: 0px;       
}

.music_btn{
    position: absolute;
    display: block;
    width: 2rem;
    height: 2rem;
    top: 0.2rem;
    right: 0.2rem;
    z-index: 91;
 }
.music_btn span{
    display: block;
    width: 100%;
    height: 100%;
    background:url(../images/play_btn.png) center center no-repeat;
    background-size: contain;
}

.music_anim{
    animation: music_a 2s linear infinite;
    -webkit-animation: music_a 2s linear infinite;
}
@keyframes music_a{
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
@-webkit-keyframes music_a{
    from{ -webkit-transform:rotate(0deg); }
    to{ -webkit-transform:rotate(360deg); }
}

.happy{
    position: relative;
    /* background: url(../images/happy.png) center no-repeat; */
    background-size: contain;
    width: 307px;
    height: 44px;
    margin: 0 auto;
    margin-top: 90px;
}

.happy1{
    position: absolute;
    background: url(../images/happy.png) center no-repeat;
    background-size: contain;
    width: 307px;
    height: 44px;
    top: 50px;
    left: 202px;
    /* margin: 0 auto; */
    /* margin-top: 90px; */
}

.card_btn_border{
    position: relative;
    width: 389px;
    height:79px;
    margin: 0 auto;
    margin-top: 45px;
}

.card_btn{
    background: url(../images/card_btn.png) center no-repeat;
    background-size: contain;  
    width: 100%;
    height:100%;
}

.z_narrow{
    -webkit-animation-name:z_narrow;
    animation-name:z_narrow;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
}

@keyframes z_narrow{
    from { transform:scale(0.9); }
    to { transform:scale(1); }
}
@-webkit-keyframes z_narrow{
    from{ -webkit-transform:scale(0.9); }
    to{ -webkit-transform:scale(1); }
}