@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;list-style:none;}
html{font-size:50px;}
body{font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;color:#666;line-height:100%;-webkit-text-size-adjust:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color:#fff;}
h1,h2,h3,h4,h5,h6{font-weight:500;}
abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video{display:block;/*width:100%*/}
em,address,i{font-style:normal}
a{color:#666;text-decoration:none;cursor: pointer;}
a img{border:none;}
img{vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0; width:100%;}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height:0; height:0}
input:focus,
textarea:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only;
    outline: none;
}
input::-webkit-input-placeholder{color: #b6b6b6;}
input:-moz-placeholder{color: #b6b6b6;}
input::-moz-placeholder{color: #b6b6b6;}
input:-ms-input-placeholder{color: #b6b6b6;} 


html,body{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;    
}
body{
    width: 100%;
    margin:0 auto;
    font-size: .24rem;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
}

img{max-width: 100%;}


/* flex布局 */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-align-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
.flex-pack-end{
  -webkit-box-pack:end;
  -webkit-justify-content:flex-end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.flex-wrap{
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
}

.flex-start{
   align-content: flex-start;
   -webkit-align-content: flex-start;
}

.space-around{
  -webkit-justify-content:space-around;
  justify-content:space-around;
}


.aLeft{
     display: block;
     width: 0.4rem;
     height: 0.4rem;
     position: absolute;
     left: 0.3rem;
     top: calc(50% - 0.2rem);
}
 .aLeft:before{
     content: '';
     display: block;
     width: 0.4rem;
     height: 0.4rem;
     border-left: 0.06666666666666667rem solid #d32f11;
     border-top: 0.06666666666666667rem solid #d32f11;
     transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     position: absolute;
     left: calc(50% - 0.2rem);
     top: calc(50% - 0.2rem);
}
 a.aLeft.disClick:before {
     border-left: 0.06666666666666667rem solid #e7c885;
     border-top: 0.06666666666666667rem solid #e7c885;
}
 .aRight{
     display: block;
     width: 0.4rem;
     height: 0.4rem;
     position: absolute;
     right: 0.3rem;
     top: calc(50% - 0.2rem);
}
 .aRight:before{
     content: '';
     display: block;
     width: 0.4rem;
     height: 0.4rem;
     border-left: 0.06666666666666667rem solid #d32f11;
     border-top: 0.06666666666666667rem solid #d32f11;
     transform: rotate(-225deg);
     -webkit-transform: rotate(-225deg);
     position: absolute;
     left: calc(50% - 0.2rem);
     top: calc(50% - 0.2rem);
}
 a.aRight.disClick:before {
     border-left: 0.06666666666666667rem solid #e7c885;
     border-top: 0.06666666666666667rem solid #e7c885;
}


/* 竖屏引导层 */
.portrait{
  position:fixed;
  background-color:rgba(0,0,0,0.8);
  left:0;top:0;
  width:100%;
  height:100%;
  z-index:9999;
  /*display: none;*/
}

.lock{background-color:#000000;color:#FFFFFF;z-index:8000;font-size:9px;}
.lock-bg
  {
/*  width:134px;
  height:216px;*/
  width: 1.3333333333333333rem;
  height: 2.1466666666666665rem; 
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAADZBAMAAAD4TT6+AAAAA3NCSVQICAjb4U/gAAAAMFBMVEX///////////////////////////////////////////////////////////////9Or7hAAAAAEHRSTlMAESIzRFVmd4iZqrvM3e7/dpUBFQAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAANsSURBVGiB7du9bxMxFADwl36FjyAigWBBKBILA19/AQn/AM2MhJIRsQDqCBKFATEgwdqpZWFCKkxMKMCEWFoYyxC+xNiWQqGlSczZvst92M757AcS0nvbXa4/3dnnu+d3NQDAhS5zjcFKE0RcdCZ49IWyy8tgbIsj9z0RNgsw6WuwTYB93kgfoOWNsCYs+iML0PVHlsHfYOtm5GsVUnFozQE5A5moF0d+Zw3YUxzZUhDj+PjLZ4LSJji9Yx+E/AeIcnfaxn5CCCGEEEIIIYQQQgghxIyMX3q8ylbf3FGmcvbI2OVoxjZ4VHNEpjosjp2mE3I4PXEcXHNAytnJ5+BqYWSiy7LRbxRESvOKwdh2tRhyIvrD93N3555HG68KIRNhg7w+JzYP3gubRbmgUUhLNsLt4Y7jsol+FkCmpNFO7pJKO3PkCKSl6VLZ5ZvWyIS2FWVbN2yRU3yXWskRRcpPlkhpie9Sx4qoUvbS94oR2c33fFEMgPP8hwd2yLTm2kWIu+eHHbKk6QUZvNd6VkiZ75jVIqJIlup5E3I02N7RGgCd4LePNshNtSOHcTr47ZcFUlrLnnIi+KUOkp1sQPi46RsMENXbdj6yVzdYh3El+PVJPsIv+4MR4a2+kY+MiqjEv+2DRHXQFz5IWFof1LyQI+Lo7/EOF0Q+Jdp+CJxMNasjMr6WbFbXJOdsslldkclkszqnW602AlJObRkR03NAFyZkSv98LYbUNa+cokipyz57I5VggBnTVltkPth854mI1KSnJmeFkLrYfumFBM3KQ/24UwSphA/ABR9kPkTUFKcAgvTKQHl5obxGUV7oIrXYAH3YphY4SQ5KuoWS+OGkoCjJsByEhrS8b5mWo0wQcKYqKJMmnOkbykQSZ0qLMrnGmeajFBxwSh9qEeaW7qD8ctBSwnAsBwGMXR8Wpp7V9If8oxKZRRBCCCGEEEIIIYQQQggh3kEIIb2Z2rEbnohciZKzmiUPeSpu7lLHB4mKu8b/17dB3oZIWDB2QxrRaJ12R+LqXmXUYaORuOBZdkfi70Hj7khcli25I+vxc9Ad+YZxJihtgtI7KPcJyh2LM3ZQRjF7KE9kMQfJFvbSYflk644+oDdTPZD3jF3GWXHW8keaOKvwUNYDoqxMlJ8uPEJ+3MdYrem1bpStcOMPBjyIsXDFjwMAAAAASUVORK5CYII=") 0 0 no-repeat;
  -webkit-background-size:1.3333333333333333rem auto;
  background-size:1.3333333333333333rem auto;
  -webkit-animation:lock 3s infinite 1.5s linear;
  animation:lock 3s infinite 1.5s linear;
  -webkit-transform:rotate(90deg);transform:rotate(90deg)
}
@-webkit-keyframes lock{
  0%{-webkit-transform:rotate(90deg)}
  20%{-webkit-transform:translate(0)}
  80%{-webkit-transform:translate(0)}
  100%{-webkit-transform:translate(90deg)}
}
@keyframes lock{
  0%{transform:rotate(90deg)}
  20%{transform:translate(0)}
  80%{transform:translate(0)}
  100%{transform:translate(90deg)}
}
@media screen and (orientation:portrait){
  .portrait.lock{display:none!important}
}
.lock-txt{
    margin-top: .6rem;
    font-size: .32rem;    
}

/*弹窗*/
#screen{display:none;position:fixed;top:0;left:0;z-index:998;width:100%;height:100%;background-color:rgba(0,0,0,.7);}

.pop{
     display:none;
     position: fixed;
     top:50%;
     left: 50%;
     z-index:999;
     width: 7.546666666666667rem;
     height: 11rem;
     background: url(../images/bg_pop.png?v=2.5) no-repeat;
     background-size: 100% 100%;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
     margin: -5.5rem 0 0 -3.7733333333333334rem;
/*     -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);*/
}

.popCon{
     width: 6.506666666666667rem;
     height: 7.2rem;
     margin: .0666666666666666rem auto .2rem;
}

.pop_index{
     width: 6.506666666666667rem;
     height: 7.2rem;
     background: url(../images/pop_index.png?v=2.5) no-repeat;
     background-size: 100% 100%;
}

#pop_text{
     width: 6.506666666666667rem;
     height: 7.2rem;
     position: relative;
     box-sizing: border-box;
     padding: .4rem 0 0 0;
}

.pop_text{
    width: 6.506666666666667rem;
    height: 7.2rem;
    font-size: .4rem;
    color: #fff;
    line-height: 1.6;
    text-indent: 2em;     
    display: none;
}

.pop_text1{
    /*font-size: .4rem;*/
}

.pop_text1_p2{
    text-indent: 0;
    margin: .2rem 0 0 0;
}

.pop_text1_p2 img{
    width: .8rem;
    margin: 0 .2rem 0 .1rem;
}


/*.pop_text1{
     background: url(../images/pop_text1.png?v=2.5) no-repeat;
     background-size: 100% 100%;
}

.pop_text2{
     background: url(../images/pop_text1.png?v=2.5) no-repeat;
     background-size: 100% 100%;
}

.pop_text3{
     background: url(../images/pop_text1.png?v=2.5) no-repeat;
     background-size: 100% 100%;
}
*/
/*#pop_text:after{
    content: '';
    display: block;
    text-indent: 2em;
    color: #fff;
    font-size: .32rem;
    line-height: 1.5;
}

*/

.popBtn{
     width: 3.8933333333333335rem;
     height: 1.7333333333333334rem;
     /*margin: .6rem auto 0;*/
     margin: 1.4rem auto 0;
}
.popBtn a{
     display: block;
     width: 3.8933333333333335rem;
     height: 1.7333333333333334rem;
}

#popIndex .popBtn{
     margin: 0 auto 0;
}


.aPopIndex{
     background: url(../images/index_popBtn.png?v=2.5) no-repeat;
     background-size: 100% 100%;
}

.aPopContinue{
     background: url(../images/continue_popBtn.png?v=2.5) no-repeat;
     background-size: 100% 100%;
}

 .popBtn a.aEnd{
     background: url(../images/end_popBtn.png?v=2.5) no-repeat;
     background-size: 100% 100%;
     display: none;
}



.pop2{
     display:none;
     position: fixed;
     top:50%;
     left: 50%;
     z-index:999;
     width: 10rem;
     height: 6.666666666666667rem;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
     margin: -3.3333333333333335rem 0 0 -5rem;
}

.overTime{
     width: 6.133333333333334rem;
     height: 4.533333333333333rem;
     background: url(../images/overtime.png?v=2.5) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto;
     box-sizing: border-box;
     padding: .5rem 0 0 0;
}

.clock{
     width: 1.5466666666666666rem;
     height: 1.8rem;
     background: url(../images/clock.png?v=2.5) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-name: headShake2;
     animation-name: headShake2;
     -webkit-animation-duration: .8s;
     animation-duration: .8s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
     -webkit-transform-origin: center top;
     transform-origin: center top;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    -webkit-transform-origin:center center;  
    transform-origin:center center;     
}


@-webkit-keyframes headShake2 {
  0% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg)
  }

  100% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}

@keyframes headShake2 {
  0% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  100% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}

 .popBtn2{
     width: 6.8rem;
     height: 1.3333333333333333rem;
     margin: 0.37333333333333335rem auto 0;
}
 .popBtn2 a{
     width: 3.3333333333333335rem;
     height: 1.3333333333333333rem;
}

.aAgain{
     background: url(../images/aAgain.png) no-repeat;
     background-size: 100% 100%;
}

 .aShare{
     background: url(../images/aShare.png) no-repeat;
     background-size: 100% 100%;
}

/**/

.popActivity{
     display:none;
     position: fixed;
     top:50%;
     left: 50%;
     z-index:999;
     width: 8.653333333333334rem;
     height: 10.946666666666667rem;
     background: url(../images/popActivity.png?v=2.5) no-repeat;
     background-size: 100% 100%;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
     -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
}

.popActivity .popClose{
     display: block;
     width: 0.76rem;
     height: 1rem;
     background: url(../images/popClose.png?v=2.5) no-repeat;
     background-size: 100% 100%;
     position: absolute;
     right: .55rem;
     top: -.9rem;
     z-index: 10;
}

.actWrp{
     width: 5.733333333333333rem;
     height: 8.8rem;
     margin: 1.4666666666666667rem auto 0;
     position: relative;
}

.actWrp .imgswitInd{
    width: 5.733333333333333rem;
    height: auto;
    position: absolute;
    left: 0;
    bottom: .6rem;
}

.actWrp .imgswitInd dl{}
.actWrp .imgswitInd dl a{
     width: 0.18666666666666668rem;
     height: 0.18666666666666668rem;
     border-radius: 0.09333333333333334rem;
     box-sizing: border-box;
     border: 1px solid #bd342a;
     margin: 0 .13rem;
}
.actWrp .imgswitInd dl a.active{
     width: 0.18666666666666668rem;
     height: 0.18666666666666668rem;
     border-radius: 0.09333333333333334rem;
     box-sizing: border-box;
     border: 1px solid #bd342a;
     background: #bd342a;
}


.actCon{
    width: 5.733333333333333rem;
    height: 8.8rem;
    overflow: hidden;
}

.actCon ul{
    width: auto;
    height: 8.8rem; 
}

.actCon ul:after{
    content: '';
    display: block;
    clear: both;
}

.actCon ul li.actLi{
    width: 5.733333333333333rem;
    height: 8.8rem;
    color: #000;
    float: left;
}

.actLi h2{
    width: 100%;
    text-align: center;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.45rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.actLi h2:after{
    content: '';
    display: block;
    width: 40%;
    height: 0.05rem;
    background: #bb3529;
    position: absolute;
    left: 30%;
    bottom: 0; 
}

.cRed{
    color: #bb3529 !important;
}


.actLi article{
     /*font-size: 0.38rem;*/
     font-size: .35rem;
     line-height: 1.6;
     width: 100%;
     height: 5.1rem;
     margin: .5rem auto .2rem;
     overflow: hidden;
     text-overflow: ellipsis;
}

.aDetail{
     display: block;
     width: 2.8rem;
     height: 0.8rem;
     line-height: 0.8rem;
     background: #ba362a;
     border-radius: 0.4rem;
     border: 0.04rem solid #f5d368;
     font-size: .4rem;
     color: #fff;
     text-align: center;
     margin: 0 auto;
}

.actLi_btn{}

.actLi_btn .aDetail{
    /*display: block;*/
    width: 2.5rem;
    height: 0.7rem;
    line-height: 0.7rem;
    background: #ba362a;
    border-radius: 0.35rem;
    border: 0.04rem solid #f5d368;
    font-size: .35rem;
    color: #fff;
    text-align: center;
    margin: 0 auto;    
}


/**/

.popShare{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
}

.shareWrp{
     width: 8rem;
     height: 8.333333333333334rem;
     position: absolute;
     right: 0;
     top: 1.2666666666666666rem;
}

.shareBg{
     width: 8rem;
     height: 7.533333333333333rem;
     background: url(../images/bgShare.png?v=2.5);
     background-size: 100% 100%;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 2;
}


.aAgain2{
    display: block;
    width: 3.3333333333333335rem;
    height: 1.3333333333333333rem;
    background: url(../images/aAgain.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    bottom: -.1rem;
}



/**/
 .btmBar{
     width: 100%;
     height: 1.4666666666666666rem;
     position: fixed;
     left: 0;
     bottom: 0;
     z-index: 920;
     display: none;
     box-sizing: border-box;
     padding: 0.05333333333333334rem 0 0 0;
}
 .btmBarWrp{
     width: 100%;
     height: 1.4666666666666666rem;
}

 .btmBarBtn{
     width: 100%;
     height: 1.4666666666666666rem;
     box-sizing: border-box;
     padding: 0 .5rem;
}
 .btmBarBtn a.aActivity{
     display: block;
     width: 4.013333333333334rem;
     height: 1.0933333333333333rem;
     background: url(../images/btnList.png?v=2.5?v=3.9) no-repeat;
     background-size: 100% 100%;
}

 .btmBarBtn a.aDiy{
     display: block;
     width: 4.013333333333334rem;
     height: 1.0933333333333333rem;
     background: url(../images/btmDiy.png?v=2.5?v=3.9) no-repeat;
     background-size: 100% 100%;
}


/**/
.header{
     width: 100%;
     height: 1.6rem;
     position: fixed; 
     /*position: absolute;*/
     left: 0;
     top: 0.15rem;
     z-index: 9900;
     box-sizing: border-box;
     padding: 0 0.4rem;
}

.logoWrp{
    flex: 1;
}

 .logo{
     width: 2.933333333333333rem;
     height: 1.066666666666667rem;
     background: url(../images/logo.png?v=2.5?v=3.9) no-repeat;
     background-size: 100% 100%;
}

 .logo2{
     width: 2.933333333333333rem;
     height: 1.066666666666667rem;
     background: url(../images/logo2.png?v=2.5?v=3.9) no-repeat;
     background-size: 100% 100%;
}

.music{
     display: block;
     width: 0.6666666666666666rem;
     height: 0.6666666666666666rem;
     background: url(../images/music.png?v=2.5?v=3.9) no-repeat;
     background-size: 100% 100%;
     cursor: pointer;
     display: none;
}

.musicOn{
     animation:musicRotate 2s linear infinite;
     -webkit-animation:musicRotate 2s linear infinite;   
}

@keyframes musicRotate
{
  from {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);   /* IE 9 */
    -moz-transform:rotate(0deg);  /* Firefox */
    -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
    -o-transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);   /* IE 9 */
    -moz-transform:rotate(360deg);  /* Firefox */
    -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
    -o-transform:rotate(360deg);    
  }
}

@-webkit-keyframes musicRotate /*Safari and Chrome*/
{
  from {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);   /* IE 9 */
    -moz-transform:rotate(0deg);  /* Firefox */
    -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
    -o-transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);   /* IE 9 */
    -moz-transform:rotate(360deg);  /* Firefox */
    -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
    -o-transform:rotate(360deg);    
  }
}

/**/

.loadIndex{
     width: 100%;
     height: 100%;
     position: fixed;
     left: 0;
     top: 0;
     z-index: 10;
}


.pageLoad{
     width: 100%;
     height: 100%;
     background: transparent;
     background: url(../images/bg_load.jpg?v=2.5) no-repeat center top;
     background-size: 100% 100%;
     /*position: relative;*/
     position: fixed;
     left: 0;
     top: 0;
     z-index: 10;
     /*display: none;*/
}

#canvasLoad{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}


 .loadWrp{
     width: 10rem;
     height: 6rem;
     position: absolute;
     left: calc(50% - 5rem);
     top: calc(50% - 2rem);
}
 .loadImg{
     width: 3.3333333333333335rem;
     height: 2.1333333333333333rem;
     background: url(../images/load.png?v=2.5) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto;
/*     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-name: headShake2;
     animation-name: headShake2;
     -webkit-animation-duration: 1.2s;
     animation-duration: 1.2s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
     -webkit-transform-origin: center top;
     transform-origin: center top;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);   */  
}

@-webkit-keyframes headShake2 {
  0% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg)
  }

  100% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}

@keyframes headShake2 {
  0% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  100% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}

 .loadBgBar{
     width: 3.7333333333333334rem;
     height: 0.3333333333333333rem;
     background: url(../images/progress.png?v=2.5) no-repeat;
     background-size: 100% 100%;
     box-sizing: border-box;
     margin: 1.2rem auto 0;
     position: relative;
}
 .loadProgress{
     position: absolute;
     left: 0;
     top: 0;
     width: 0;
     height: 0.3333333333333333rem;
     background: url(../images/progressOn.png?v=2.5) no-repeat;
     background-size: auto 100%;
     box-sizing: border-box;
}

.loadNum{
    text-align: center;
    font-size: .4rem;
    color: #000;
    width: 100%;
    height: auto;
    margin: .2rem auto;
}

.loadText{
    width: 4.8rem;
    height: 0.5333333333333333rem;
    background: url(../images/load_text.png?v=2.5) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: calc(50% - 2.4rem);
    bottom: 0.8rem;
}



/**/

.pageIndex{
     width: 100%;
     height: 100%;
     background: transparent;
     background: url(../images/bg_index.jpg?v=2.5) no-repeat center top;
     background-size: 100% 100%;
     position: fixed;
     left: 0;
     top: 0;
     z-index: 8;
     /*display: block;*/
     display: none;
}

.indexWrp{
    width: 100%;
    height: 16.533333333333335rem;
    position: absolute;
    left: 0;
    bottom: 0;
}

.index_text{
    width: 100%;
    height: 3.88rem;
    background: url(../images/index_text.png?v=2.5) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
}


.index_con{
    width: 100%;
    height: 13.906666666666666rem;
    margin: 0 auto;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    -webkit-transform-origin: center 14.2rem;
    transform-origin: center 14.2rem;    
}


.indexBg{
    width: 100%;
    height: 13.906666666666666rem;
    background: url(../images/indexBg.png?v=2.5) no-repeat center top;
    background-size: 100% 100%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
}

.door{
     width: 2.2933333333333334rem;
     height: 3.1333333333333333rem;
     background: #fff;
     position: absolute;
     left: calc(50% - 1.1466666666666667rem);
     bottom: 1.8666666666666667rem;
     overflow: hidden;
}

.door1{
     width: 1.2rem;
     height: 3.1333333333333333rem;
     background: url(../images/door1.png?v=2.5) no-repeat center top;
     background-size: 100% 100%;
     position: relative;
     z-index: 10;
}

.door2{
     width: 1.2rem;
     height: 3.1333333333333333rem;
     background: url(../images/door2.png?v=2.5) no-repeat center top;
     background-size: 100% 100%;
     position: relative;
     z-index: 10;
}

.door1_Ani{
    -webkit-animation: door1_Ani 1.3s linear 0.2s 1;
    animation: door1_Ani 1.3s linear 0.2s 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;    
}

@-webkit-keyframes door1_Ani {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(-120px,0,0);
        transform: translate3d(-120px,0,0);
    }
}


.door2_Ani{
    -webkit-animation: door2_Ani 1.3s linear 0.2s 1;
    animation: door2_Ani 1.3s linear 0.2s 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes door2_Ani {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(120px,0,0);
        transform: translate3d(120px,0,0);
    }
}


.doorLight{
    /*width: 3.6133333333333333rem;*/
    width: 100%;
    height: 4.28rem;
    position: absolute;
    left: calc(50% - 1.8rem);
    top: calc(50% - 2.1333333333333333rem);
    z-index: 20;
    background: #fff;
    background: url(../images/indexLight.png?v=2.5) no-repeat center top;
    background-size: 100% 100%;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

.doorLight2{
    /*width: 3.6133333333333333rem;*/
    width: 100%;
    height: 4.28rem;
    position: absolute;
    right: calc(50% - 1.8rem);
    top: calc(50% - 2.1333333333333333rem);
    z-index: 20;
    background: #fff;
    background: url(../images/indexLight.png?v=2.5) no-repeat center top;
    background-size: 100% 100%;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}


.light1_Ani{
    -webkit-animation: light1_Ani 1.3s linear 0.2s 1;
    animation: light1_Ani 1.3s linear 0.2s 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;    
}

@-webkit-keyframes light1_Ani {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(-120px,0,0);
        transform: translate3d(-120px,0,0);
    }
}

/*
.light2_Ani{
    -webkit-animation: light2_Ani 1.3s linear 0.2s 1;
    animation: light2_Ani 1.3s linear 0.2s 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes light2_Ani {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(120px,0,0);
        transform: translate3d(120px,0,0);
    }
}

*/



.enterBuild{
    -webkit-animation: enterBuild 1.3s linear .8s 1;
    animation: enterBuild 1.3s linear .8s 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes enterBuild {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(2);
        transform: scale(2);
    }
}


.indexBtm{
     width: 4.8rem;
     height: 0.64rem;
     background: url(../images/indexBtm.png?v=2.5) no-repeat center top;
     background-size: 100% 100%;
     position: absolute;
     left: calc(50% - 2.4rem);
     bottom: 0.37333333333333335rem;
     z-index: 20;
}



/* point */

.point-area {
     z-index:200;
     text-align: center;
     position: relative;
     width: 1.6rem;
     height: 1.6rem;
     position: absolute;
     left: calc(50% - .8rem);
     bottom: 2.8rem;
     z-index: 30;
     transition: opacity .5s ease-out;
}

.point-area .point {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 0.3333333333333333rem;
    height: 0.3333333333333333rem;
    margin: auto;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
    background: transparent
}

.point-area .point-dot {
    z-index: 2;
    background-color: #fff;
}

.point-area .point-dot2 {
    z-index: 1;
    background-color: transparent;
    width: 0.5733333333333334rem;
    height: 0.5733333333333334rem;
    margin: auto;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    border: 3px solid #fff;
}


.point-area .point-shadow:after {
    box-shadow: inset 0 0 2em rgba(0,205,236,.16)
}
.point-area .point-white {
    background-color: #fff;
    border: 1px solid #18488e
}
.point-area .point-10 {
    width: 100%;
    height: 100%
}

.point-area .point-10:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    opacity: 0;
    -webkit-animation: ripple 2s ease-out 225ms infinite;
    animation: ripple 2s ease-out 225ms infinite
}

.point-area .point-40 {
    width: 100%;
    height: 100%
}
.point-area .point-40:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    opacity: 0;
    -webkit-animation: ripple 2s ease-out .5s infinite;
    animation: ripple 2s ease-out .5s infinite
}


lesshat-selector {
    -lh-property: 0
}
@-webkit-keyframes ripple {
0% {
opacity:0;
-webkit-transform:scale(.6)
}
5% {
opacity:1
}
to {
    opacity: 0;
    -webkit-transform: scale(1)
}
}
@keyframes ripple {
0% {
opacity:0;
-webkit-transform:scale(.6);
transform:scale(.6)
}
5% {
opacity:1
}
to {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1)
}
}
[not-existing] {
zoom:1
}



/*----------------------------------------------------------------------------------------------------------------------*/

.main{
     width: 100%;
     height: 100vh;
}
 .pageMain{
     width: 100%;
     height: 100%;
     background: #000;
     background-size: 100% 100%;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 3;
     /*display: none;*/
     overflow: hidden;
    /*transform: translate3d(-50%, -50%, 0rem);
     */
}
 #mainView{
     display: block;
     -webkit-tap-highlight-color: transparent;
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 2;
}

.mainTop{
     width: 8rem;
     height: 1rem;
     position: absolute;
     left: calc(50% - 4rem);
     top: 1.7666666666666667rem;
     z-index: 5;
     display: none;
}
 .mainTop dl{
    width: 100%;
    height: auto;
}
 .mainTop dl dt{
     width: 2.6rem;
}
 .mainTop dl dt .state{
     width: 0.8rem;
     height: 0.8rem;
     background: url(../images/state_off.png?v=2.5) no-repeat;
     background-size: 100% 100%;
}
 .mainTop dl dd{
     width: 5.2rem;
     margin: 0 0 0 .2rem;
}
 .proBg{
     width: 100%;
     height: 0.48rem;
     background: #feef00;
     box-sizing: border-box;
     border-radius: 0.24rem;
     border: 4px solid #733710;
     margin: .12rem 0 0 0;
}


.pageEnd{
    width: 100%;
    height: 100%;
    background: transparent;
    background: url(../images/bg_end.jpg?v=2.5) no-repeat center center;
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    display: none;
}

.endWrp{
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 28%;
}

.endText{
    width: 6.8933333333333335rem;
    height: 1.28rem;
    background: url(../images/endText.png?v=2.5) no-repeat center top;
    background-size: 100% 100%;
    margin: 0 auto 0.26666666666666666rem;
    opacity: 0;
}

.endBtn{
     width: 6.133333333333334rem;
     height: 1.2rem;
     margin: 0 auto;
     opacity: 0;
}
 .endBtn a{
     display: block;
     width: 3.04rem;
     height: 1.2rem;
}


.aBooking{
    background: url(../images/booking.png?v=2.5) no-repeat center top;
    background-size: 100% 100%;  
}

.aBackGame{
    background: url(../images/backGame.png?v=2.5) no-repeat center top;
    background-size: 100% 100%;  
}


.endAni0{
    animation: fadeOutLeft2 1.5s ease-out 0s 1;
    -webkit-animation: fadeOutLeft2 1.5s ease-out 0s 1;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

.endAni1{
    animation: fadeInDown 1s ease-in-out 1.3s 1;
    -webkit-animation: fadeInDown 1s ease-in-out 1.3s 1;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

.endAni2{
    animation: fadeInDown 1s ease-in-out 1.7s 1;
    -webkit-animation: fadeInDown 1s ease-in-out 1.7s 1;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

@-webkit-keyframes fadeOutLeft2 {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft2 {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}


/**/

.aniInImg{
    animation: fadeInDown 0.5s ease-in-out 0s 1;
    -webkit-animation: fadeInDown 0.5s ease-in-out 0s 1;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

.aniOutImg{
    animation: fadeOutUp 0.5s ease-out 0s 1;
    -webkit-animation: fadeOutUp 0.5s ease-out 0s 1;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

.inBlack{
  -webkit-animation: fadeIn 0.5s ease-in-out 0s 1;
  animation: fadeIn 0.5s ease-in-out 0s 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.indexBlack{
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10000;
  opacity: 0;
  display: none;
}


.outBlack0{
  -webkit-animation: fadeOut2 0.5s ease-in-out 0s 1;
  animation: fadeOut2 0.5s ease-in-out 0s 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes fadeOut2 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    display: none;
  }
}

@keyframes fadeOut2 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    display: none;    
  }
}