html,
body,
div,
p,
ul,
li,
dl,
dt,
dd,
em,
i,
span,
a,
img,
input,
h1,
h2,
h3,
h4,
h5,
dl,
dt,
dd {
    margin: 0;
    padding: 0
}

a,
img,
input {
    border: none;
}
/* html{
    font-size:cale(100 / 1080 *100vw);
}
@media (min-aspect-ratio: 1080 / 2000) and (any-pointer: coarse) {
    html {
        font-size: calc(100 / 1600 * 100vh);
        scroll-behavior: smooth;
    }
} */
body {
    font: 14px/1.75 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #f3efe6;
    /* width: 100%;
    height: 100vh; */
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:active,
a:hover {
    color: #fff;
}

ul,
li {
    list-style: none
}

*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
}

i {
    display: block;
}
@font-face {
    font-family: 'fzlty-zz';
    src: url(./fonts/fzlt-zhongzu.ttf);
} 
@font-face {
    font-family: 'fzlty';
    src: url(./fonts/fzlty.ttf);
} 
@keyframes page-1-music-icon-rotate-frame {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes gift-scale-frame1 {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

.wraper {
    position: relative;
    /* width: 100%;
    height: 100vh; */
    width: 10.8rem;
    overflow: hidden;
    margin: 0 auto;
}

/* 主页面 */
.main-content {
    width: 100%;
    height: 100vh;
    position: relative;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/bg.jpg) no-repeat  50% 0 / 100% 100%;
    /* background-size: cover; */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
}

.active-rule{
    display: none;
    text-decoration: underline;
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    font-size: .32rem;
}

/* 惊喜内容区域 */
.surprise-content {
    width: 10.8rem;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.surprise-content-inner {
    width: 10.8rem;
    min-height: 49.5rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/bg-contentwx.jpg) no-repeat 50% 0 / 10.8rem auto;
    padding: 0rem .5rem;
    position: relative;
    box-sizing: border-box;
    border: 1px solid transparent;
}

/* QQ登录时的样式 */
.surprise-content-inner.QQ-login {
    min-height: 58rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/bg-content.jpg) no-repeat 50% 0 / 10.8rem auto;
}

/* QQ登录时显示更多资讯部分 */
.QQ-login .more-info-section {
    display: block !important;
}

/* 默认微信登录时隐藏更多资讯部分 */
/* .more-info-section {
    display: none ;
} */

.top-distance{
    top: 13rem;
}
.top-distance4{
    top: 12.1rem;
}

/* 礼品展示区域样式 */
.gift-section {
    width: 100%;
    margin-bottom: 1rem;
    text-align: center;
    position: relative;
    /* padding: 0 0.5rem; */
}

.beta-title-01 {
    width: 100%;
    height: 1.66rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/tit01.png) no-repeat 50% 0 / 100% auto;
    margin: 0 auto;
}

.beta-title-02 {
    width: 100%;
    height: 1.66rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/tit02.png) no-repeat 50% 0 / 100% auto;
    margin: 0 auto;
}

.beta-title-03 {
    width: 100%;
    height: 1.66rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/tit03.png) no-repeat 50% 0 / 100% auto;
    margin: 0 auto;
}

.beta-title-04{
    width: 100%;
    height: 1.66rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/tit04.png) no-repeat 50% 0 / 100% auto;
    margin: 0 auto;
}

.gift-section .world-font{
    width: 100%;
    text-align: center;
    color: #272727;
    font-size: 0.35rem;
    padding: 0;
    font-family: 'fzlty-zz';
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gift-section p {
    width: 100%;
    text-align: center;
    color: #272727;
    font-size: 0.35rem;
    padding: 0 1rem;
    font-family: 'fzlty-zz';
}

.gift-section .rule-btn {
    display: inline-block;
    width: 1.95rem;
    height: 0.36rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/rule-btn.png) no-repeat 50% 50% / contain;
    margin-left: 0.2rem;
    vertical-align: middle;
}
.gift-box{
    width: 8.86rem;
    height: 5.03rem;
    margin: 0.2rem auto 0.45rem;
}
.gift-picture {
    width: 8.86rem;
    height: 4.97rem;
    margin: 0.2rem auto 0.45rem;
}
.picture-box{
    width: 4.26rem;
    height: 5.03rem;
}
.gift-picture img ,
.picture-box img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gift-login-btn {
    display: inline-block;
    width: 5.9rem;
    height: 1.4rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/login-btn.png) no-repeat 50% 50% / contain;
    margin: 0 auto;
}

.gift-appointment-btn {
    /* display: inline-block; */
    width: 4.91rem;
    height: 1.26rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/appointment-btn.png) no-repeat 50% 50% / contain;
    margin: 0 auto;
}
.gift-get-btn{
    width: 4.02rem;
    height: 1.1rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/btn-had-booking.png) no-repeat 50% 50% / contain;
    margin: 0 auto;
}

.gift-invite-btn {
    display: inline-block;
    width: 4.91rem;
    height: 1.26rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/invite-btn.png) no-repeat 50% 50% / contain;
    margin: 0 auto;
}

/* 组队区域特殊样式 */
.team-section {
    margin-top: 1.2rem;
}

.team-section .gift-picture {
    margin: .2rem auto .6rem;
}

.friend-avatars {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: .6rem 0;
}

.friend-avatar {
    width: 2.19rem;
    height: 2.02rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/user-bg.png) no-repeat 50% 50% / contain;
}

.friend-avatar img {
    width: 1.73rem;
    height: 1.75rem;
    border-radius: 50%;
}

.gift-invite-btn-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.team-note {
    display: inline-block;
    width: 2.7rem;
    height: 0.5rem;
    line-height: .5rem;
    text-align: center;
    font-size: 0.24rem;
    margin-top: .5rem;
    opacity: 0.8;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 0.25rem;
}

/* 更多资讯 */
.join-box{
    /* width: 8.86rem; */
    padding: 0 .8rem;
}
.icon-box{
    width: 3.71rem;
    height: 4.64rem;
    margin: 0.3rem auto;
}

.icon-box img{
    width: 100%;
    height: 100%;
}
.channel-btn{
    display: inline-block;
    width: 2.66rem;
    height: 1.02rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/channel-btn.png) no-repeat 50% 50% / contain;
    margin: 0 auto;
}

.chat-btn{
    display: inline-block;
    width: 2.66rem;
    height: 1.02rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/chat-btn.png) no-repeat 50% 50% / contain;
    margin: 0 auto;
}

/* 返回按钮 */
.back-btn {
    position: absolute;
    top: .4rem;
    left: .4rem;
    width: .8rem;
    height: .8rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: .46rem;
    z-index: 101;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.nav-wrapper {
    width: 10.8rem;
    height: 2.7rem;
    padding: 0 .5rem;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 50;
    user-select: none;
    transform: translateX(-50%);
    overflow: hidden;
}

.d-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-wrapper-inner {
    width: inherit;
    height: inherit;
    position: relative;
    z-index: 10;
}

.left-icon {
    width: 3.36rem;
    height: .69rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/logo.png) 100% 0 / contain no-repeat;
}

.page-login {
    width: 100%;
    height: .68rem;
    line-height: .68rem;
    padding-left: .9rem;
    color: #262625;
    font-size: .38rem;
}

.display-wx{
    width: 1.9rem;
    height: 0.44rem;
    position: absolute;
    top: .4rem;
    right: 0;
}
.display-qq{
position: absolute;
    top: 1rem;
    left: 30%;
width: 2.8rem;
height: 0.43rem;
}
.display-wx img,.display-qq img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.outlogin-font {
    color: #262625;
    font-size: .38rem;
}
.font-w{
    width: 1.6rem;
}
.user-name{
    color: #f3efe3;
    font-size: .38rem;
}
.account-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 2.6rem;
}

.login,
.unlogin {
    display: flex;
    justify-content: flex-end;
}
.slogan{
    width: 10.8rem;
    height: 13.39rem;
    position: absolute;
    left: 50%;
    top: 2.65rem;
    transform: translateX(-50%);
}
.slogan img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.content-mian {
    position: absolute;
    /* bottom: 3.1rem; */
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
}

.content-mian::after {
    content: "";
    width: 1rem;
    height: 1rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/award-icon.png) 50% 50% / 100% 100% no-repeat;
    position: absolute;
    top: -0.35rem;
    right: -0.45rem;
    pointer-events: none;
    user-select: none;
    animation: gift-scale-frame1 6s steps(60, end) infinite forwards;
    animation-iteration-count: infinite;
}

.claim-surprise {
    width: 6.61rem;
    height: 1.43rem;
    text-align: center;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/collect-btn.png) no-repeat 50% 50% / contain;
    user-select: none;
    cursor: pointer;
    display: block;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.footer {
    width: 10.8rem;
    height: 5.2rem;
    background: url(../img/footer-bg.png) 50% 0 / cover no-repeat;
    position: absolute;
    left: 0;
    bottom: -5rem;
    z-index: 30;
}

.footer::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/star.png) 50% 50% / 100% 100% no-repeat;
    position: absolute;
    top: 0;
    left: .55rem;
    pointer-events: none;
    user-select: none;
    animation: page-1-music-icon-rotate-frame 9s linear infinite forwards;
}

.footer::after {
    content: "";
    width: .16rem;
    height: .16rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/star.png) 50% 50% / 100% 100% no-repeat;
    position: absolute;
    top: -.2rem;
    left: 1.8rem;
    z-index: 5;
    pointer-events: none;
    user-select: none;
    animation: page-1-music-icon-rotate-frame 6s linear infinite forwards;
}

.foot-main-wrapper {
    width: 80vw;
    height: 2rem;
}

.f-box {
    display: flex;
    justify-content: center;
    margin-top: 1.6rem;
}

.footer-icon-tencent-game {
    width: 2.14rem;
    height: .38rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/logo-tencent.png) 50% 50% / contain no-repeat;
    margin-right: .6rem;
}

.footer-icon-morefun {
    width: 1.65rem;
    height: .42rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/logo-morefun.png) 50% 50% / contain no-repeat;
    transform: translateY(.02rem);
}

#afooter .foot,
#afooter a {
    color: #b2b2b2;
    text-align: center;
    font-size: .18rem;
}

.footer-btn-top {
    width: 1.42rem;
    height: 1.45rem;
    background: url(https://game.gtimg.cn/images/rocom/act/a20250528childhood/btn-top.png) 50% 50% / 100% 100% no-repeat;
    background-size: contain;
    position: absolute;
    top: -.8rem;
    right: .36rem;
    z-index: 50;
}


/* 防止页面被拖拽 */
body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* 动画优化 */
.main-content,
.surprise-content {
    will-change: transform, right;
}

/* 滚动优化 */
.surprise-content {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.surprise-content::-webkit-scrollbar {
    display: none;
}

/* 惊喜模式样式 */
body.surprise-mode {
    overflow: hidden;
    position: fixed;
    width: 10.8rem;
    /* height: 100vh; */
}

/* 确保按钮可点击 */
.gift-login-btn,
.gift-appointment-btn,
.gift-invite-btn,
.rule-btn,
.back-btn,
.claim-surprise {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
}

.landscape{
    display: none; 
    width: 100vw;
    height: 100vh;
    background-color: #333;
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
  }
  .landscape img{
    display: block; 
    width: 25vh;
    height: 25vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-80%);
  }
  .landscape::after{
    content: "为了更好的体验，请旋转手机";
    position: absolute;
    font-size: .8rem;
    color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%,200%);
    z-index: 9999;
  }