/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}#{box-sizing:border-size}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a,a:active,a:hover{background-color:transparent}a:active,a:hover{outline:0;border:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-size:1em;font-family:monospace}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* 全局
* --------------------------------------- */
*{margin: 0;padding: 0;box-sizing: border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;outline: none;border: none;border-image-width:0;font-family: "SimHei";}
html{height: 100%;overflow: hidden;background:#000;}
body{height: 100%;width: 100%;overflow: hidden;}
ul{list-style-type:none;}
.click{-webkit-transform-style: preserve-3d;-webkit-backface-visibility:hidden; -webkit-user-select: none;-webkit-tap-highlight-color: rgba(200,200,200,0);}
a{text-decoration:none;color:inherit;}
a:hover{text-decoration:none;}
.clearfix:after{ display: block; clear: both; content:"";visibility:hidden;height:0}
.ui-loader{display: none}
video{width: 100%;position: absolute;left: 0;top: 0;}
#output1{width: 100%;position: absolute;left: 0;top: 0%;}
#output2{width: 100%;position: absolute;left: 0;top: 0%;}
#output3{width: 100%;position: absolute;left: 0;top: 0%;}
#output4{width: 100%;position: absolute;left: 0;top: 0%;}

/* 主内容
* --------------------------------------- */
.loading-page{position: absolute;width: 100%;height: 100%;top:0;z-index: 2000;background: #efefef;text-align: center;padding-top: 60%}
.loading-page .main{background: #2f2f2f;display: inline-block;border-radius: 20px;padding: 15px;width: 240px;height: 230px;position: fixed;left: 50%;margin-left: -120px;}
.loading-page .main .icon{width: 42px;margin-top: 50px;margin-bottom: 20px	}
.loading-page .main .motion{display: none;width: 120px;}
.loading-page .main .text{color: #fff;font-size: 32px}
.loading-page .bottom-text{position: fixed;left: 0;bottom: 8%;width: 100%;text-align: center;font-size: 28px;line-height: 36px;color: #555;display: none}

p.info{position: fixed;z-index: 9999;right: 0;top:20%;background: #000;color:#fff;font-size: 32px;padding: 10px;display: none}
.main-page{position: absolute;width: 100%;top:0;background: #efefef}
.main-page .wechat-bottom{position: fixed;width: 100%;left: 0;bottom: 0;z-index: 1000;display: none}
.main-page .begin-list{position: absolute;top: 0;left: 0;width: 100%;height: 100%; text-align: center;padding: 20px 0px;}
.main-page .begin-list .join{font-size: 28px;padding: 10px 20px;margin: 10px;background: #cecece;display:inline-block;border-radius: 15px;color: #fff;opacity: 0}
.main-page .begin-list .join-end{font-size: 28px;padding: 10px 20px;line-height: 42px; margin: 10px;background: #cecece;display:inline-block;border-radius: 15px;color: #fff;opacity: 0}
.main-page .chat-list{display: none}
.main-page .chat-list .item{margin: 10px;padding:0 20px;position: relative; }
.main-page .chat-list .item .user-head{width: 72px;margin-right: 10px;position: absolute;}
.main-page .chat-list .item .user-name{font-size: 24px;margin-left: 90px;margin-bottom: 5px;color: #666;display: none}
.main-page .chat-list .item .text{font-size: 28px;background: #fff;padding:15px;border-radius: 10px;margin-left: 90px;box-shadow: 0 0 3px rgba(0,0,0,0.2)}
/*.main-page .video1{position: absolute;width: 100%;height: 100%;display: none;top: -3.3%;margin-top: -1%}*/
.main-page .video1{position: absolute;width: 100%;height: 100%;display: none;top:0%;margin-top: 0%}
.main-page .video1 .head{opacity: 1}
.main-page .video1 #pre_user_head{position: absolute;width: 9.6%;right: 2.5%;top:51%;}
.main-page .video1 #pre_npc1_head{position: absolute;width: 9.6%;left: 2.5%;top:41.6%;}
.main-page .video1 #pre_npc2_head{position: absolute;width: 9.6%;left: 2.5%;top:9%;}
.main-page .video1 #pre_npc3_head{position: absolute;width: 9.6%;left: 2.5%;top:25.2%;}
.main-page .video1 .skull-big{position: absolute;width: 10.9%;left: 55.4%;top: 60.1%;display: none}
.main-page .video1 .skull{position: absolute;width: 100%;left: 2%;top: 3%;display: none}
.main-page .video1 .skull-click{position: absolute;width: 54%;left: 32%;height: 19%;top: 51%; background: transparent;opacity: 0;}
.main-page .video1 .hand1-left{position: absolute;width: 7.7%;left: 40.8%;top: 62%;display: none;-webkit-animation:hand-left 1s infinite ease;}
.main-page .video1 .hand1-right{position: absolute;width: 7.7%;left: 73.3%;top: 62%;display: none;-webkit-animation:hand-right 1s infinite ease;}

.main-page .video1 #pre2_npc2_head{position: absolute;width: 9.6%;left: 2.5%;top:9%;}
.main-page .video1 #pre2_npc3_head{position: absolute;width: 9.6%;left: 2.5%;top:18%;}
/*.main-page .video1 #pre_user_head{position: absolute;width: 9.6%;right: 2.5%;top:54.5%;}
.main-page .video1 #pre_npc1_head{position: absolute;width: 9.6%;left: 2.5%;top:44.4%;}
.main-page .video1 #pre_npc2_head{position: absolute;width: 9.6%;left: 2.5%;top:9.7%;}
.main-page .video1 #pre_npc3_head{position: absolute;width: 9.6%;left: 2.5%;top:27%;}
.main-page .video1 .skull-big{position: absolute;width: 10.9%;left: 53.3%;top: 64.2%;display: none}
.main-page .video1 .skull{position: absolute;width: 100%;left: 0%;top: 3%;display: none}
.main-page .video1 .skull-click{position: absolute;width: 54%;left: 32%;height: 19%;top: 55%; background: transparent;opacity: 0;}
.main-page .video1 #pre2_npc2_head{position: absolute;width: 9.6%;left: 2.5%;top:9.7%;}
.main-page .video1 #pre2_npc3_head{position: absolute;width: 9.6%;left: 2.5%;top:19.1%;}*/

.main-page .video1 #battle_user_head{position: absolute;width: 9.6%;right: 35.3%;top:86%;}
.main-page .video1 #battle_npc1_head{position: absolute;width: 9.6%;left: 34.3%;top:86%;}
.main-page .video1 #battle_npc2_head{position: absolute;width: 9.6%;right: 35.3%;top:9%;}
.main-page .video1 #battle_npc3_head{position: absolute;width: 9.6%;left: 34.3%;top:9%;}
.main-page .video1 #user_mask{position: absolute;width: 10.6%;right: 34.8%;top:86%;margin-top: -0.5%}
.main-page .video1 #npc1_mask{position: absolute;width: 10.6%;left: 33.8%;top:86%;margin-top: -0.5%}
.main-page .video1 #npc2_mask{position: absolute;width: 10.6%;right: 34.8%;top:9%;margin-top: -0.5%}
.main-page .video1 #npc3_mask{position: absolute;width: 10.6%;left: 33.8%;top:9%;margin-top: -0.5%}
.main-page .video1 .green-big{position: absolute;width: 12.5%;left: 62.1%;top: 73.6%;display: none}
.main-page .video1 .green{position: absolute;width: 100%;left: 0%;top: 3%;display: none}
.main-page .video1 .green-click{position: absolute;width: 47%;left: 45%;height: 19.5%;top: 64.5%; background: transparent;opacity: 0;}
.main-page .video1 .hand2-left{position: absolute;width: 7.7%;left: 48.8%;top: 76%;display: none;-webkit-animation:hand-left 1s infinite ease;}
.main-page .video1 .hand2-right{position: absolute;width: 7.7%;left: 80.3%;top: 76%;display: none;-webkit-animation:hand-right 1s infinite ease;}

.main-page .video1 #tomb{position: absolute;width: 16%;left: 21.5%;top: 71.8%;}
.main-page .video1 #fire{position: absolute;width: 16%;left: 63.5%;top: 71.8%;}
.main-page .video1 #hand{position: absolute;width: 6.8%;left: 68%;top: 27%;-webkit-animation:hand 1s infinite ease;}
.main-page .video1 #arrow1{position: absolute;width: 12%;left: 46%;top: 54%;-webkit-animation:arrow1 1s infinite ease;}
.main-page .video1 #hand-circle{position: absolute;width: 30.5%;left: 58%;top: 36%;}
.main-page .video1 #hand-circle.circle{-webkit-animation:circle 10s infinite linear;-webkit-transform:scale(1.1,1.1)}
.main-page .video1 #hand-text{position: absolute;width: 17.7%;left: 64.5%;top: 42.5%;pointer-events: none}

.main-page .video1 #wind{position: absolute;width: 16%;left: 21%;top:67.3%;}
.main-page .video1 #tree{position: absolute;width: 16%;left: 63.5%;top:67.3%;}
.main-page .video1 #hand2{position: absolute;width: 6.8%;left: 21%;top: 34%;-webkit-animation:hand 1s infinite ease;}
.main-page .video1 #hand-circle2{position: absolute;width: 30.5%;left: 9.8%;top: 43%;}
.main-page .video1 #hand-circle2.circle{-webkit-animation:circle 10s infinite linear;-webkit-transform:scale(1.1,1.1)}
.main-page .video1 #hand-text2{position: absolute;width: 17.7%;left: 16.5%;top: 49.5%;pointer-events: none}

.main-page .video1 #basket{position: absolute;width: 16%;left: 21.5%;top: 65.8%;}
.main-page .video1 #worker{position: absolute;width: 16%;left: 64%;top: 65.8%;}
.main-page .video1 #hand3{position: absolute;width: 6.8%;left: 18%;top: 10.5%;-webkit-animation:hand 1s infinite ease;}
.main-page .video1 #hand-circle3{position: absolute;width: 30.5%;left: 6%;top: 19.5%;}
.main-page .video1 #hand-circle3.circle{-webkit-animation:circle 10s infinite linear;-webkit-transform:scale(1.1,1.1)}
.main-page .video1 #hand-text3{position: absolute;width: 17.7%;left: 12.7%;top: 26%;pointer-events: none}

.main-page .video1 .hand3-left{position: absolute;width: 7.7%;left: 49.8%;top: 69%;display: none;-webkit-animation:hand-left 1s infinite ease;}
.main-page .video1 .hand3-right{position: absolute;width: 7.7%;left: 79.3%;top: 69%;display: none;-webkit-animation:hand-right 1s infinite ease;}
.main-page .video1 .rocket-click{position: absolute;width: 47%;left: 45%;height: 21%;top: 57%; background: transparent;opacity: 0;}

.main-page .video1 #end_user_head1{position: absolute;width: 9.6%;right: 2.5%;top:68.5%;}
.main-page .video1 #end_user_head2{position: absolute;width: 9.6%;right: 2.5%;top:80.9%;}
.main-page .video1 #end_npc1_head{position: absolute;width: 9.6%;left: 2.5%;top:68.5%;}
.main-page .video1 #end_npc2_head1{position: absolute;width: 9.6%;left: 2.5%;top:44.9%;}
.main-page .video1 #end_npc2_head2{position: absolute;width: 9.6%;left: 2.5%;top:31.2%;}
.main-page .video1 #end_npc3_head1{position: absolute;width: 9.6%;left: 2.5%;top:8.6%;}
.main-page .video1 #end_npc3_head2{position: absolute;width: 9.6%;left: 2.5%;top:21.2%;}

.main-page .video1 .end-bottom{position: absolute;width:100%;left: 0%;bottom: 0%}
.main-page .video1 .btn-reset{position: absolute;width: 36.4%;left: 9%;bottom: 5.5%}
.main-page .video1 .btn-link{position: absolute;width: 36.4%;right: 9%;bottom: 5.5%}
.main-page .video1 .shine{position: absolute;width: 44%;left: 28%;bottom: 14.8%;-webkit-animation:circle 5s infinite linear;}
.main-page .video1 .logo{position: absolute;width: 38%;left: 31%;bottom: 22.8%}

.main-page .video1 .red-label{position: absolute;width: 8.26%;left: 17%;top: 23.8%}
.main-page .video1 .blue-label{position: absolute;width: 8.26%;left: 17%;top: 53.3%}
.main-page .video1 .red-text{position: absolute;width: 53%;left: 28%;top: 22.6%}
.main-page .video1 .blue-text{position: absolute;width: 53%;left: 28%;top: 49.8%}

.main-page .video1 .red-name{position: absolute;width: 100%;text-align: center;padding-left:10%; left: 0;top: 25%;font-size: 32px;color:#fff;text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0,0px 3px 1px #000;font-family: SimHei}

.main-page .video1 .blue-name{position: absolute;width: 100%;text-align: center;padding-left:10%;left: 0;top: 54.5%;font-size: 32px;color:#fff;text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0,0px 3px 1px #000;font-family: SimHei}

@media all and (orientation : landscape) { 
body{height: 100%;width: 750px;overflow: hidden;position: relative;}
/*.mask{position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0,0,0,0.9);z-index: 9999}
.mask img{width: 120px}
.mask .text{position: fixed;width: 100%;font-size: 32px;color: #fff;text-align: center;top: 38%}*/

} 



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

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

@-webkit-keyframes hand-left{
0%{ margin-left:-1%; }
50%{ margin-left:3%; }
100%{ margin-left:-1%; }
}

@-webkit-keyframes finger{
0%{ opacity:0;left: 31%;top:78%; }
5%{ opacity:1;left: 31%;top:78%; }
45%{ opacity:1;left: 72%;top:45%;}
47%{ opacity:0;left: 72%;top:45%;}
50%{ opacity:0;left: 72%;top:78%; }
55%{ opacity:1;left: 72%;top:78%; }
95%{ opacity:1;left: 72%;top:45%;}
97%{ opacity:0;left: 72%;top:45%;}
100%{ opacity:0;left: 72%;top:45%;}
}


@-webkit-keyframes hand-right{
0%{ margin-left:1%; }
50%{ margin-left:-3%; }
100%{ margin-left:1%; }
}

@-webkit-keyframes shake{
0%{ transform:rotate(-6deg); }
10%{ transform:rotate(6deg); }
20%{ transform:rotate(-6deg); }
30%{ transform:rotate(6deg);}
35%{ transform:rotate(0deg); }
100%{ transform:rotate(0deg); }
}

@-webkit-keyframes shake2{
0%{ transform:rotate(-6deg) scale(1.2,1.2) }
10%{ transform:rotate(6deg) scale(1.2,1.2) }
20%{ transform:rotate(-6deg) scale(1.2,1.2) }
30%{ transform:rotate(6deg) scale(1.2,1.2)}
35%{ transform:rotate(0deg) scale(1.2,1.2) }
100%{ transform:rotate(0deg) scale(1.2,1.2) }
}

@-webkit-keyframes hand{
0%{ margin-top:-1%; }
35%{ margin-top:1%; }
100%{ margin-top:-1%; }
}