*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;}
.tips_blk{z-index:99999999999;position:absolute;left:50%;bottom:10px;width:130px;height: 20px;margin-left:-65px;text-align:center;}
.tips_blk p{z-index:99999999999;font-size:10px;color:#FFF;}
.tips_blk_hide p{z-index:99999999999;display:none;}
.loading{position:absolute;width:100%;height:100%;z-index: 99;overflow: hidden;background:url('../images/loading.gif?1') no-repeat 0 0;background-size:100% 100%;}

/*.loading1{position:absolute;width:120px;height:120px;background:url('../images/img1/loading1.png');background-size:100% 100%;top:25%;left:25%;*/
    /*-webkit-animation:rotate 1.2s linear infinite;*/
    /*animation:rotate 1.2s linear infinite;*/
/*}*/
/*.loading11{*/
    /*position:absolute;top:25%;left:33%;width: 35.26%;height:4px;background-color: #008eb3;*/
/*}*/
/*.loading11_1{*/
     /*position:absolute;top:0;left:0;width: 0;height:100%;background-color: #20b6dd;*/
 /*}*/

#loading_img1{
    width: 21%;;height:12%;position: absolute;;top:16%;left: 41%;
}

a{opacity:1}
/*loading*/

/*音乐*/
.music_blk{z-index:99999;position:fixed;right:5px;top:5px;}
.music{display:block;width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;}
.music_on{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}



.box{
    background-color: #000;
    height: 100%;
    width:100%;
    position: absolute;
    top:0;
    left: 0;
    perspective: 20000px;
    -webkit-perspective: 20000px;
    perspective-origin: 50% 50% ;
    -webkit-perspective-origin: 50% 50% ;
    overflow: hidden;
    -webkit-transform-origin: 50% 50% 0px;
    transform-origin: 50% 50% 0px;
}

.box.ani{
    -webkit-animation:box 8s  linear both;
    animation:box 8s  linear both;
}
.box_bg1{
    position:absolute;top:-31%;left:7%;width:86%;height:52.97%;background:url('../images/box_bg1.png?1') no-repeat;background-size:100% 100%;
    -webkit-animation:rotate 120s linear infinite;
    animation:rotate 120s linear infinite;
}
.box_bg2{
    position:absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p0.png?1') no-repeat;background-size:100% 100%;
}
.box_bg3{
    position:absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p0.0.png?1') no-repeat;background-size:100% 100%
}

.box_box{
    position: absolute;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    width: 100%;height: 100%;
}

.box_1{
    position: absolute;
    transform: translate3d(0, 0, 19000px)  scale3d(0.05, 0.05, 1);
    -webkit-transform: translate3d(0, 0, 19000px)  scale3d(0.05, 0.05, 1);
    width: 100%; height: 100%; transform-origin: 50% 50% 0px;background:url('../images/p0.1.png?1') no-repeat;background-size:100% 100%;
}
.box_1_1{
    position: absolute;
    width: 100%; height: 100%; transform-origin: 50% 50% 0px;background:url('../images/p0.2.png?1') no-repeat;background-size:100% 100%;
}
.box_1_2{
    position: absolute;
    width: 100%; height: 100%; top:3%;background:url('../images/p0.3.png?1') no-repeat;background-size:100% 100%;opacity: 0;
    -webkit-animation:up 0.8s linear infinite;
    animation:up 0.8s linear infinite;
}

/*.box_2{*/
    /*position: absolute;*/
    /*transform: translate3d(0, 0, 18500px)  scale3d(0.05, 0.05, 1);*/
    /*-webkit-transform: translate3d(0, 0, 18500px)  scale3d(0.05, 0.05, 1);*/
    /*width: 100%; height: 100%; transform-origin: 50% 50% 0px;background:url('../images/p0.4.png?1') no-repeat;background-size:100% 100%;*/
/*}*/

.box_3{
    position: absolute;
    transform: translate3d(0, 0, 17000px)  scale3d(0.05, 0.05, 1);
    -webkit-transform: translate3d(0, 0, 17000px)  scale3d(0.05, 0.05, 1);
    width: 100%; height: 100%; transform-origin: 50% 50% 0px;background:url('../images/p0.5.png?1') no-repeat;background-size:100% 100%;
}
.box_4{
    position: absolute;
    transform: translate3d(0, 0, 16500px)  scale3d(0.06, 0.06, 1);
    -webkit-transform: translate3d(0, 0, 16500px)  scale3d(0.06, 0.06, 1);
    width: 100%; height: 100%; transform-origin: 50% 50% 0px;background:url('../images/p0.4.png?1') no-repeat;background-size:100% 100%;
}

.box_5{
    position: absolute;
    transform: translate3d(0, 0, 14500px)  scale3d(0.05, 0.05, 1);
    -webkit-transform: translate3d(0, 0, 14500px)  scale3d(0.05, 0.05, 1);
    width: 100%; height: 100%; transform-origin: 50% 50% 0px;background:url('../images/p0.7.png?1') no-repeat;background-size:100% 100%;
}

/*.box_6{*/
    /*position: absolute;*/
    /*transform: translate3d(0, 0, 13000px)  scale3d(0.05, 0.05, 1);*/
    /*-webkit-transform: translate3d(0, 0, 13000px)  scale3d(0.05, 0.05, 1);*/
    /*width: 100%; height: 100%; transform-origin: 50% 50% 0px;background:url('../images/p0.7.png?1') no-repeat;background-size:100% 100%;*/
/*}*/

/*.box_7{*/
    /*position: absolute;*/
    /*transform: translate3d(0, 0, 11500px)  scale3d(0.05, 0.05, 1);*/
    /*-webkit-transform: translate3d(0, 0, 11500px)  scale3d(0.05, 0.05, 1);*/
    /*width: 100%; height: 100%; transform-origin: 50% 50% 0px;background:url('../images/p0.9.png?1') no-repeat;background-size:100% 100%;*/
/*}*/

.box_8{
    position: absolute;width: 100%; height: 100%;top:0;left:0;
}
.box_8_1{
    position: absolute; width: 100%; height: 100%;top:0;left:0; transform-origin: 50% 50% 0px;
    background:url('../images/p1.1.png?1') no-repeat;background-size:100% 100%;opacity: 0;
}
.box_8_2{
    position: absolute; width: 100%; height: 100%;top:10%;left:0; transform-origin: 50% 50% 0px;
    background:url('../images/p1.1-1.png?1') no-repeat;background-size:100% 100%;opacity: 0;
}
.box_8_3{
    position: absolute; width: 100%; height: 100%;top:0;left:0; transform-origin: 50% 50% 0px;
    background:url('../images/p1.2.png?1') no-repeat;background-size:100% 100%;opacity: 0;
}
.box_click{
    position: absolute;top:70%;left:16%;width: 65%;height:10%;opacity: 0;
}

.box_8.ani .box_8_1{
    -webkit-animation:Out 1s linear both;
    animation:Out 1s linear both;
}
.box_8.ani .box_8_2{
    -webkit-animation:box_8_2 0.8s 1s linear both;
    animation:box_8_2 0.8s 1s linear both;
}
.box_8.ani .box_8_3{
    -webkit-animation:Out 1s 2.2s linear both;
    animation:Out 1s 2.2s linear both;
}



.box_mask{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p1.3.png?1') no-repeat;background-size:100% 100%;display:none
}

.box_input{
    width: 61%;height:7.5%;position: absolute;top:32%;left:18%;
}
#input1{display:inline-block;width: 100%;height:100%;position: absolute;top:0%;left:0%;outline:0;border:2px solid #407cde;font-size: 18px;background-color: #0d254e;color: white;text-align: center}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #fff;font-size:16px;
}
.box_mask_click{
    width:36%;;height:10%;position: absolute;top:46%;left:30%;
}


.bg1{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p2.jpg?1') no-repeat;background-size:100% 100%;
}
.bg1_1{
    width: 100%;;height:100%;top:5%;left:0;position: absolute;background:url('../images/p2.2.png?1') no-repeat;background-size:100% 100%;
}
.bg1_bg1{
    width: 63.6%;;height:19.74%;top:0;left:23%;position: absolute;background:url('../images/p2.1.png?1') no-repeat;background-size:100% 100%;
}

.bg1_man{
    width: 73.26%;;height:28.47%;top:22.32%;left:14.33%;position: absolute;
}
.bg1_man div{
    width: 25%;height:100%;float: left;
}

.bg1 ul{
    width:87.5%;height:21%;position: absolute;top:57%;left:12.4%
}
ul li{
    float: left;width: 22%;height:55%;list-style: none;
}
ul li:nth-of-type(1){
    background:url('../images/man/1.png?1') no-repeat;background-size:100% 100%;
}
ul li:nth-of-type(2){
    background:url('../images/man/2.png?1') no-repeat;background-size:100% 100%;
}
ul li:nth-of-type(3){
    background:url('../images/man/3.png?1') no-repeat;background-size:100% 100%;
}
ul li:nth-of-type(4){
    background:url('../images/man/4.png?1') no-repeat;background-size:100% 100%;
}
ul li:nth-of-type(5){
    background:url('../images/man/5.png?1') no-repeat;background-size:100% 100%;
}
ul li:nth-of-type(6){
    background:url('../images/man/6.png?1') no-repeat;background-size:100% 100%;
}
ul li:nth-of-type(7){
    background:url('../images/man/7.png?1') no-repeat;background-size:100% 100%;
}
ul li:nth-of-type(8){
    background:url('../images/man/8.png?1') no-repeat;background-size:100% 100%;
}
.bg1 li.ani{
    transform: scale(1.2);-webkit-transform: scale(1.2);
}
.bg1_click1{
    width: 29%;height:10%;position: absolute;top:82%;left:17%;
}
.bg1_click2{
    width: 29%;height:10%;position: absolute;top:82%;left:52%;
}


.bg2{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p3.jpg?1') no-repeat;background-size:100% 100%;
}
.bg2_1{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p3.1.png?1') no-repeat;background-size:100% 100%;
}
.bg2_2{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p3.2.png?1') no-repeat;background-size:100% 100%;
}
.bg2_3{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p3.3.png?1') no-repeat;background-size:100% 100%;
}
.bg2_4{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p3.4.png?1') no-repeat;background-size:100% 100%;
}
.bg2_5{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p3.5.png?1') no-repeat;background-size:100% 100%;
}

.bg2_6{
    width: 86%;;height:26.58%;top:32.837%;left:7.55%;position: absolute;
}
.bg2_6_1{
    width:18.35%;height:100%;position: absolute;left:0;
}
.bg2_6_2{
    width:18.35%;height:100%;position: absolute;left:18.34%;
}
.bg2_6_3{
    width:18.35%;height:100%;position: absolute;left:63.29%;
}
.bg2_6_4{
    width:18.35%;height:100%;position: absolute;left:81.64%;
}

.bg2_7{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.bg2_7_img{
    width: 12%;height:9%;position: absolute;top:38%;left:48%;
}

.bg2_canvas{
    width:26.78% ;height:100%;position:absolute;left:36.7%;top:0;
}
.canvas_div{
    width: 100%;height:100%;position: absolute;left:0;top:0;display:none
}
#canvas_div{
    width: 100%;height:100%;position: absolute;left:0;top:0
}

#file1{
    width: 14%;height:15%;position: absolute;top:37%;left:42%;opacity: 0;
}
/*.bg2_click1{*/
    /*width: 29%;height:6%;position: absolute;left:12%;top:79%;background-color: #00acc1;opacity: 0.3;*/
/*}*/
#file1.ani{
    width: 29%;height:6%;position: absolute;left:12%;top:79%;opacity: 0;
}

.bg2_click2{
    width: 45%;height:6%;position: absolute;left:45%;top:79%;
}


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

#video1_1{object-fit: fill}




.bg3{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p3.jpg?1') no-repeat;background-size:100% 100%;
}
.bg3_1{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p4.1.png?1') no-repeat;background-size:100% 100%;
}
.bg3_2{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p4.2.png?1') no-repeat;background-size:100% 100%;
}
.bg3_3{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p4.3.png?1') no-repeat;background-size:100% 100%;
}
.bg3_4{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p4.3-1.png?1') no-repeat;background-size:100% 100%;display:none
}
.bg3_click{
    width: 79%;;height:8%;top:75%;left:10%;position: absolute;
}
.bg3_click2{
    width: 58%;;height:4%;top:88%;left:24%;position: absolute;
}

#img1{
    width: 86%;;height:26.58%;top:32.837%;left:7.55%;position: absolute;opacity: 0;
}


.bg4{width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p5.jpg?1') no-repeat;background-size:100% 100%;}
.bg4_1{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p5.1.png?1') no-repeat;background-size:100% 100%;display:none
}
.bg4_img{
    width: 38.21%;;height:23.76%;top:27.25%;left:30.7%;position: absolute;
}
.bg4_2{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p5.2.png?1') no-repeat;background-size:100% 100%;
}
.bg4_3{
    width: 100%;;height:100%;top:0;left:0;position: absolute;background:url('../images/p5.3.png?1') no-repeat;background-size:100% 100%;display: none;
}
.bg4_click{
    position: absolute;left:26%;top:82%;width:45%;height:8%;
}
.bg4_click.add{
    top:62%;
}





@keyframes box{
    0%{    perspective: 20000px;-webkit-perspective: 20000px;perspective-origin: 50% 50% ;-webkit-perspective-origin: 50% 50% ;}

    100%{perspective: 14400px;-webkit-perspective:14400px;perspective-origin: 50% 50% ;-webkit-perspective-origin: 50% 50% ;}
}


@-webkit-keyframes box{
    0%{    perspective: 20000px;-webkit-perspective: 20000px;}
    100%{    perspective: 14400px; -webkit-perspective: 14400px;}
}
@-webkit-keyframes box_8_2 {
    0% { -webkit-transform: translate3d(0, 0, 0) scale(2) ;opacity: 0;}
    100% {-webkit-transform:translate3d(0,-10%, 0) scale(1) ;opacity: 1}
}

@keyframes box_8_2 {
    0% {transform:  translate3d(0, 0,0) scale(2) ;opacity: 0;}
    100% {transform: translate3d(0, -10%, 0) scale(1) ;opacity: 1}
}

@keyframes Out{
    0%{opacity:0}
    100%{opacity:1}
}
@-webkit-keyframes Out{
    0%{opacity: 0}
    100%{opacity:1}
}

@-webkit-keyframes earth_7 {
    0% { -webkit-transform: translate3d(1%, 1.5%, 8500px) scale3d(0.01, 0.008, 1) ;opacity: 0;}
    100% {-webkit-transform:translate3d(0,0, 8500px) scale3d(0.14, 0.128, 1) ;opacity: 1}
}

@keyframes earth_7 {
    0% {transform:  translate3d(1%, 1.5%, 8500px) scale3d(0.01, 0.008, 1) ;opacity: 0;}
    100% {transform: translate3d(0, 0, 8500px) scale3d(0.14, 0.128, 1) ;opacity: 1}
}



@-webkit-keyframes hand {
    0% {-webkit-transform: translate3d(0, 0,0)}
    100% {-webkit-transform: translate3d(0, -15%, 0)}
}

@keyframes hand {
    0% {transform:translate3d(0, 0,0);}
    100% {transform: translate3d(0, -15%, 0);}
}

@-webkit-keyframes up {
    0% {-webkit-transform: translate3d(0, 0,0);opacity: 0}
    100% {-webkit-transform: translate3d(0, -3%, 0);opacity: 1}
}

@keyframes up {
    0% {transform:translate3d(0, 0,0);opacity: 0}
    100% {transform: translate3d(0, -3%, 0);opacity:1}
}

@-webkit-keyframes box_0_1 {
    0% {-webkit-transform: translate3d(0, 0,0);opacity: 0}
    100% {-webkit-transform: translate3d(-350%, 300%, 0);opacity: 1}
}

@keyframes box_0_1 {
    0% {transform:translate3d(0, 0,0);opacity: 0}
    100% {transform: translate3d(-350%, 300%, 0);opacity: 1}
}


@-webkit-keyframes box_0_2 {
    0% {-webkit-transform: translate3d(0, 0,0);opacity: 0}
    100% {-webkit-transform: translate3d(-450%, 325%, 0);opacity: 1}
}

@keyframes box_0_2 {
    0% {transform:translate3d(0, 0,0);opacity: 0}
    100% {transform: translate3d(-450%, 325%, 0);opacity: 1}
}


@-webkit-keyframes box_0_3 {
    0% {-webkit-transform: translate3d(0, 0,0);opacity: 0}
    100% {-webkit-transform: translate3d(-550%, 200%, 0);opacity: 1}
}
@keyframes box_0_3 {
    0% {transform:translate3d(0, 0,0);opacity: 0}
    100% {transform: translate3d(-550%, 200%, 0);opacity: 1}
}


@-webkit-keyframes box_0_4 {
    0% {-webkit-transform: translate3d(0, 0,0);opacity: 0}
    100% {-webkit-transform: translate3d(-600%, 200%, 0);opacity: 1}
}

@keyframes box_0_4 {
    0% {transform:translate3d(0, 0,0);opacity: 0}
    100% {transform: translate3d(-600%, 200%, 0);opacity: 1}
}

@-webkit-keyframes shake{
    0%{opacity: 0}
    25%{opacity:1}
    50%{opacity: 0}
    75%{opacity:1}
    100%{opacity: 0}
}


@keyframes shake{
    0%{opacity: 0}
    25%{opacity:1}
    50%{opacity: 0}
    75%{opacity:1}
    100%{opacity: 0}
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}