@charset "utf-8";
/* CSS Document */

@font-face{
    font-family: 'Consolas';
    src:url('../fonts/consola.ttf')  format('truetype');
}
/*font-family: 'Beltway Prophecy', "microsoft yahei", Arial, Helvetica, sans-serif;*/

:root{
    --bgColor: #000;
}

body { background:var(--bgColor); max-width:750px; margin:0 auto; font-family:sans-serif; }

#loader { width:100%; height:100%; position:absolute; top:0; left:0; z-index:20; background-color:#fff; }
#loader .ldImg { width:14%; position:absolute; left:43%; top:35%; }
#loader .ldImg img { width:100%; display:block; pointer-events:none; }
#loader .ldNum { width:100%; position:absolute; top:46%; color:#999; font-size:3.5vw; text-align:center; 
  font-family:Arial, Helvetica, sans-serif; }

#log { position:fixed; top:0; right:0; width:50%; height:50%; text-align:right;
    color:#fff; z-index:30; pointer-events:none; display: none; }
/*#log.debug { width:30%;height:30%;pointer-events:auto;display:block; }*/ 


.msgBox { width:100%; height:100%; top:0; background-color:rgba(0,0,0,0.3); 
  position:fixed; display:none; z-index:25; }
.msgBox .msg { width:72%; left:14%; top:38%; background-color:#fff; 
  position:absolute; border-radius:14px; text-align:center; }
.msgBox .title { font-size:4.3vw; color:#000; padding-top:7%; display:none; }
.msgBox .disc { font-size:4.26vw; color:#333; margin-top:7%;  }
.msgBox .bt { font-size:4.26vw; color:#007aff; position:relative;
    margin-top:7%; padding:5% 0;  display:block; border-top:1px solid #eeeeee; }

/* .musicBox { width:12.4%; top:0; right:0; }
.musicOff { position:absolute; top:0; display:none; } */

.main { width:100%; height:100%; overflow:hidden; position:relative; display:none; }
.main .mainBg { width:100%; position:absolute; top:0; left:0;  }
.main img { width:100%; display:block; pointer-events:none; }
.main section { width:100%; height:100%; position:absolute; 
  -webkit-transform:translate3d(0,0,0); display:none; }
.main div { position:absolute; }
.main .bg { width:100%; position:absolute; }
.main .ele { position:absolute; }
.main .moreImg { position:absolute; top:0; }


.main .pop { width:100%; height:100%; position:fixed; top:0; z-index:5; display:none; }
.main .midBg { width:100%; height:100%; object-fit:cover; }
.main .btn * { pointer-events:none; }
.hide { display:none; }
.bgDiv { position:relative !important; }

.warnPop { background-color: rgba(0,0,0,0.45); display:none; z-index:100; }
.warnPop div { position:absolute; }
.warnPop img { width:100%; display:block; pointer-events:none; }
.warnBoard { width:90.13%; height:101.2vw; left:4.93%; top:19.71%; animation-delay:0.05s; }
.warningBt { width:60.94%; height:15.53vw; left:19.52%; top:75.09%; }
.warnLineBox { width:97.81%; left:0.97%; top:3.8%; }
.warnTxt { width:60.43%; left:19.41%; top:29.33%; }

.noValid { background-color: rgba(0,0,0,0.45); display:none; z-index:100; }
.noValid div { position:absolute; }
.noValid img { width:100%; display:block; pointer-events:none; }


.btLine_am { -webkit-animation:btLine_am 2.6s linear infinite normal; }
@-webkit-keyframes btLine_am  {  
    0% { -webkit-transform:translate3d(0,0,0) } 
    100% { -webkit-transform:translate3d(0,-100%,0) }  
}
@-webkit-keyframes muRound_am  {  
    0% { -webkit-transform:translate3d(0,0,0) scale(1); opacity:0.6;  } 
    80% { opacity:0.5;  } 
    100% { -webkit-transform:translate3d(0,0,0) scale(1.4); opacity:0;  }  
}

/**** p1 */
.btLine { width:100%; left:0%; top:0%; }
.btLine2 { top:100%; }
.descTxt { width:100%; left:0%; text-align:center; letter-spacing:2px;
  font-size:3.6vw; color:#fff; line-height:1.6; }
.descTxt span { font-weight:bold; }

.full { width:100%; height:100%; position:absolute; top:0; left:0; }

.topPart { width:100%; height:15vw; left:0; top:0; z-index:10; }
.prizeInfo { width:100%; left:0%; top:63%; font-size:3.4vw; }
.topPart div { position:absolute; }
.topPart img { width:100%; display:block; pointer-events:none; }
.musicBox { width:9.46%; height:9.33vw; position:absolute; left:86.53%; top:47%; }
.musicBox .muRoundAm { width:100%; left:0; top:0; 
  -webkit-animation:muRound_am 1s linear infinite normal; }
.musicBox .muRoundAm2 { width:100%; left:0; top:0; 
  -webkit-animation:muRound_am 1s -0.5s linear infinite normal; }
.musicBox .muRound { width:100%; left:0; top:0; }
.musicBox .muPlay { width:100%; left:0; top:0; }
.musicBox .muPause { width:100%; left:0; top:0; display:none; }
.musicBox.pause .muPlay { display:none; }
.musicBox.pause .muPause { display:block; }
.musicBox.pause .muRoundAm { display:none; }
.musicBox.pause .muRoundAm2 { display:none; }

.ruleBt { width:16.53%; left:4.8%; top:66.26%; }
.ruleBt { width:17.86%; left:4.8%; top:66.26%; }
.introRuleBt { width:17.86%; left:4.8%; top:66.26%; } /* click stop introVideo */
.topBackBt { width:19.46%; left:5.2%; top:66.86%; }
.ruleBtRight { width:20.93%; left:73.6%; top:68.07%; }

#p0 { width:100%; height:100%; position:absolute; top:0; left:0; }
.mediaContainer { width:100%; height:100%; display:flex; align-items: center; background-color: #000; }
.mediaContainer video { width:100%; height:100%; object-fit:cover; }
.mediaContainer audio { display:none; }
/* .mediaContainer canvas { width:100%; height:100%; object-fit:cover; } */


.aSlogan { width:47.86%; height:20.93vw; left:26.13%; top:63.53%; pointer-events: none; }
.aSlogan3 { width:76.04%; left:10.86%; top:0; animation-delay:0.5s; }
.aSlogan2 { width:56.26%; left:20.89%; top:15.92%; animation-delay:0.45s; }
.aSlogan1 { width:100%; left:0; top:28.66%; animation-delay:0.35s; }

.aStartBt { width:54.93%; height:13.86vw; left:22.53%; top:77%; animation-delay:0.6s; }
.aStartBtLineBox { width:97.81%; height:91.34%; left:1.21%; top:3.84%; overflow: hidden; }
.aStartBt2 { width:12.62%; left:18.44%; top:22.11%; }
.aStartBt1 { width:42.47%; left:38.34%; top:31.73%; }
.aMyprizeBt { width:34.93%; left:33.6%; top:88%; animation-delay:0.7s; }
.aTitle { width:54.66%; left:22.66%; top:12.5%; animation-delay:0.25s; }

.aContinuePop { background-color: rgba(0,0,0,0.75); z-index:25 !important; }
.aContinueBoard { width:90.13%; height:101.2vw; left:4.93%; top:21.53%; animation-delay:0.1s; }
.aContinueBt { width:61.09%; height:15.68vw; left:19.37%; top:74.96%; }
.aContinueTxt { width:60.77%; left:19.61%; top:31%; }
.aContinueLineBox { width:97.82%; height:90.56%; left:0.96%; top:4.71%; overflow: hidden; }



.bPieceBox { width:90.66%; left:4.66%; top:23.39%; }
.bBorder { width:100%; animation-delay:0.1s; }
.bPiece5 { width:43.82%; left:49.55%; top:67.15%; animation-delay:0.5s; }
.bPiece4 { width:39.7%; left:7.05%; top:53.16%; animation-delay:0.45s; }
.bPiece3 { width:47.2%; left:33.97%; top:39.31%; animation-delay:0.4s; }
.bPiece2 { width:35.14%; left:58.97%; top:6.72%; animation-delay:0.3s; }
.bPiece1 { width:40.44%; left:5.88%; top:5.27%; animation-delay:0.2s; }
.bGray { width:100%; top:0; }

.bHand_am { animation:bHand_am 0.3s ease-in-out infinite alternate; }
@keyframes bHand_am        {  
  0% {  transform:translate3d(0,0,0) scale(1); } 
  100% {  transform:translate3d(0,0,0) scale(1.2); }  
}
.bHand { width:6.76%; pointer-events: none; transform-origin:50% 20%; 
  animation-delay:1s; display:none; }
.bHand1 { left:14.26%; top:34.03%; }
.bHand2 { left:81.91%; top:34.03%; }
.bHand3 { left:54.26%; top:54.74%; }
.bHand4 { left:14.26%; top:79.28%; }
.bHand5 { left:81.91%; top:82.58%; }

.bUnlockBt { width:54.93%; height:14vw; left:22.53%; top:81.85%; animation-delay:0.6s; }
.bUnlockBtLineBox { width:97.81%; height:91.42%; left:0.97%; top:3.8%; overflow: hidden; }
.bUnlockBt1 { width:39.56%; left:30.33%; top:29.52%; }
.bDescFirst { top:73%; animation-delay:0.6s; } 

.bCheckPieces {  }
.bInviteBt { width:54.93%; height:14vw; left:22.53%; top:86%; animation-delay:0.6s; }
.bInviteTxt { width:60.19%; left:27.42%; top:29.52%; }
.bInviteIcon { width:11.65%; left:9.22%; top:25.71%; }
.bDescInvite { top:77%; animation-delay:0.6s; }

.bPic { width:100%; left:0; top:21%; display: none; }

.bPop { width:100%; height:100%; left:0; top:0; }
.bClose { width:54.93%; height:14vw; left:22.53%; top:86%; }
.bCloseTxt { width:26.45%; left:36.89%; top:29.52%; }

.bLotterPart { display:none; }
.bLotterBoard { width:90.66%; left:4.66%; top:23.39%; }
.bLotPlayTxt { width:17.94%; left:41.17%; top:61.74%; display:none; }
.bLotPlayIcon { width:23.67%; left:37.35%; top:37.33%; display:none; }
.bLotterBt { width:54.93%; min-height:14vw; left:22.53%; top:86%; }
.bLotLineBox { width:97.81%; height:12.8vw; left:0.97%; top:3.8%; overflow: hidden; }
.bLotIcon { width:11.16%; left:25.97%; top:22.85%; }
.bLotTxt { width:29.36%; left:46.11%; top:29.52%; }
.b5to1 { width:100%; left:0; top:50%; transform:translateY(-50%); }
.b5to1 video { width:100%; background-color: #000; }

.hideGif { width:100%; opacity:0; display:none; }

.bFullVideo { width:100%; height:79%; left:0; top:10%; display:none; }
.bFullVideo video { width:100%; height:100%; background-color: #000; object-fit:contain; }

.bLotBorder { width:100%; left:0; top:0; pointer-events: none; }

.bUnlockVideoBt { width:54.93%; height:14vw; left:22.53%; top:86%; display:none; }
.bUnlockVideoTxt { width:60.92%; left:19.41%; top:29.52%; }


.hasPrizePop { background-color: rgba(0,0,0,0.75); z-index:25 !important; }
.hasPrizeBoard { width:90.13%; height:101.2vw; left:4.93%; top:21.53%; animation-delay:0.05s; }
.IKnowBt { width:60.94%; height:15.53vw; left:19.52%; top:75.09%; }
.IKnowTxt { width:37.37%; left:34.22%; top:32.38%; }
.IKnowCloseBt { width:60.94%; height:15.53vw; left:19.52%; top:75.09%; }


#p3 { width:100%; height:100%; background-color: #000; }
.cPosterBox { width:88.26%; left:5.86%; top:11.34%; animation-delay:0.1s; }
.cPoster { width:100%; }
.cPoster canvas { width:100%; }
.cPoster img { pointer-events:auto; }
.cSaveTxt { width:27.14%; left:36.5%; top:100%; }
.qrCode { position:absolute; left:0; top:0; display: none; }

.cBackBt { width:54.93%; height:14vw; left:22.53%; top:88%; animation-delay:0.3s; }
.cBackTxt { width:34.46%; left:32.76%; top:31.42%; }


.dListBox { width:87.6%; height:116vw; left:6.53%; top:21.6%; overflow: hidden; animation-delay:0.3s; }
.dList { width: 100%; position:absolute; left:0; top: 0; }
.dItem { width:100%; position: relative; margin-bottom: 5vw; }
.dPrizeName { width:43.67%; height:100%; left:29.51%; top:0%;
  font-size:3.76vw; color:#56b5c6; display: flex; align-items: center;}
.dPrizeName span { font-size:2.8vw; color:#56b5c6; display: block; }
.dPrizeNone { width:100%; height:100%; left:0; top:0; font-size:3.76vw; color:#56b5c6; text-align: centers; }

.dPrizeBg { width:100%; left:0; top:0; }
.dPrizeImg { width:29.07%; left:1%; top:0.7%; }
.dRedeemBt { width:21.93%; left:76.39%; top:2.12%; }
.dRedeemTxt { width:103%; position:absolute; left:0; top:50%; transform:translateY(-50%);
    font-size:4vw; color:#fff; letter-spacing: 0.8vw; text-align: center; }
.dTitle { width:84.93%; left:7.46%; top:11.93%; animation-delay:0.2s; }




.eTitle { width:42.26%; left:28.8%; top:12%; animation-delay:0.1s; }
.eRuleBox { width:88.53%; height:133.2vw; left:5.73%; top:18%; overflow: hidden; animation-delay:0.2s; }
.eRuleTxt { width:100%; left:0; top:0; }
.dBack { width:18.13%; left:5.06%; top:9.87%; animation-delay:0.2s; }
.eArr { width:7.33%; position:absolute; left:46.26%; top:90%; animation-delay:0.3s; }
.eArr img { width:100%; }



.fStar_am { animation:fStar_am 0.5s ease-in-out infinite alternate; }
@keyframes fStar_am        {  
  0% {  transform:translate3d(0,0,0) scale(0.1); } 
  100% {  transform:translate3d(0,0,0) scale(1.5); }  
}
.fLotterBt { width:54.93%; height:14vw; left:22.53%; top:70%; animation-delay:0.3s; }
.fLotterTxt { width:39.56%; left:40.29%; top:29.52%; }
.fLotterIcon { width:11.16%; left:20.87%; top:22.85%; }
.fDescChance { top:63.26%; animation-delay:0.2s; }

.fBoxCon { width:95.33%; height:95.06vw; left:2.4%; top:9.23%; 
  transform-origin:50% 70%; animation-delay:0.2s; }
.fBox { width:44.47%; left:27.83%; top:41.51%; }
.fBox video { width:100%; }
.fStar1 { width:9.09%; left:64.47%; top:56.24%; animation-delay:-0.5s; }
.fStar2 { width:4.05%; left:39.58%; top:76.57%; animation-delay:-0.3s; }
.fStar4 { width:4.47%; left:40.27%; top:43.89%; animation-delay:-0.4s; }
.fStar5 { width:3.35%; left:49.37%; top:53.01%; animation-delay:-0.2s; }
.fStar3 { width:4.47%; left:50.9%; top:69.42%; animation-delay:-0.1s; }

.fOpenBox { width:95.33%; left:2.4%; top:9.23%; display: none; mix-blend-mode: lighten; }
.fOpenBox video { width:100%; }

.fPop { background-color: rgba(0,0,0,0.75); }
.fPopBoard { width:77.86%; left:11.06%; top:18.46%; }
.fPopPrizeImg { width:100%; left:0; top:0; }
.fPopPrizeName { top:76.42%; }

.fPrizeBoard { width:77.6%; height:86.66vw; left:11.2%; top:18.39%; animation-delay:0.05s; }
.fPrizeBg { width:97.59%; left:1.2%; top:1.07%; }
.fPrizeImg { width:100%; left:0; top:0; }
.fPrizeBorder { width:100%; left:0; top:0; }
.fPrizeName { width:100%; left:0; top:74%; letter-spacing: 0.6vw;
  text-align: center; font-size:3.76vw; color:#fff; }
.fGetTicketBt { width:54.93%; height:14vw; left:22.53%; top:70%; animation-delay:0.15s; }
.fGetTicketLineBox { width:97.81%; height:79.04%; left:0.97%; top:16.19%; overflow: hidden; }
.fGetTicketTxt { width:60.92%; left:19.41%; top:33.33%; }
.fGetSucTxt { width:60.92%; left:19.41%; top:33.33%; display:none; }
.fPrizeDesc { width:72.8%; left:13.6%; top:82%; animation-delay:0.25s; }

.fGetTicketSucBorad { width:90.13%; height:101.2vw; left:4.93%; top:21.53%; animation-delay:0.05s; }
.fGetTicketSucBack { width:60.94%; height:15.53vw; left:19.52%; top:75.09%; }
.fGetTicketSucBackTxt { width:47.57%; left:26.21%; top:30.28%; }
.fGetTicketSucPop { background-color: rgba(0,0,0,0.75); }


.sJoinBt { width:54.93%; height:14vw; left:22.53%; top:82%; overflow: hidden; animation-delay: 0.3s; }
.sJoinTxt { width:79.36%; left:10.19%; top:29.52%; }
.sZhuliBt { width:54.93%; height:14vw; left:22.53%; top:84%; animation-delay: 0.2s; }
.sZhuliLineBox { width:97.81%; height:91.42%; left:0.97%; top:3.8%; overflow: hidden; }
.sZhuliTxt { width:39.32%; left:29.85%; top:29.52%; }
.sZhuliDesc { width:26.66%; left:36.8%; top:75%; }
.sPrizePic { width:90.66%; left:4.66%; top:19%; }
.sOldBorad { width:90.13%; height:101.2vw; left:4.93%; top:21.53%; }
.sIwantBt { width:60.94%; left:19.52%; top:75.09%; overflow: hidden; }
.sIwantBtTxt { width:60.92%; left:19.41%; top:34.28%; }
.sOldPop { background-color: rgba(0,0,0,0.75); }
.sSlogan { width:100%; left:0%; top:74%; animation-delay: 0.1s; }

.sNoTimesBorad { width:90.13%; left:4.93%; top:21.53%; }
.sNoTimesPop { background-color: rgba(0,0,0,0.75); }

.sZhuliBoard { width:90.13%; height:101.2vw; left:4.93%; top:21.53%; animation-delay:0.05s; }
.sIwantBt { width:60.94%; left:19.52%; top:75.09%; }
.sZhuliPop { background-color: rgba(0,0,0,0.75); }

.sLiping { width:81.33%; left:8.4%; top:24.01%; }
.sLipingDesc { top:72%; animation-delay: 0.2s; }


.vc-log-row { font-family:Consolas, sans-serif; }


/* 9/16 = 0.5625 */


/* 750/1648 = 363/797 = 0.4554579 no top bar */
/* 414/808 = 375/731.9 = 0.5124 iPh11ProMax */
/* 430/834 = 375/727.3 = 0.5156 iPh15 Plus */
/* 360/698 = 375/730.3 = 0.5157 p40Pro */
/* 390/753 = 375/724 = 414/799 = 0.5179 iPh13Pro、iPhX */
/* 428/823 = 375/721 = 0.5200 iPh14ProMax */

/* 375/670 = 375/670 = 0.5597 asAndr */
/* 414/672 = 375/616 = 0.6160 7p & 6s */
/* 414/619 = 375/571 = 0.6688 7pBar */

/* 414/600 = 0.69 keyboard in */

@media screen and (min-aspect-ratio:414/810) { 
  /*iPh11ProMax */
  #log { color:red; }
}
@media screen and (min-aspect-ratio:390/760) { 
  /*iPh13Pro iPh14ProMax p40Pro */
  #log { color:green; }
}
@media screen and (min-aspect-ratio:375/670) { 
  /*asAndr 375/660 */
  #log { color:blue; }
  .aMyprizeBt { width: 28.93%; left: 36.6%; top: 94%; }
  .aStartBt { width: 50.93%; left: 24.53%; top: 84%; }
  .aSlogan { width: 48.13%; left: 24.93%; top: 70.53%; }  
  .bPieceBox { top: 19.39%; }
  .bLotterBoard { top: 19.39%; }
  .bInviteBt { top: 87%; }
  .bLotterBt { top: 87%; }
  .bUnlockVideoBt { top: 87%; }
  .bDescInvite { top: 77.5%; line-height: 1.5; }

  .bPic { top:20%; }
  .bClose { top:89%; }

  .cPosterBox { width: 80.26%; left: 9.86%; }
  .eTitle { top: 11%; }
  .eRuleBox { width: 84.53%; height: 120.2vw; left: 7.73%; top: 18%; }
  .eArr { top: 92%; }
  .fDescChance { top: 64.26%; }
  .fLotterBt { top: 74%; }
  .fGetTicketBt { top: 74%; }
  .fPrizeDesc { top: 87%; }

  .sZhuliDesc { top:82%; }
  .sZhuliBt { top: 88%; }
  .sJoinBt { top:88%; }
  .sSlogan { top:82%; }
  .sPrizePic { top: 22%; }
}
@media screen and (min-aspect-ratio:414/680) {
  /* 7p & 6s 414/672 375/609*/
  #log { color:#ff0; }
  .aStartBt { top: 84.8%; } 
  .bPieceBox { top: 16.39%; }
  
  .bPic { top:16%; }

  .bLotterBoard { top: 13.39%; }

  .eTitle { width: 38.26%; left: 30.8%; top: 11%; }
  .eRuleBox { height: 115.2vw; }
  .cPosterBox { width: 75.26%; left: 12.36%; }
  .bDescInvite { top: 78.5%; }
  .fDescChance { top: 66.26%; }
  .fLotterBt { top: 77%; }
  .fGetTicketBt { top: 77%; }
  .fPrizeDesc { top: 90%; }

  .sJoinBt { top:88%; }
  .sSlogan { top: 83%; }
  .sZhuliDesc { top: 83%; }
  .sZhuliBt { top: 88%; }
}
@media screen and (min-aspect-ratio:414/630) {
    /* 7pBar 414/623 */
  #log { color:#f0f; }
  .bPic { top:8.5%; }
  .cPosterBox { width: 71.26%; left: 14.36%; }
  .fGetTicketBt { top: 78%; }
}
@media screen and (min-aspect-ratio:414/600) {
    /* 手机键盘弹出 */
    #log { color:#0ff; }
}

@media screen and (min-width:1024px){
/*    pc端*/
}
@media screen and (max-width:1024px){
/*    wap端*/
}