html{ font-size:100px; font-size:13.33333vw }
@media screen and (max-width:320px){ html{font-size:42.6666666667px; font-size:13.33333vw }
}
@media screen and (min-width:321px)and (max-width:360px){ html{font-size:48px; font-size:13.33333vw }
}
@media screen and (min-width:361px)and (max-width:375px){ html{font-size:50px; font-size:13.33333vw }
}
@media screen and (min-width:376px)and (max-width:393px){ html{font-size:52.4px; font-size:13.33333vw }
}
@media screen and (min-width:394px)and (max-width:412px){ html{font-size:54.9333333333px; font-size:13.33333vw }
}
@media screen and (min-width:413px)and (max-width:414px){ html{font-size:55.2px; font-size:13.33333vw }
}
@media screen and (min-width:415px)and (max-width:480px){ html{font-size:64px; font-size:13.33333vw }
}
@media screen and (min-width:481px)and (max-width:540px){ html{font-size:72px; font-size:13.33333vw }
}
@media screen and (min-width:541px)and (max-width:640px){ html{font-size:85.3333333333px; font-size:13.33333vw }
}
@media screen and (min-width:641px)and (max-width:720px){ html{font-size:96px; font-size:13.33333vw }
}
@media screen and (min-width:721px)and (max-width:750px){ html{font-size:100px; font-size:13.33333vw }
}
@media screen and (min-width:751px){ html{font-size:100px }
}
html *{ outline:0; -webkit-text-size-adjust:none; -webkit-tap-highlight-color:rgba(0,0,0,0) }
body,nav,dl,dt,dd,p,h1,h2,h3,h4,ul,ol,li,input,button,textarea,footer{ margin:0; padding:0 }
body{ font:62.5%/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; min-width:320px }
h1,h2,h3,h4,h5,h6{ font-size:100% }
img{ vertical-align:middle; border:0; -webkit-tap-highlight-color:rgba(0,0,0,0) }
em,i{ font-style:normal }
img{ max-width:100%; border:0 }
input:focus{ outline:0 }
table{ border-collapse:collapse; border-spacing:0 }
ol,ul,li{ list-style:none }
textarea{ resize:none }
a{ text-decoration:none; color:#333 }
.cf:after{ content:" "; display:block; height:0; clear:both; visibility:hidden }
.cf{ min-height:1% }
.fl{ float:left }
.fr{ float:right }
.hide{ display:none }
.show{ display:block }
.ellipsis{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.break{ word-break:break-all; word-wrap:break-word }
.mt10{ margin-top:.1rem !important }
.mt15{ margin-top:.15rem !important }
.mt20{ margin-top:.2rem !important }
.mt25{ margin-top:.25rem !important }
.mt30{ margin-top:.3rem !important }
.mt35{ margin-top:.35rem !important }
.mt40{ margin-top:.4rem !important }
.mt45{ margin-top:.45rem !important }
.mt50{ margin-top:.5rem !important }
.mt55{ margin-top:.55rem !important }
.mt60{ margin-top:.6rem !important }
.mt65{ margin-top:.65rem !important }
.mt70{ margin-top:.7rem !important }
.mt80{ margin-top:.8rem !important }
.mt85{ margin-top:.85rem !important }
.mt90{ margin-top:.9rem !important }
.mt95{ margin-top:.95rem !important }
.mt100{ margin-top:1rem !important }
.mb10{ margin-bottom:.1rem !important }
.mb15{ margin-bottom:.15rem !important }
.mb20{ margin-bottom:.2rem !important }
.mb25{ margin-bottom:.25rem !important }
.mb30{ margin-bottom:.3rem !important }
.mb35{ margin-bottom:.35rem !important }
.mb40{ margin-bottom:.4rem !important }
.mb45{ margin-bottom:.45rem !important }
.mb50{ margin-bottom:.5rem !important }
.mb55{ margin-bottom:.55rem !important }
.mb60{ margin-bottom:.6rem !important }
.mb65{ margin-bottom:.65rem !important }
.mb70{ margin-bottom:.7rem !important }
.mt120{ margin-top:1.2rem !important }
.mt140{ margin-top:1.4rem !important }
body{ background-color:#efced2; margin:0 auto; font-size:.24rem }
.box1{ width:7.5rem; height:100vh; margin:0 auto !important; background:url("../images/bg1.jpg") no-repeat 0 0; background-size:cover }
.box2{ position:relative; width:7.5rem; height:16.24rem; margin:0 auto !important; background:url("../images/bg2.jpg") no-repeat 0 0; background-size:100% 100%; display:none }
.gitem a{ position:absolute }
.gitem a.on{ transform-origin:50% 70%; animation:g1FloatHint 1.2s ease-in-out infinite; z-index:2 }
.gitem .g1{ top:3.46rem; left:4.24rem }
.gitem .g1 img{ width:1.31rem; height:.83rem }
.gitem .g2{ top:4.63rem; left:6.44rem }
.gitem .g2 img{ width:.65rem; height:.36rem }
.gitem .g3{ top:5.78rem; left:3.54rem }
.gitem .g3 img{ width:.77rem; height:1.2rem }
.gitem .g4{ top:6.38rem; left:4.2rem }
.gitem .g4 img{ width:1.06rem; height:.71rem }
.gitem .g5{ top:6.3rem; left:5.28rem }
.gitem .g5 img{ width:.7rem; height:.81rem }
.gitem .g6{ top:6.09rem; left:6.04rem }
.gitem .g6 img{ width:1.18rem; height:1.21rem }
.gitem .g7{ top:8.49rem; left:1.04rem }
.gitem .g7 img{ width:2.66rem; height:3.39rem }
.gitem .g8{ top:8.84rem; left:3.5rem }
.gitem .g8 img{ width:1.55rem; height:1.93rem }
.gitem .g9{ top:9.68rem; left:5.88rem }
.gitem .g9 img{ width:1.1rem; height:1.22rem }
.gitem .g10{ top:12.42rem; left:2.98rem }
.gitem .g10 img{ width:.84rem; height:1.07rem }
.gitem .g11{ top:14.02rem; left:3.5rem }
.gitem .g11 img{ width:1.61rem; height:1.22rem }
.gitem .g12{ top:12.42rem; left:5.4rem }
.gitem .g12 img{ width:1.88rem; height:2.78rem }
.tips{ position:absolute; width:5.67rem; height:1.77rem; background:url("../images/tips.png") no-repeat 0 0; background-size:100% 100%; top:1.35rem; left:.9rem; box-sizing:border-box; opacity:0; padding:.66rem .2rem 0 1.44rem; animation:cardTitEnter .42s ease-out .45s forwards }
.tips span{ display:block; line-height:.34rem; font-size:.25rem; color:#fff }
.tips em{ line-height:.34rem; font-size:.25rem; color:#ffffb2; display:block }
.c-btn2{ position:absolute; left:50%; margin-left:-2.22rem; bottom:1.6rem; display:block; width:4.44rem; height:1.28rem; z-index:1; background:url("../images/btn2.png") no-repeat 0 0; background-size:100% 100% }
.c-pop{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:7.5rem; z-index:9 }
.c-pop .tit2{ text-align:center }
.c-pop .tit2 img{ width:7.14rem; height:2.51rem }
.c-pop .card2{ width:7.33rem; height:5.38rem; background:url("../images/card3.png") no-repeat 0 0; background-size:100% 100%; box-sizing:border-box; padding:.78rem .6rem .78rem .6rem; margin:0 auto; position:relative }
.c-pop .card2 span{ display:block; font-size:.27rem; color:#99294e }
.c-pop .card2 p{ margin-top:.04rem; font-size:.27rem; color:#99294e; line-height:.38rem }
.c-pop .card2 em{ display:block; font-size:.27rem; color:#99294e; margin-right:.1rem; text-align:end; margin-top:.02rem }
.c-pop .card2 img{ width:2.3rem; height:2.25rem; object-fit:contain; bottom:-0.2rem; right:.6rem; position:absolute }
.c-pop .g-btn{ margin-top:.36rem }
.c-pop .g-btn a{ display:block; width:4.44rem; height:1.28rem; margin:0 auto 0; text-align:center; box-sizing:border-box; padding-top:.56rem }
.c-pop .g-btn a.gbtn1{ background:url("../images/btn3.png") no-repeat 0 0; background-size:100% 100% }
.c-pop .g-btn a.gbtn2{ width:4.09rem; height:1.01rem; background:url("../images/btn4.png") no-repeat 0 0; background-size:100% 100% }
.c-pop .g-btn a.gbtn2 span{ font-size:.18rem; color:#d28854; font-weight:bold }
.c-pop .g-btn a.gbtn2 i{ font-size:.18rem; color:#d28854 }
.c-pop .g-btn em{ display:block; font-size:.25rem; color:#ffc; text-align:center; margin-top:.2rem; text-decoration:underline }
.ba-list{ position:relative; margin-left:-0.205rem; width:7.7rem; height:8.64rem; background:url("../images/ba-list.png") no-repeat 0 0; background-size:100% 100%; box-sizing:border-box; padding-top:1.39rem }
.ba-list .ba-close{ position:absolute; top:.22rem; right:.15rem; width:.64rem; height:.63rem; background:url("../images/p-close.png") no-repeat 0 0; background-size:100% 100% }
.ba-list ul{ width:5.8rem; height:4.84rem; overflow-y:auto; margin-left:1.1rem }
.ba-list ul::-webkit-scrollbar{ width:.06rem; height:""; background:"" }
.ba-list ul::-webkit-scrollbar-track{ border-radius:.2rem; background:none }
.ba-list ul::-webkit-scrollbar-thumb{ border-radius:.5rem; background:#e077a6 }
.ba-list ul li{ width:5.54rem; height:.65rem; display:flex; align-items:center; font-size:.25rem; color:#e676a2; justify-content:center; background-color:#fff0d1; border-radius:.16rem; box-sizing:border-box; margin:0 auto .18rem }
.ba-list ul li.on{ border:1px solid #b74275; color:#fff; background-color:#e676a2 }
.ba-list .gbtn3{ display:block; margin-top:.2rem; width:3.11rem; height:.78rem; margin:.38rem auto 0; background:url("../images/btn5.png") no-repeat 0 0; background-size:100% 100% }
.box2.is-enter{ animation:box2Enter .55s ease-out both }
@keyframes maskFadeIn{ from{opacity:0 }
to{ opacity:1 }
}
@keyframes cardBoxEnter{ from{opacity:0; transform:translate(-50%,-62%) scale(0.85) }
to{ opacity:1; transform:translate(-50%,-60%) scale(1) }
}
@keyframes cardTitEnter{ from{opacity:0; transform:translateY(-0.5rem) scale(0.92) }
to{ opacity:1; transform:translateY(0) scale(1) }
}
@keyframes cardEnter{ from{opacity:0; transform:translateY(0.6rem) scale(0.9) }
to{ opacity:1; transform:translateY(0) scale(1) }
}
@keyframes cardBreath{ 0%{transform:translateY(0) scale(1) }
50%{ transform:translateY(-0.06rem) scale(1.03) }
100%{ transform:translateY(0) scale(1) }
}
@keyframes g1FloatHint{ 0%{transform:translateY(0) scale(1) }
50%{ transform:translateY(-0.01rem) scale(1.04) }
100%{ transform:translateY(0) scale(1) }
}
@keyframes box1IntoDoor{ 0%{opacity:1; transform:scale(1) translateY(0); filter:blur(0) brightness(1) }
35%{ opacity:1; transform:scale(1.22) translateY(0.06rem); filter:blur(0.01rem) brightness(0.97) }
72%{ opacity:1; transform:scale(1.65) translateY(0.14rem); filter:blur(0.03rem) brightness(0.92) }
100%{ opacity:0; transform:scale(2.2) translateY(0.22rem); filter:blur(0.1rem) brightness(0.75) }
}
@keyframes sceneFadeOut{ from{opacity:1; transform:translateY(0) }
to{ opacity:0; transform:translateY(0.3rem) }
}
@keyframes box2Enter{ from{opacity:0; transform:translateY(0.5rem) scale(0.97) }
to{ opacity:1; transform:translateY(0) scale(1) }
}
.card-box{ position:fixed; width:7.5rem; height:10rem; top:50%; left:50%; transform:translate(-50%,-10%); z-index:9 }
.card-box .card-tit{ text-align:center; transition:all .3s }
.card-box .card-tit img{ width:7.14rem; height:3.06rem }
.card-box .card{ width:7.17rem; height:4.76rem; margin-top:.8rem; margin-left:.3rem; background:url("../images/card.png") no-repeat 0 0; background-size:100% 100% }
.card-con{ display:none; margin-top:.2rem }
.card-con .card-text{ position:relative; width:7.51rem; height:5.38rem; background:url("../images/card2.png") no-repeat 0 0; background-size:100% 100%; box-sizing:border-box; padding:.78rem .8rem }
.card-con .card-text span{ display:block; font-size:.27rem; color:#99294e }
.card-con .card-text p{ margin-top:.34rem; font-size:.27rem; color:#99294e }
.card-con .card-text em{ display:block; font-size:.27rem; color:#99294e; text-align:end; margin-top:.3rem }
.card-con .c-btn{ display:block; width:4.45rem; height:1.28rem; margin:0 auto; background:url("../images/btn1.png") no-repeat 0 0; background-size:100% 100% }
.card-box .card{ cursor:pointer }
.mask{ width:100vw; height:100vh; position:fixed; top:0; left:0; z-index:2; background-color:rgba(0,0,0,.5) }
body.page-enter .mask{ opacity:0; animation:maskFadeIn .45s ease-out forwards }
body.page-enter .card-box{ opacity:0; animation:cardBoxEnter .65s cubic-bezier(0.2,0.75,0.22,1) .2s forwards }
body.page-enter .card-box .card-tit{ opacity:0; animation:cardTitEnter .55s ease-out .5s forwards }
body.page-enter .card-box .card{ opacity:0; transform-origin:50% 50%; animation:cardEnter .65s cubic-bezier(0.2,0.75,0.22,1) .72s forwards,cardBreath 2.4s ease-in-out 1.45s infinite }
body.scene-to-box2 .box1{ transform-origin:50% 52%; animation:box1IntoDoor .9s ease-in forwards }
.p-pop{ position:relative; width:7.38rem; height:auto; z-index:0; margin:0 auto; box-sizing:border-box; padding:1rem 1rem .68rem }
.p-pop::after{ content:""; position:absolute; top:0; left:0; bottom:1rem; width:7.38rem; height:auto; z-index:-1; background:url("../images/p-top.png") no-repeat 0 0; background-size:100% auto }
.p-pop::before{ content:""; position:absolute; bottom:.04rem; left:0; width:7.38rem; height:1rem; z-index:-1; background:url("../images/p-bom.png") no-repeat 0 0; background-size:100% 100% }
.p-pop .p-close{ position:absolute; top:.22rem; right:.15rem; width:.64rem; height:.63rem; background:url("../images/p-close.png") no-repeat 0 0; background-size:100% 100% }
.p-tit{ text-align:center; font-size:.38rem; color:#99294e; font-weight:bold }
.p-gift-img{ display:flex; justify-content:center; margin-top:.28rem }
.p-gift-img img{ width:1.4rem; height:1.4rem; object-fit:contain }
.p-img{ display:flex; justify-content:center; margin-top:.28rem }
.p-img img{ width:2.2rem; height:2.4rem; object-fit:contain }
.p-text{ font-size:.26rem; color:#99294e; text-align:center; margin-top:.16rem; line-height:.36rem }
.p-con{ font-size:.32rem; color:#99294e; text-align:center; margin-top:.2rem; line-height:.5rem; font-weight:bold }
.p-btn{ display:flex; justify-content:center; margin-top:.28rem }
.p-btn a{ display:block; width:1.67rem; height:.59rem; line-height:.59rem; text-align:center; font-size:.3rem; color:#b06962 }
.p-btn a.btn1{ background:url("../images/pbtn1.png") no-repeat 0 0; background-size:100% 100% }
.p-btn a.btn2{ width:3.69rem; height:.59rem; background:url("../images/pbtn2.png") no-repeat 0 0; background-size:100% 100% }
.game-list{ width:6.3rem; margin-left:-0.48rem; margin-top:.2rem; height:6rem; overflow-y:auto }
.game-list::-webkit-scrollbar{ width:.06rem; height:""; background:"" }
.game-list::-webkit-scrollbar-track{ border-radius:.2rem; background:none }
.game-list::-webkit-scrollbar-thumb{ border-radius:.5rem; background:#e077a6 }
.game-list ul li{ display:flex; align-items:center; width:6.18rem; height:1.38rem; border-radius:.2rem; background-color:#fff7e4; box-sizing:border-box; padding:0 .24rem; margin-bottom:.2rem }
.game-list ul li img{ width:1.12rem; height:1.12rem; border-radius:.25rem; border:1px solid #9b3256 }
.game-list ul li p{ margin-left:.18rem; flex:1 }
.game-list ul li p span{ width:2.8rem; display:block; color:#313131; font-size:.32rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.game-list ul li p em{ display:block; width:2.8rem; font-size:.26rem; color:#636363; margin-top:.2rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.game-list ul li a{ display:block; width:1.42rem; height:.48rem; line-height:.48rem; text-align:center; font-size:.3rem; color:#b06962; background:url(../images/pbtn1.png) no-repeat 0 0; background-size:100% 100% }
.show-box-wrapper{ margin:.1rem auto 0; height:1.6rem; overflow:hidden; width:7.5rem; position:relative }
.show-box{ background:url("../images/img7.png") no-repeat 0 0; background-size:100% 100%; background-color:rgba(0,0,0,0); width:max-content; max-width:7.2rem; height:.44rem; box-sizing:border-box; position:absolute; top:.2rem; left:100%; transform:translate3d(0,0,0); will-change:transform }
.show-box.go{ -webkit-animation:goLeft var(--duration,12s) linear both; animation:goLeft var(--duration,12s) linear both }
.show-box .via{ overflow:hidden; display:flex; align-items:center; width:max-content; max-width:6.9rem; background-color:var(--barrage-bg,#87e4e4); height:.44rem; border-radius:.6rem; box-sizing:border-box; padding:0 .12rem 0 .04rem }
.show-box .via img{ width:.4rem; height:.4rem; border-radius:50%; flex-shrink:0 }
.show-box .via p{ color:#fff; line-height:.3rem; font-size:.24rem; margin-left:.08rem; white-space:nowrap; flex-shrink:0 }
@-webkit-keyframes goLeft{ 0%{-webkit-transform:translate3d(0,0,0) }
100%{ -webkit-transform:translate3d(calc(-1 * var(--move-distance,10rem)),0,0) }
}
@keyframes goLeft{ 0%{transform:translate3d(0,0,0) }
100%{ transform:translate3d(calc(-1 * var(--move-distance,10rem)),0,0) }
}
.grey{ filter:grayscale(100%) }