ul, li {
    list-style: none;
    line-height: 0px;
}

body, div, ul, li, img, p, a, h1, h2, h3 {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

html, body {
    background: #f4f4cd;
    color: #49494d;
    font-family: "微软雅黑", "黑体", Helvetica, Verdana, sans-serif;
    font-size: 14px;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

div {
    position: absolute;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

#three {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#main {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#three, #share, #preload {
    position: absolute;
}

#three, #share, #preload, #success, #loading, #rule {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#nav {
    top: 0px;
    right: 0px;
    z-index: 1;
}

#nav div {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 0px;
}

#nav .btnMuteOn {
    right: 0px;
    background: url('../images/muteOn.png');
    display: none;
}

#nav .btnMuteOff {
    right: 0px;
    background: url('../images/muteOff.png');
    display: none;
}

#menu {
    opacity: 0;
    display: none;
}

#share {
    display: none;
    background-color: #fd2d37;
}

#share img {
    position: absolute;
    right: 0px;
    top: 0px;
}

.lantern {
    display: none;
    position: absolute;
    left: 20px;
    top: 0px;
    width: 80px;
    height: 520px;
    background: url("../images/lantern.png");
    background-size: 100% 100%;
}

.lantern div {
    display: block;
    position: absolute;
}

.lantern .f {
    display: none;
    width: 150px;
    height: 150px;
    background: url("../images/f.png") no-repeat;
    background-size: contain;
    top: 500px;
    left: 300px;
}

.lantern .y {
    display: none;
    width: 150px;
    height: 150px;
    background: url("../images/y.png") no-repeat;
    background-size: contain;
    top: 500px;
    left: 300px;
}

.lantern .d {
    display: none;
    width: 150px;
    height: 150px;
    background: url("../images/d.png") no-repeat;
    background-size: contain;
    top: 500px;
    left: 300px;
}

.lantern .ff {
    display: none;
    width: 150px;
    height: 150px;
    background: url("../images/ff.png") no-repeat;
    background-size: contain;
    top: 500px;
    left: 300px;
}

.lantern .l {
    display: none;
    width: 150px;
    height: 150px;
    background: url("../images/l.png") no-repeat;
    background-size: contain;
    top: 500px;
    left: 300px;
}

.btnShare {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: none;
}

#rule {
    display: none;
    background: url('../images/rule.png');
    background-size: 100% 100%;
}

#loading {
    display: block;
    background: url('../images/loading.gif');
    background-size: 100% 100%;
}

#preload {
    display: none;
    background: url('../images/preload/bg.png');
    background-size: 100% 100%;
}

#preload .group {
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -70px 0 0 0;
}

#preload .group div {
    position: absolute;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        margin-top: -150px;
    }
    50% {
        opacity: 0;
        margin-top: -180px;
    }
    100% {
        opacity: 1;
        margin-top: -210px;
    }
}

#preload .title {
    width: 349px;
    height: 251px;
    margin: -210px -174px;
    -webkit-animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

#preload .cxt {
    width: 488px;
    height: 217px;
    background: url('../images/preload/tip_cxt.png');
    background-size: 100% 100%;
    margin: 50px 0 0 -244px;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        left: 50%;
    }
    50% {
        opacity: 0;
        left: 30%;
    }
    100% {
        opacity: 1;
        left: 10px;
    }
}

#preload .n1 {
    width: 145px;
    height: 187px;
    left: 10px;
    top: 40px;
    -webkit-animation-name: fadeInLeft;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

#preload .n2 {
    width: 145px;
    height: 187px;
    top: 51px;
    left: 38%;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        right: 50%;
    }
    50% {
        opacity: 0;
        right: 30%;
    }
    100% {
        opacity: 1;
        right: 10px;
    }
}

#preload .n3 {
    width: 145px;
    height: 187px;
    right: 10px;
    top: 40px;
    -webkit-animation-name: fadeInRight;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

@-webkit-keyframes fadeInBtn {
    0% {
        opacity: 0;
        top: 350px;
    }
    50% {
        opacity: 0;
        top: 300px;
    }
    100% {
        opacity: 1;
        top: 280px;
    }
}

#preload .btn {
    display: block;
    width: 403px;
    height: 57px;
    left: -200px;
    top: 280px;
    -webkit-animation-name: fadeInBtn;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

#success {
    display: none;
    position: absolute;
    background: url('../images/preload/bg.png');
    background-size: 100% 100%;
}

#success div {
    display: block;
    position: absolute;
}

@-webkit-keyframes fadeInTitle {
    0% {
        opacity: 0;
        top: 400px;
    }
    50% {
        opacity: 0;
        top: 350px;
    }
    100% {
        opacity: 1;
        top: 300px;
    }
}

#success .title {
    width: 328px;
    height: 192px;
    top: 300px;
    left: 150px;
    background: url("../images/success/title.png") no-repeat;
    -webkit-animation-name: fadeInTitle;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

@-webkit-keyframes fadeInTxt {
    0% {
        opacity: 0;
        top: 600px;
    }
    50% {
        opacity: 0;
        top: 550px;
    }
    100% {
        opacity: 1;
        top: 510px;
    }
}

#success .txt {
    width: 234px;
    height: 50px;
    top: 510px;
    left: 200px;
    background: url("../images/success/txt.png");
    -webkit-animation-name: fadeInTxt;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

#success input {
    border: 0;
    text-align: center;
    width: 403px;
    height: 57px;
    font-size: 24px;
    color: #df1920;
    background: url("../images/success/btn.png") no-repeat;
    background-size: contain;
}

@-webkit-keyframes fadeInName {
    0% {
        opacity: 0;
        top: 700px;
    }
    50% {
        opacity: 0;
        top: 650px;
    }
    100% {
        opacity: 1;
        top: 600px;
    }
}

#success .name {
    left: 120px;
    top: 600px;
    -webkit-animation-name: fadeInName;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

@-webkit-keyframes fadeInMobile {
    0% {
        opacity: 0;
        top: 750px;
    }
    50% {
        opacity: 0;
        top: 700px;
    }
    100% {
        opacity: 1;
        top: 680px;
    }
}

#success .mobile {
    left: 120px;
    top: 680px;
    -webkit-animation-name: fadeInMobile;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

@-webkit-keyframes fadeInSub {
    0% {
        opacity: 0;
        top: 850px;
    }
    50% {
        opacity: 0;
        top: 800px;
    }
    100% {
        opacity: 1;
        top: 760px;
    }
}

#success .sub {
    width: 403px;
    height: 57px;
    top: 760px;
    left: 120px;
    background: url("../images/success/sub.png") no-repeat;
    background-size: contain;
    -webkit-animation-name: fadeInSub;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

#shareImg {
    width: 1px;
    height: 1px;
    opacity: 0;
}

#tip {
    position: absolute;
    display: none;
    width: 438px;
    height: 157px;
    background: url('../images/tip.png');
    left: 50%;
    bottom: 20px;
    margin: 0 0 0 -219px;
    opacity: 0;
}

#tip2 {
    position: absolute;
    display: none;
    width: 438px;
    height: 157px;
    background-image: url('../images/tip2.png');
    left: 50%;
    bottom: 20px;
    margin: 0 0 0 -219px;
    opacity: 0;
}