*{
	margin: 0;
	padding: 0;
    border: none;
    font-family: "Microsoft Yahei";
}
html{
    font-size: 62.5%;
}
html,body{
    height: 100%;
    overflow: hidden;
}

/* music */
.music{
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 5;
    width: 5rem;
    height: 5rem;
    border: 4px solid #ef1639;
    border-radius: 50%;
    background-color: #fff;
}
.music img:first-of-type{
    position: absolute;
    top: 24%;
    right: 2.5%;
    z-index: 1;
    width: 28.421%;
}
.music img:last-of-type{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 0;
    width: 79%;
}
.music img.play{
    -webkit-animation: music-disc 4s linear infinite;
    animation: music-disc 4s linear infinite;
}
@-webkit-keyframes music-disc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes music-disc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* page */
.page{
    position: relative;
    height: 100%;
}
.page .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}
/* page1 */
#page1{
    display: block;
}
#page1 .bg{
    background: url("img/p1_bg.jpg") no-repeat;
    background-size: 100%;
}
#page1 .p1-lantern{
    position: absolute;
    top: -3.4%;
    right: 0;
    left: 0;
    margin: auto;
    background: url("img/p1_lantern.png") no-repeat;
    background-size: 100%;
    width: 12rem;
    height: 32rem;
    font-size: 2rem;
    padding-top: 13rem;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}
#page1 .p1-lantern:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: #ff0000;
    opacity: .5;
    box-shadow: 0 0 3rem 3rem #ff0000;
    -webkit-box-shadow: 0 0 3rem 3rem #ff0000;

    -webkit-animation: p1-lantern .5s infinite alternate;
    animation: p1-lantern .5s infinite alternate;
}
@-webkit-keyframes p1-lantern {
    0% {
        opacity: .5;
        -webkit-transform: scale(.8,.8);
        transform: scale(.8,.8);
    }
    100% {
        opacity: .7;
    }
}
@keyframes p1-lantern {
    0% {
        opacity: .5;
        -webkit-transform: scale(.8,.8);
        transform: scale(.8,.8);
    }
    100% {
        opacity: .7;
    }
}
#page1 .p1-imooc{
    position: absolute;
    right: 0;
    left: 0;
    bottom: 5rem;
    margin: auto;
    background: url("img/p1_imooc.png") no-repeat center center;
    background-size: 100%;
    width: 8rem;
    height: 10rem;
}
#page1 .p1-words{
    position: absolute;
    right: 0;
    left: 0;
    bottom: 2rem;
    font-size: 2rem;
    text-align: center;
    color: #231815;
}

/* page2 */
#page2{
    display: none;
    -webkit-transition: .5s;
    transition: .5s;
}
#page2.fadeOut{
    opacity: 0;
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%);
}
#page2 .bg{
    background: url("img/p2_bg.jpg") no-repeat;
    background-size: 100%;
}
#page2 .p2-circle{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: url("img/p2_circle_outer.png") no-repeat center center;
    background-size: 100%;
    width: 22rem;
    height: 22rem;

    -webkit-animation: circle_outer 1s linear 3s infinite;
    animation: circle_outer 1s linear 3s infinite;
}
@-webkit-keyframes circle_outer {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@keyframes circle_outer {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
#page2 .p2-circle:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: url("img/p2_circle_middle.png") no-repeat center center;
    background-size: 100%;
    width: 17rem;
    height: 17rem;

    -webkit-animation: circle_middle 1s linear 2s infinite;
    animation: circle_middle 1s linear 2s infinite;
}
@-webkit-keyframes circle_middle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
@keyframes circle_middle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
#page2 .p2-circle:after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: url("img/p2_circle_inner.png") no-repeat center center;
    background-size: 100%;
    width: 14rem;
    height: 14rem;

    -webkit-animation: circle_inner 1s linear 1s infinite;
    animation: circle_inner 1s linear 1s infinite;
}
@-webkit-keyframes circle_inner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-1080deg);
        transform: rotate(-1080deg);
    }
}
@keyframes circle_inner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-1080deg);
        transform: rotate(-1080deg);
    }
}
#page2 .p2-2016{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: url("img/p2_2016.png") no-repeat center center;
    background-size: 100%;
    width: 10rem;
    height: 6rem;
}

/* page3 */
#page3{
    display: none;
    -webkit-transition: .5s;
    transition: .5s;
}
#page3.fadeIn{
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%);
}
#page3 .bg{
    background: url("img/p3_bg.jpg") no-repeat;
    background-size: 100%;
}
#page3 .p3-logo{
    position: absolute;
    top: 10%;
    right: 0;
    left: 0;
    margin: auto;
    background: url("img/p3_logo.png") no-repeat center center;
    background-size: 100%;
    width: 35%;
    height: 10%;
}
#page3 .p3-title{
    position: absolute;
    top: 18%;
    right: 0;
    left: 0;
    margin: auto;
    background: url("img/p3_title.png") no-repeat center center;
    background-size: 100%;
    width: 42%;
    height: 55%;
}
#page3 .p3-coupletLeft{
    position: absolute;
    top: 26%;
    left: 6%;
    background: url("img/p3_couplet_second.png") no-repeat center center;
    background-size: 100%;
    width: 22%;
    height: 42%;
}
#page3 .p3-coupletRight{
    position: absolute;
    top: 26%;
    right: 6%;
    background: url("img/p3_couplet_first.png") no-repeat center center;
    background-size: 100%;
    width: 22%;
    height: 42%;
}
#page3 .p3-blessing{
    position: absolute;
    bottom: 5%;
    right: 0;
    left: 0;
    margin: auto;
    background: url("img/p3_blessing.png") no-repeat center center;
    background-size: 100%;
    width: 30%;
    height: 30%;
    border-radius: 50%;

    -webkit-animation: blessing 2s linear infinite;
    animation: blessing 2s linear infinite;
}
@-webkit-keyframes blessing {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes blessing {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}