.nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #202B4E;
    opacity: 0.8;
    z-index: 9;
}

.nav img {
    position: absolute;
    top: 14px;
    left: 360px;
}

/*背后数字*/
.number {
    width: 1354px;
    height: 519px;
    position: fixed;
}

.zma {
    position: relative;
    z-index: 5;
}

.zma button {
    position: absolute;
    top: 83%;
    left: 30%;
    opacity: 0.5;
    width: 190px;
    height: 50px;
    background: #000000;
    border: none;
    outline: none;
    border-radius: 5px;
    z-index: 999;
    box-sizing: border-box;
}

.zma button:hover {
    opacity: 1;
    background: #000000;
}

.zma button:active {
    opacity: 1;
    background: #000000;
}

.login {
    color: #ffffff;
    font-size: 20px;
}

/*左边光*/
.left-light {
    width: 613px;
    height: 129px;
    position: absolute;
    animation: left-light 1s;
    -webkit-animation: left-light 1s;
    -moz-animation: left-light 1s;
    -o-animation: left-light 1s;
    -ms-animation: left-light 1s;
    filter: blur(10px);
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
}

@keyframes left-light {
    0% {
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -202%;
    }
    50% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.8
    }
    80% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.5
    }
    100% {
        height: 129px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.2
    }
}

@-webkit-keyframes left-light {
    0% {
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -202%;
    }
    50% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.8
    }
    80% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.5
    }
    100% {
        height: 129px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.2
    }
}

@-moz-keyframes left-light {
    0% {
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -202%;
    }
    50% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.8
    }
    80% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.5
    }
    100% {
        height: 129px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.2
    }
}

@-o-keyframes left-light {
    0% {
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -202%;
    }
    50% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.8
    }
    80% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.5
    }
    100% {
        height: 129px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.2
    }
}

@-ms-keyframes left-light {
    0% {
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -202%;
    }
    50% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.8
    }
    80% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.5
    }
    100% {
        height: 129px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 25%;
        left: -152%;
        opacity: 0.2
    }
}

/*右边光*/
.right-light {
    width: 613px;
    height: 129px;
    position: absolute;
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    animation: right-light 1s;
    -ms-animation: right-light 1s;
    -webkit-animation: right-light 1s;
    -moz-animation: right-light 1s;
    -o-animation: right-light 1s;
    filter: blur(10px);
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
}

@keyframes right-light {
    0% {
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 166%;
    }
    50% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.8
    }
    80% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.5
    }
    100% {
        height: 129px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.2
    }
}

@-webkit-keyframes right-light {
    0% {
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 166%;
    }
    50% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.8
    }
    80% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.5
    }
    100% {
        height: 129px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.2
    }
}

@-moz-keyframes right-light {
    0% {
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 166%;
    }
    50% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.8
    }
    80% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.5
    }
    100% {
        height: 129px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.2
    }
}

@-o-keyframes right-light {
    0% {
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 166%;
    }
    50% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.8
    }
    80% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.5
    }
    100% {
        height: 129px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.2
    }
}

@-ms-keyframes right-light {
    0% {
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 166%;
    }
    50% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.8
    }
    80% {
        height: 159px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.5
    }
    100% {
        height: 129px;
        background: url("../images/leftlight.png") no-repeat no-repeat center center;
        top: 56%;
        left: 136%;
        opacity: 0.2
    }
}

.zall {
    width: 600px;
    height: 100px;
    position: absolute;
    animation: zall 1s;
    -webkit-animation: zall 1s;
    -moz-animation: zall 1s;
    -o-animation: zall 1s;
    top: 30%;
    opacity: 0;
    background: url("../images/zall.png") no-repeat no-repeat center center;

}

@keyframes zall {
    0% {
        left: -132%;
        opacity: 1
    }
    90% {
        left: -70%;
        opacity: 1
    }
    99% {
        left: -70%;
        opacity: 0.3
    }
    100% {
        left: -72%;
        opacity: 0
    }
}

@-webkit-keyframes zall {
    0% {
        left: -132%;
        opacity: 1
    }
    90% {
        left: -70%;
        opacity: 1
    }
    99% {
        left: -70%;
        opacity: 0.3
    }
    100% {
        left: -72%;
        opacity: 0
    }
}

@-moz-keyframes zall {
    0% {
        left: -132%;
        opacity: 1
    }
    90% {
        left: -70%;
        opacity: 1
    }
    99% {
        left: -70%;
        opacity: 0.3
    }
    100% {
        left: -72%;
        opacity: 0
    }
}

@-o-keyframes zall {
    0% {
        left: -132%;
        opacity: 1
    }
    90% {
        left: -70%;
        opacity: 1
    }
    99% {
        left: -70%;
        opacity: 0.3
    }
    100% {
        left: -72%;
        opacity: 0
    }
}

.mar {
    width: 600px;
    height: 100px;
    position: absolute;
    top: 56%;
    left: 116%;
    opacity: 0;
    animation: mar 1s;
    -webkit-animation: mar 1s;
    -moz-animation: mar 1s;
    -o-animation: mar 1s;
    -ms-animation: mar 1s;
    background: url("../images/mar.png") no-repeat no-repeat center center;
}

@keyframes mar {
    0% {
        left: 116%;
        opacity: 1
    }
    90% {
        left: 62%;
        opacity: 1
    }
    99% {
        left: 62%;
        opacity: 0.3
    }
    100% {
        left: 52%;
        opacity: 0
    }
}

@-moz-keyframes mar {
    0% {
        left: 116%;
        opacity: 1
    }
    90% {
        left: 62%;
        opacity: 1
    }
    99% {
        left: 62%;
        opacity: 0.3
    }
    100% {
        left: 52%;
        opacity: 0
    }
}

@-webkit-keyframes mar {
    0% {
        left: 116%;
        opacity: 1
    }
    90% {
        left: 62%;
        opacity: 1
    }
    99% {
        left: 62%;
        opacity: 0.3
    }
    100% {
        left: 52%;
        opacity: 0
    }
}

@-o-keyframes mar {
    0% {
        left: 116%;
        opacity: 1
    }
    90% {
        left: 62%;
        opacity: 1
    }
    99% {
        left: 62%;
        opacity: 0.3
    }
    100% {
        left: 52%;
        opacity: 0
    }
}

@-ms-keyframes mar {
    0% {
        left: 116%;
        opacity: 1
    }
    90% {
        left: 62%;
        opacity: 1
    }
    99% {
        left: 62%;
        opacity: 0.3
    }
    100% {
        left: 52%;
        opacity: 0
    }
}

/*卓红*/
.z-red {
    width: 565px;
    height: 230px;
    position: absolute;
    top: 26%;
    left: -6%;
    background: url("../images/zma.png") no-repeat no-repeat center center;
}

/*蓝光*/
.bluray {
    width: 555px;
    height: 86px;
    position: absolute;
    top: 57%;
    left: 50%;
    background: url("../images/bluray.png") no-repeat no-repeat center center;
    -webkit-filter: blur(3px); /* Chrome, Opera */
    -moz-filter: blur(3px); /* Firefox */
    -ms-filter: blur(3px);
    filter: blur(3px);
}

/*ie取消动画*/
.Cancel-an {
    display: none;
}
.add-photo {
    width: 606px;
    height: 606px;
    top: -10%;
    left: -12%;
    position: absolute;
    z-index: -2;
    background: url("../images/ie-bg.png") no-repeat center center;
}
.add-photo-ie8 {
    width: 606px;
    height: 606px;
    top: 18%;
    left: 35%;
    position: absolute;
    z-index: -2;
    background: url("../images/ie-bg.png") no-repeat center center;
}
.ie-btn {
    position: absolute;
    top: 77%;
    left: 34%;
    opacity: 0.5;
    width: 190px;
    height: 50px;
    background: #000000;
    color: white;
    border: none;
    outline: none;
    border-radius: 5px;
    z-index: 999;
    box-sizing: border-box;
}
.ie-btn button:hover {
    opacity: 1;
    background: #000000;
}

.ie-btn button:active {
    opacity: 1;
    background: #000000;
}
.zma-ie8{
    position: absolute;
    left: 23px;
    top: 165px;
}