@charset utf-8;
body,
html {
    height: 100%
}
.footer,
.header {
    z-index: 99
}
.clearfix:after,.page_1 .page_bg:before {
    content: ""
}
html {
    +overflow: hidden
}
body {
    position: relative;
    width: 100%
}
.header,
.wrap,
.wrapper {
    position: absolute;
    top: 0;
}

body,dd,div,dl,dt,h1,h2,h3,h4,input,li,ol,p,table,ul {
  margin: 0;
  padding: 0
}

table {
  width: auto;
  border-collapse: collapse;
  border-spacing: 0
}

.footer,.header,.wrap,.wrapper {
  width: 100%;
  left: 0
}
.indexfooter{
    position: absolute;
    bottom: 12px;
    width: 100%;
    left: 0;
/**/z-index: 90;
    text-align: center;
    font-size: 14px;
    color: #4c4c4c;
}

li {
  list-style: none;
  vertical-align: bottom
}

em,i {
  font-style: normal
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.btn_download:hover,.header .nav_box a:hover {
  text-decoration: underline;
  color:#fff;
}

img {
  border: 0;
}

.hidden {
  display: none;
}

.hide_txt {
  text-indent: -9999em;
  font-size: 0;
  line-height: 0;
}

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
}

.clearfix {
  zoom: 1;
}

.wrap {
  font: 12px/1.5 \5FAE\8F6F\96C5\9ED1,sans-serif;
  font-family: "Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei","微软雅黑",tahoma,arial,simsun,"宋体";
}

.wrap,.wrapper {
  height: 100%;
  background: #000;
  overflow: hidden;
}

.header .head {
  padding: 20px
}

.header .logo_box {
  float: left
}



.header .nav_box {
  float: right;
  position: relative;
}

.header .nav_box li {
  float: left;
  padding: 0 10px;
}

.header .nav_box a {
  font-size: 16px;
  color: #fff;
  line-height: 50px;
  padding: 0 6px;
  display: block;
}

.header .nav_box .ic_line {
  position: absolute;
  height: 2px;
  background: #fff;
  bottom: 6px;
  width: 40px;
  transition: left .2s,width .2s;
  -webkit-transition: left .2s,width .2s;
  display: none
}

.page,.page_wp {
  top: 0;
  height: 100%
}

.footer {
  position: absolute;
  bottom: 12px
}

.page_wp,.page_wp .txt_box {
  width: 100%;
  z-index: 5;
  position: absolute
}

.footer .foot {
  text-align: center;
  font-size: 14px;
  color: #4c4c4c
}

.page_wp {
    left: 0
}
.page {
    position: absolute;
    left: -9999px;
    width: 100%
}
.page_wp .show {
    left: 0
}
.page_wp .txt_box {
    bottom: 140px;
    left: 0;
    color: #fff;
    opacity: 0;
    transition: opacity .8s;
    -webkit-transition: opacity .8s
}
.page_wp .show .txt_box {
    opacity: 1
}
.page_wp .txt_box h2 {
    text-align: center;
    font-size: 36px;
    font-weight: lighter;
    line-height: 40px
}
.page_wp .txt_brief {
    font-size: 14px;
    line-height: 24px;
    max-width: 800px;
    margin: 10px auto 0;
    font-weight: lighter;
    text-align: center;
}
.page_wp .img_box {
    position: absolute;
    width: 1920px;
    height: 1080px;
    top: 50%;
    left: 50%;
    margin: -540px 0 0 -960px;
    z-index: 3
}
.page_wp .img_box img {
    /*display: block;*/
    width: 100%;
    height: 100%
}
.css3 .page_wp .img_box {
    display: none
}
.page_1.hide {
    left: 0
}
.page_1.hide .txt_box {
    left: -9999px
}
.page_1 .page_bg,
.page_2 .page_bg,
.page_3 .page_bg,
.page_4 .page_bg{
  position: absolute;
  /*top: 50%;
  left: 50%;*/
  top:0;bottom:0;left:0;right:0;
  /*width: 2500px;*/width:100%;
  /*height: 1600px;*/height:100%;
  /*margin: -800px 0 0 -1250px;*/
  margin:auto;
  -ms-transform-origin: center;
      transform-origin: center;
  -webkit-transform-origin: center;
}

.page_4 .page_bg:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -ms-transform: scale(1.2);
        transform: scale(1.2);
    -webkit-transform: scale(1.2)
}

.page_1 .page_bg:before,
.page_2 .page_bg:before,
.page_3 .page_bg:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -ms-transform: scale(1.2);
        transform: scale(1.2);
    -webkit-transform: scale(1.2)
}

.page_3 .page_bg:before {
  /*width: 80%;
  height: 80%;*/
  width: 100%;
  height: 100%;
}

.page_1 .page_bg:before,
.page_3 .page_bg:before {
  /*-webkit-transform-origin: center 708px;
  -ms-transform-origin: center 708px;
  transform-origin: center 708px;*/
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
.page_4 .light_wp {
    position: absolute;
    width: 1000px;
    height: 460px;
    top: 50%;
    left: 15%;
    margin-top: -230px
}
.page_4 .light_box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*-ms-transform: scale(.8);
        transform: scale(.8);
    -webkit-transform: scale(.8)*/
}
.page_4 .light_1 {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 476px;
    height: 72px;
    margin-bottom: -18px;
    background: url(../img/light_2.png?v=242c3c618a2ad541082733414997ef2a)
}
.page_4 .light_2,
.page_4 .light_3,
.page_4 .light_4 {
    position: absolute;
    width: 476px;
    height: 72px;
    background: url(../img/light_1.png?v=7c3e5e2e124547afaee7fcaaff70bd57);
    /*-ms-transform: scale(.8);
        transform: scale(.8);
    -webkit-transform: scale(.8)*/
}
.page_4 .light_2 {
    top: 0;
    left: 260px
}
.page_4 .light_3 {
    bottom: 0;
    left: 190px
}
.page_4 .light_4 {
    top: 50%;
    margin-top: -18px;
    right: 0
}
.page_4 .light_5 {
    position: absolute;
    width: 1920px;
    height: 1080px;
    bottom: 50%;
    margin-bottom: -523px;
    left: -923px;
    background: url(../img/light_3.png?v=e6f2a0b5f72f53e91796633bd94794e3);
    /*-ms-transform: scale(.8);
        transform: scale(.8);
    -webkit-transform: scale(.8)*/
}

.star_wp {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -9999px
}
.star_wp.show {
    left: 0
}
.star_wp .star_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2400px;
    height: 2000px;
    margin: -1000px 0 0 -1200px;
    background-size:100% 100%;
    -ms-transform-origin: center center;
        transform-origin: center center;
    -webkit-transform-origin: center center
}
.star_wp .star_box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1740px;
    height: 1356px;
    margin: -678px 0 0 -870px;
    background: url(../img/star.png?v=8832ec2224c70d23f526dab0c25f42eb) center center no-repeat;
    -ms-transform-origin: center center;
        transform-origin: center center;
    -webkit-transform-origin: center center;
    z-index: 4;
}
#canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: none
}
.btn_control,
.btns_wp {
    z-index: 20;
    position: absolute
}
.btn_control {
  display:none;
  top: 50%;
  right: 50px;
  margin-top: -42px
}
@media screen and (min-width: 767px){
  .btn_control{display:block;}
}

.btn_control a {
    display: block;
    background: url(../img/btn_spr.png?v=161c5cde5cca472566aee1331226a3ad) -14px -52px no-repeat;
    width: 9px;
    height: 9px;
    margin: 0 0 12px
}
.btn_control a.cur,
.btn_control a:hover {
    background-position: 0 -52px
}
.btns_wp {
    width: 100%;
    bottom: 70px
}
.btn_download {
    display: block;
    margin: 26px auto 0;
    width: 156px;
    height: 38px;
    text-align: center;
    line-height: 32px;
    border: 2px solid #fff;
    font-size: 18px;
    color: #fff
}
.sys_footer {
    color: #524d45!important;
    min-width: 1000px;
    
    position: absolute;
    bottom: 40px
}
.foot .links a,
.foot a {
    color: #524d45
}
/*.page_1.show .page_bg {
    -webkit-animation: p1bg_effect1 600s both infinite linear, opc_effect .5s both linear;
    animation: p1bg_effect1 600s both infinite linear, opc_effect .5s both linear;
    
}*/
.page_1.hide .page_bg{
    -webkit-animation: p1bg_effect2 .0s both linear;
    animation: p1bg_effect2 .0s both linear;
}

.page_3 .page_bg,.page_4 .page_bg{
   opacity: 0;
}
.page_2.show .page_bg{
   
            -webkit-animation:p3bg_effect 30s both linear;
                    animation:p3bg_effect 30s both linear;
}
.page_3.show .page_bg{
   
            -webkit-animation:opc_effect 2.5s both linear,p3bg_effect 30s both linear;
                    animation:opc_effect 2.5s both linear,p3bg_effect 30s both linear;
}
.page_4.show .page_bg{
            -webkit-animation:opc_effect 2.5s both linear;
                    animation:opc_effect 2.5s both linear;
}
@keyframes p1bg_effect1 {
    0% {
        -webkit-transform: rotate(0) scale(1);
                transform: rotate(0) scale(1)
    }
    100% {
        -webkit-transform: rotate(-360deg) scale(4);
                transform: rotate(-360deg) scale(4)
    }
}
@-webkit-keyframes p1bg_effect1 {
    0% {
        -webkit-transform: rotate(0) scale(1)
    }
    100% {
        -webkit-transform: rotate(-360deg) scale(4)
    }
}
.page_1.hide .page_bg:before {
    animation: p1bg_effect2 .0s both linear;
    -webkit-animation: p1bg_effect2 .0s both linear
}
@keyframes p1bg_effect2 {
    0% {
        -webkit-transform: rotate(0) scale(1);
                transform: rotate(0) scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: rotate(-100deg) scale(4);
                transform: rotate(-100deg) scale(4);
        opacity: 0
    }
}
@-webkit-keyframes p1bg_effect2 {
    0% {
        -webkit-transform: rotate(0) scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: rotate(-100deg) scale(4);
        opacity: 0
    }
}
.star_wp.show .star_bg {
    animation: opc_effect 2s both linear, p3bg_effect 30s both linear;
    -webkit-animation: opc_effect 2s both linear, p3bg_effect 30s both linear
}
@keyframes p3bg_effect {
    0% {
        -webkit-transform: rotate(0) scale(1);
                transform: rotate(0) scale(1)
    }
    100% {
        -webkit-transform: rotate(10deg) scale(1.2);
                transform: rotate(10deg) scale(1.2)
    }
}
@-webkit-keyframes p3bg_effect {
    0% {
        -webkit-transform: rotate(0) scale(1)
    }
    100% {
        -webkit-transform: rotate(10deg) scale(1.2)
    }
}
.star_wp.show .star_box {
    animation: p3star_effect 20s both linear;
    -webkit-animation: p3star_effect 20s both linear
}
@keyframes p3star_effect {
    0% {
        -webkit-transform: scale(0);
                transform: scale(0)
    }
    100% {
        -webkit-transform: scale(.98);
                transform: scale(.98)
    }
}
@-webkit-keyframes p3star_effect {
    0% {
        -webkit-transform: scale(0)
    }
    100% {
        -webkit-transform: scale(.98)
    }
}
.page_4.show .light_wp {
    animation: p4light_effect 10s both linear infinite;
    -webkit-animation: p4light_effect 10s both linear infinite
}
@keyframes p4light_effect {
    0% {
        -webkit-transform: translate(5000px, 0);
                transform: translate(5000px, 0)
    }
    10%,
    50% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0)
    }
    100%,
    60% {
        -webkit-transform: translate(-5000px, 0);
                transform: translate(-5000px, 0)
    }
}
@-webkit-keyframes p4light_effect {
    0% {
        -webkit-transform: translate(5000px, 0)
    }
    10%,
    50% {
        -webkit-transform: translate(0, 0)
    }
    100%,
    60% {
        -webkit-transform: translate(-5000px, 0)
    }
}
.page_4.show .light_1,
.page_4.show .light_3 {
    animation: p4light13_effect 10s both linear infinite;
    -webkit-animation: p4light13_effect 10s both linear infinite
}
@keyframes p4light13_effect {
    0%,
    10% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0)
    }
    100%,
    50% {
        -webkit-transform: translate(-50px, 0);
                transform: translate(-50px, 0)
    }
}
@-webkit-keyframes p4light13_effect {
    0%,
    10% {
        -webkit-transform: translate(0, 0)
    }
    100%,
    50% {
        -webkit-transform: translate(-50px, 0)
    }
}
.page_4.show .light_2,
.page_4.show .light_4 {
    animation: p4light24_effect 10s both linear infinite;
    -webkit-animation: p4light24_effect 10s both linear infinite
}
@keyframes p4light24_effect {
    0%,
    10% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0)
    }
    100%,
    50% {
        -webkit-transform: translate(-100px, 0);
                transform: translate(-100px, 0)
    }
}
@-webkit-keyframes p4light24_effect {
    0%,
    10% {
        -webkit-transform: translate(0, 0)
    }
    100%,
    50% {
        -webkit-transform: translate(-100px, 0)
    }
}
.page_4.show .light_5 {
    animation: p4light5_effect 10s both linear infinite;
    -webkit-animation: p4light5_effect 10s both linear infinite
}
@keyframes p4light5_effect {
    0%,
    10% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
        opacity: 0
    }
    16%,
    28% {
        opacity: 1
    }
    22%,
    34% {
        opacity: 0
    }
    100%,
    50% {
        -webkit-transform: translate(-50px, 0);
                transform: translate(-50px, 0);
        opacity: 0
    }
}
@-webkit-keyframes p4light5_effect {
    0%,
    10% {
        -webkit-transform: translate(0, 0);
        opacity: 0
    }
    16%,
    28% {
        opacity: 1
    }
    22%,
    34% {
        opacity: 0
    }
    100%,
    50% {
        -webkit-transform: translate(-50px, 0);
        opacity: 0
    }
}
.page_4.show .meteor_box {
    animation: p4meteor_effect 10s both linear infinite;
    -webkit-animation: p4meteor_effect 10s both linear infinite
}
@keyframes p4meteor_effect {
    0%,
    65% {
        -webkit-transform: translate(-1000px, 1000px);
                transform: translate(-1000px, 1000px)
    }
    100%,
    80% {
        -webkit-transform: translate(1000px, -1000px);
                transform: translate(1000px, -1000px)
    }
}
@-webkit-keyframes p4meteor_effect {
    0%,
    65% {
        -webkit-transform: translate(-1000px, 1000px)
    }
    100%,
    80% {
        -webkit-transform: translate(1000px, -1000px)
    }
}
@keyframes opc_effect {
    0% {
        opacity: 0
    }
    25% {
        opacity: 0.25
    }
    50% {
        opacity: 0.5
    }
    75% {
        opacity: 0.75
    }
    100% {
        opacity: 1
    }
}
@-webkit-keyframes opc_effect {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0.5
    }
    100% {
        opacity: 1
    }
}
.scale_box {
    -ms-transform-origin: center center;
        transform-origin: center center;
    -webkit-transform-origin: center center
}
/*@media only screen and (min-width:1600px) {
    .scale_box {
        -ms-transform: scale(1);
            transform: scale(1);
        -webkit-transform: scale(1)
    }
}
@media only screen and (min-width:1024px) and (max-width:1599px) {
    .scale_box {
        -ms-transform: scale(.875);
            transform: scale(.875);
        -webkit-transform: scale(.875)
    }
}
@media only screen and (max-width:1023px) {
    .scale_box {
        -ms-transform: scale(.7);
            transform: scale(.7);
        -webkit-transform: scale(.7)
    }
}
*/