@charset "utf-8";
/* reset 网页样式重置*/
html { font-size:1em;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow: hidden; -webkit-tap-highlight:rgba(0,0,0,0);-webkit-text-size-adjust:none;overflow:-moz-scrollbars-vertical;/*强制firefox出现滑动条*/}
body { font-size:0.85em;overflow: hidden;}
label { cursor:pointer;}
a:link, a:visited { text-decoration:none;}
input:focus { outline: none; }
input,button,select,textarea{outline:none;/*-webkit-appearance:none;*//*强制去除表单自带的样式*/ }
textarea{resize:none;/*-webkit-appearance:none;*//*强制去除textarea自带的样式*/ }

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } /*利用阴影来填充掉input自动填充色*/

textarea,input,select { background: none; border:none; margin: 0; padding: 0; }

a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, menu, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul, var { margin:0; padding:0; -webkit-font-smoothing:antialiased;}

article, aside, footer, header, hgroup, nav, section, figure, figcaption { display: block;} /*html5设置*/

h1, h2, h3, h4, h5, h6, th, td, table, input, button, select, textarea, sub{ font-size:1.5em;}
body, input, button, select, textarea, sub{ font-family:Arial, sans-serif;}
em, cite, address, optgroup { font-style:normal;}
kbd, samp, code { font-family:monospace;}

img, input, button, select, textarea { vertical-align:middle;outline:none;}
ul, ol { list-style:none;}
img, fieldset { border:0;}
abbr, acronym { cursor:help; border-bottom:1px dotted black;}
table {	width:100%; border-spacing:0; border:0;}
table th, table td { border:0;}
legend, hr { overflow:hidden; position:absolute; top:0; left:0;}
legend, hr, caption { visibility:hidden; font-size:0; width:0; height:0; line-height:0;}

input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}

input[type="radio"],input[type="radio"]:checked,input[type="checkbox"],input[type="checkbox"]:checked{
	-webkit-appearance:button;
	        appearance:button;
	border:none; 
	vertical-align:text-bottom; 
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAANCAYAAADi+J2zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbFJREFUeNpi3LRpEwMSYAPiDCCOBGIdqNgVIF4OxDOA+BdMYcs/Y7L0nfSXYti2bdt/BhKAl5cXo+6GFyTpYUFiSwPxFiA2QFNjAcWJQOwDxE/R5MnVx0ikG0nyEAwwIYU4NschA5DcViBmR4spcvTRHMA8lk7AcTCgD8SpSHxy9VEd6AmyMmx2EcHwWBSaunNISekcmlw0EptcfVQFUlzMDBPNBRn6rnzG8JgRmtpMUD6H4kw0OUMkNrn6yE9iaDmTh5WRYYqFIMO8218Z9r/4ieGxIQO2uogyuElzgNnMQE9OMBNkOPf2F8Piu1+xloqwJAQD04A4C1oiTUMz+zyWpEeqPrJB/sn3DNOtBBl4WBgZtARYGX79+8/QdukTzuJ+GZoDjaHJCRtYisQmVx/Z4NanPwxJR94xTAbmqc+//zOkH3/H8O8/7lJxFhBfJMLcS0A8G4lPrj6KwMMvfxn89r5hiD70luHL7/94i3tQrvMG4gt4zAPJeUHVMlCoj271GAO0ZWAOSsZAfAKIv0DxCaiYOZbWAyX6/hOJyQKMaG1FogFaW5FoAGor0gMABBgAP8aVC/KZ6v0AAAAASUVORK5CYII="); background-repeat:no-repeat; 
	background-size:54px 13px; 
	background-color:transparent; 
	width:14px; 
	height:13px; 
	margin-right:4px; 
	outline:none}
input[type="radio"] {background-position:0 0;}
input[type="radio"]:checked {background-position:-14px 0;}
input[type="checkbox"] {background-position:-29px 0;}
input[type="checkbox"]:checked {background-position:-42px 0;}

button, 
input, 
select, 
textarea {margin: 0;font: inherit;color: inherit; background-color:#FAFAFA; border: #dcdcdc 1px solid;border-radius: 5px;}
input:focus,
select:focus,
textarea:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}

/* global 统一样式 */
html { height: 100%; }
body { position: relative; font-family:"Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight:normal; height: 100%; width: 100%; }
body { margin: 0; padding: 0;}

#run {
    position: absolute; 
    left: 0;
    top: 0;
    width: 100%;
    z-index: 209;
    display: none
}

.go_btn {
    position: absolute;
    right:0;
    bottom:50px;
    width: 100px;
    height: 100px;
    background-image: url(../img/go.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2; 
    display: none
}

.game_loading {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: #000;
   z-index: 100;
}
.game_loading p {
   position: absolute;
   left: 50%;
   top: 50%;
   color:#fff;
   transform: translate(-50%,-50%);
   font-size:24px;
}
.start_page {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-image: url(../img/start_bg.jpg);
   background-size: cover;
   background-position: top center;
   z-index: 100;
   display: none;
}
.start_page .title {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 80%;
    margin-left: -40%;
}
.start_page .start_btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    margin-left: -15%;
    -webkit-animation: buzz-out .75s linear infinite;
    animation: buzz-out .75s linear infinite;
}
@-webkit-keyframes buzz-out {
    0% {
      -webkit-transform: translateX(3px) rotate(2deg);
    }
    100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
    }
}
@keyframes buzz-out {
    0% {
      transform: translateX(3px) rotate(2deg);
    }
    100% {
      transform: translateX(-3px) rotate(-2deg);
    }
}
.container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 300;
}

.canvasElement {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index:99;
    display: none;
}
.error_btn {
  position: absolute;
  width: 292px;
  top: 10%;
  margin-left: -146px;
  left: 50%;
  background-image: url(../img/choose1.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  height: 168px;
}
.right_btn {
  position: absolute;
  width: 284px;
  top: 60%;
  margin-left: -142px;
  left: 50%;
  background-image: url(../img/choose2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  height: 166px;
}
.gameover {
  position: absolute;
  width: 90%;
  top:20%;
  left: 50%;
  margin-left: -45%;
  display: none;
}
.play_again {
  position: absolute;
  width:100px;
  left:50%;
  top:70%;
  margin-left: -50px;
  display: none
}
.mask {
  position: absolute;
  z-index: 12;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0);
}
.loading {
  background-color: #0f234c;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.load_1, .load_2, .load_3, .loading .txt {
  left: 50%;
  position: absolute;
}
.load_1 {
  width: 82%;
  margin-left: -41%;
  top: 24%;
}
.load_2 {
  width: 50px;
  margin-left: -25px;
  animation: rota_o 1s ease infinite;
  top: 75%;
}
.load_3 {
  width: 30%;
  margin-left: -15%;
  top: 32%;
}
.myVideo_play_box {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 200;
  background-image: url(../img/daoshi_bg.jpg);
  background-size: cover;
  background-position: 0;
  display: none;
}
.mask #videoPlay, .myVideo_play_box #androidPlay {
  right: 10px;
  bottom: 10px;
  background-image: url(../i/play.png);
  background-size: contain;
  position: absolute;
  width: 50px;
  height: 50px;
}
.selBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../img/selbg1.jpg) 50% 50%/cover no-repeat;
  display: none;
}
.selBox .tit {
  width: 60%;
  transform: translateX(-50%);
  top: 7%;
  left: 50%;
  position: absolute;
  display: block;
}
.selBox .selItem{
  width: 274px;
    height: 189px;
    position: absolute;
    left: 50%;
    margin-left: -137px;
    background-image: url(../img/selbg.png);
    background-size: 109%;
    background-position: center
}
.sel1 {
  top: 15%;
}
.sel2{
  top: 42.4%;
}
.sel3 {
  top: 70%;
}
.txt {
  position: absolute;
  bottom: 18%;
  left: 50%;
}
.txt1 {
  width: 42%;
  margin-left: -21%;
}
.txt2 {
  width: 46%;
  margin-left: -23%;
}
.txt3 {
  width: 40%;
  margin-left: -20%;
}
.selItem .bg{
    width: 62%;
    position: absolute;
    top: 21%;
    left: 50%;
    margin-left: -31%;
}
.xm {
  display: none;
  position: absolute;
  width: 20%;
  right: 0;
  bottom: 0;
}
.endBox {
  background: url(../i/endBg.jpg) 50% 50%/cover no-repeat;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  position: absolute;
}
.endBox .i1, .endBox .i2 {
  position: absolute;
    width: 29%;
    left: 50%;
    top: 75%;
    filter: brightness(.1);
}
.endBox .i1 {
  transform: translateX(-123%);
}
.endBox .i2 {
  transform: translateX(31%);
}
.endBox .i3 {
  position: absolute;
  width: 60%;
  left: 50%;
  top: 20%;
  margin-left: -30%;
}
.endBox .sharePop {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  position: absolute;
}
.endBox .sharePop {
  background: url(../i/icon.png) top right no-repeat rgba(0,0,0,.8);
  background-size: 20%;
}
.xBox {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: none;
}
.xBox img {
  width: 20px;
  display: block;
  opacity: .8;
}
.xGame {
  position: absolute;
  top: 3%;
  right: 4%;
  z-index: 400;
  display: none;
}
.xGame img {
  width: 20px;
  display: block;
  opacity: 1;
}
.logo {
  display: none;
  width: 130px;
  position: absolute;
  z-index: 100;
  left:10px;
  top:10px
}
.logo img {
  width: 100%;
}
.videoBox {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 1
}
.game_play {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
}
.jiantou {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
}
.jiantou img {
   position: absolute;
   top:15%;
   left:50%;
   width: 70%;;
   margin-left: -35%;
   -webkit-animation: twinkling 2s infinite ease-in-out
}
@-webkit-keyframes twinkling{
  0%{
      transform: scale(1);
  }
  100%{
    transform: scale(1.2);
  }
  }
  @keyframes twinkling{
    0%{
      transform: scale(1);
  }
  100%{
    transform: scale(1.2);
  }
  }

  /* ipad适配 */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
		
    .error_btn {
      position: absolute;
      width: 492px;
      top: 10%;
      margin-left: -246px;
      left: 50%;
      background-image: url(../img/choose1.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: top center;
      height: 296px;
  }
  .right_btn {
    position: absolute;
    width: 492px;
    top: 60%;
    margin-left: -246px;
    left: 50%;
    background-image: url(../img/choose2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    height: 296px;
}
.selBox .tit {
  width: 44%;
}
.selBox .selItem {
  width: 474px;
  height: 325px;
  position: absolute;
  left: 50%;
  margin-left: -237px;
  background-image: url(../img/selbg.png);
  background-size: 109%;
  background-position: center;
}
}
/* 电脑适配 */
@media only screen and (min-device-width : 1025px) {
    
    body{
      /* margin:0 auto;
      max-width: 640px; */
      background-color: #000;
    }
    .container{
      margin:0 auto;
      max-width: 640px;
      position: relative;
    }
    .error_btn {
      position: absolute;
      width: 492px;
      top: 10%;
      margin-left: -246px;
      left: 50%;
      background-image: url(../img/choose1.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: top center;
      height: 296px;
  }
  .right_btn {
    position: absolute;
    width: 492px;
    top: 60%;
    margin-left: -246px;
    left: 50%;
    background-image: url(../img/choose2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    height: 296px;
}
.selBox .tit {
  width: 44%;
}
.selBox .selItem {
  width: 474px;
  height: 325px;
  position: absolute;
  left: 50%;
  margin-left: -237px;
  background-image: url(../img/selbg.png);
  background-size: 109%;
  background-position: center;
}

}


.current-quality {
  display: flex;
  height: auto!important;
  width: auto !important;
  align-items: center;
  justify-content: center;
  /* width: 70px; */
  cursor: pointer;
  border: 1px solid #fff;
  padding: 0px 4px;
  margin-top: 12px;
  margin-right: 10px;
  font-size: 12px;
}

.current-rate {
  display: flex;
  height: auto!important;
  width: auto !important;
  align-items: center;
  justify-content: center;
  /* width: 70px; */
  cursor: pointer;
  border: 1px solid #fff;
  padding: 0px 4px;
  margin-top: 10px;
  margin-right: 10px;
  font-size: 12px;
}
.qinang {
  position: absolute;
  top: 20%;
  right: 5%;
  width: 45%;
  display: none;
}
.qinang_btn {
  position: absolute;
  top: 46%;
  right: 17%;
  width: 29%;
  display: none;
}
.success_page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/success_bg.jpg);
  background-size: cover;
  background-position: top center;
  display: none
}
.success_page .success_avatar {
  position: absolute;
  top: 36%;
  left: 50%;
  width: 72%;
  margin-left: -36%;
}
.success_page .play_again2 {
  position: absolute;
  bottom:5%;
  left:10%;
  width: 30%;
}
.success_page .continue_play {
  position: absolute;
  bottom:5%;
  right:10%;
  width: 30%;
}
.switch_video {
  position: absolute;
  color:#fff;
  font-size: 16px;
  left:5%;
  bottom:10%;
  padding:2px;
  border: 1px solid #fff;
  border-radius: 10%;
  z-index: 11;
  width:20%;
  text-align: center;
  display: none;
}
.myVideo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: none;
}
#myVideo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1
}
.loading_txt {
  position: absolute;
  text-align: center;
  color: #fff;
  bottom:10%;
  font-size: 14px;
  left: 50%;
  transform: translateX(-50%);
}
.belt {
  position: absolute;
  width: 94%;
  left: 50%;
  margin-left: -47%;
  top: 0%
}
.lhglogo {
  position: absolute;
  left: 20px;
  top: 30px;
  width: 100px;
}
.daoshi_title {
  position: absolute;
  width: 90%;
  top: 20%;
  left: 50%;
  margin-left: -45%
}
@media only screen and (min-device-width : 900px) {
  .daoshi_title {
      position: absolute;
      width: 50%;
      top: 15%;
      left: 50%;
      margin-left: -25%
    }
  }
.tiaozhan {
  position: absolute;
  width: 40%;
  left: 50%;
  top: 17%;
  margin-left: -15%;
  -webkit-animation:mymove 5s infinite;
}
@keyframes mymove
            {
                0%{
                transform: scale(1);  /*开始为原始大小*/
                }
                25%{
                    transform: scale(1.1); /*放大1.1倍*/
                }
                50%{
                    transform: scale(1);
                }
                75%{
                    transform: scale(1.1);
                }

            }
            
            @-webkit-keyframes mymove /*Safari and Chrome*/
            {
                0%{
                transform: scale(1);  /*开始为原始大小*/
                }
                25%{
                    transform: scale(1.1); /*放大1.1倍*/
                }
                50%{
                    transform: scale(1);
                }
                75%{
                    transform: scale(1.1);
                }
            }

.start_page .no_play {
  position: absolute;
  left: 50%;
  top: 70%;
  width: 30%;
  margin-left: -15%;

}