@charset 'utf-8';
html {
    width: 100%;
    height: 100%
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective: 1000px;
    background: url("../images/bg.png") no-repeat center 100%;
    position: relative;
}
/*中间光圈↓*/
.bg0 {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: url(../images/bg1.png) no-repeat center center;
    background-size: 100%
}
.bg0-1{
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
/*罗旋转↓*/
.bg1 {
    width: 100%;
    height: 100%;
    animation: hxb 4s  ;
    -webkit-animation: hxb 4s  ;
    -moz-animation: hxb 4s  ;
    -o-animation: hxb 4s  ;
    -ms-animation: hxb 4s  ;
}
@keyframes hxb {
     0% {
         transform: rotateZ(0deg)
     }
     25%{
         background: url(../images/rotate.png) no-repeat center center;
     }
     80%{
         background: url(../images/rotate.png) no-repeat center center;
     }
     100% {
         transform: rotateZ(360deg)
     }
 }
@-webkit-keyframes hxb {
    0% {
        -webkit-transform: rotateZ(0deg)
    }
    25%{
        background: url(../images/rotate.png) no-repeat center center;
    }
    80%{
        background: url(../images/rotate.png) no-repeat center center;
    }
    100% {
        -webkit-transform: rotateZ(360deg)
    }
}
@-moz-keyframes hxb {
    0% {
        -moz-transform: rotateZ(0deg)
    }
    25%{
        background: url(../images/rotate.png) no-repeat center center;
    }
    80%{
        background: url(../images/rotate.png) no-repeat center center;
    }
    100% {
        -moz-transform: rotateZ(360deg)
    }
}
@-o-keyframes hxb {
    0% {
        -o-transform: rotateZ(0deg)
    }
    25%{
        background: url(../images/rotate.png) no-repeat center center;
    }
    80%{
        background: url(../images/rotate.png) no-repeat center center;
    }
    100% {
        -o-transform: rotateZ(360deg)
    }
}
@-ms-keyframes hxb {
    0% {
        -ms-transform: rotateZ(0deg)
    }
    25%{
        background: url(../images/rotate.png) no-repeat center center;
    }
    80%{
        background: url(../images/rotate.png) no-repeat center center;
    }
    100% {
        -ms-transform: rotateZ(360deg)
    }
}
/*圆球圈↓*/
.circular {
    width: 606px;
    height: 606px;
    top: -10%;
    left: -9%;
    position: absolute;
    animation: circular 5s linear infinite;
    -webkit-animation: circular 5s linear infinite;
    -moz-animation: circular 5s linear infinite;
    -o-animation: circular 5s linear infinite;
    z-index: -2;
}
@keyframes circular {
    0% {
        background: url(../images/circular.png) no-repeat center center;transform: rotateZ(0deg)
    }
    100% {
        background: url(../images/circular.png) no-repeat center center;transform: rotateZ(360deg)
    }
}
@-webkit-keyframes circular {
    0% {
        background: url(../images/circular.png) no-repeat center center;-webkit-transform: rotateZ(0deg)
    }
    100% {
        background: url(../images/circular.png) no-repeat center center;-webkit-transform: rotateZ(360deg)
    }
}
@-moz-keyframes circular {
    0% {
        background: url(../images/circular.png) no-repeat center center;-moz-transform: rotateZ(0deg)
    }
    100% {
        background: url(../images/circular.png) no-repeat center center;-moz-transform: rotateZ(360deg)
    }
}
@-o-keyframes circular {
    0% {
        background: url(../images/circular.png) no-repeat center center;-o-transform: rotateZ(0deg)
    }
    100% {
        background: url(../images/circular.png) no-repeat center center;-o-transform: rotateZ(360deg)
    }
}
@-ms-keyframes circular {
    0% {
        background: url(../images/circular.png) no-repeat center center;-ms-transform: rotateZ(0deg)
    }
    100% {
        background: url(../images/circular.png) no-repeat center center;-ms-transform: rotateZ(360deg)
    }
}
.hx-box {
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(75deg);
    -webkit-transform: translate(-50%, -50%) rotateY(75deg);
    -moz-transform: translate(-50%, -50%) rotateY(75deg);
    -o-transform: translate(-50%, -50%) rotateY(75deg);
    -ms-transform: translate(-50%, -50%) rotateY(75deg);
    z-index: 1;
}

.hx-box ul {
    width: 500px;
    height: 500px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    animation: hxz 20s linear infinite;
    -webkit-animation: hxz 20s linear infinite;
    -moz-animation: hxz 20s linear infinite;
    -o-animation: hxz 20s linear infinite;
    -ms-animation: hxz 20s linear infinite;
}

@keyframes hxz {
    0% {
        transform: rotateX(0deg)
    }
    100% {
        transform: rotateX(-360deg)
    }
}
@-webkit-keyframes hxz {
    0% {
        -webkit-transform: rotateX(0deg)
    }
    100% {
        -webkit-transform: rotateX(-360deg)
    }
}
@-moz-keyframes hxz {
    0% {
        -moz-transform: rotateX(0deg)
    }
    100% {
        -moz-transform: rotateX(-360deg)
    }
}
@-o-keyframes hxz {
    0% {
        -o-transform: rotateX(0deg)
    }
    100% {
        -o-transform: rotateX(-360deg)
    }
}
@-ms-keyframes hxz {
    0% {
        -ms-transform: rotateX(0deg)
    }
    100% {
        -ms-transform: rotateX(-360deg)
    }
}

.hx-box ul li {
    width: 500px;
    height: 500px;
    border: 4px solid #5ec0ff;
    border-radius: 1000px
}
/*动外圈↓*/
.hx-box ul li span {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/hx.png) no-repeat center center;
    background-size: 100% 100%;
    animation: hx 4s linear infinite;
    -webkit-animation: hx 4s linear infinite;
    -moz-animation: hx 4s linear infinite;
    -o-animation: hx 4s linear infinite;
    -ms-animation: hx 4s linear infinite;
}

@keyframes hx {
    to {
        transform: rotate(360deg)
    }
}
@-webkit-keyframes hx {
    to {
        -webkit-transform: rotate(360deg)
    }
}
@-moz-keyframes hx {
    to {
        -moz-transform: rotate(360deg)
    }
}
@-o-keyframes hx {
    to {
        -o-transform: rotate(360deg)
    }
}
@-ms-keyframes hx {
    to {
        -ms-transform: rotate(360deg)
    }
}

.hx-k2 {
    transform: rotateX(60deg) rotateZ(60deg)
}

.hx-k3 {
    transform: rotateX(-60deg) rotateZ(-60deg)
}