*{margin: 0;padding: 0;border: 0;outline: none;list-style: none;}
a,.part3_claim,.part3_copy,.part4_play,.er_box .swiper-button-prev,.ir_box .swiper-button-prev2,.er_box .swiper-button-next,.ir_box .swiper-button-next2{text-decoration: none;-webkit-transition: all 0.45s;transition: all 0.45s;}
a:hover{text-decoration: underline;}
.gm-offical-top .sign-box .btn{font-size: 12px; color: #333;}
.clear{ clear: both;}


body{ position: relative; width: 100%; min-width: 1200px; font-size: 14px; font-family: Arial; background-color: #f6f6f6;}
.wrap{ position: relative; width: 100%; height: 5036px; overflow: hidden; height: calc(var(--base-height, 5036px) * var(--scale-factor, 1));}
.bg,.bg2{position: absolute;top: 0;left: 50%;width: 1920px;height: 100%;margin-left: -960px;z-index: 0;}
.bg2{height: 1080px;}
.bg img{display: block;}
.main_box{position: relative;width: 1200px;margin: 0 auto;}
#snowbox{ position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none;}

.r2_games{position: absolute;top: 19px;left: 130px;}
.part1,.part2,.part3,.part4,.part3_cloud,.part3_cloud2{position:absolute;left: 50%;margin-left: -960px; width: 1920px;}
.part1{top: 0;}
.slogan{position: absolute;text-align: center;width: 100%;top: 280px;left: 0;}
.duration{ width: 100%; text-align: center; position: absolute; left: 0; top: -20px;}


.part2{top:432px; top: calc(var(--part2-top, 432px) * var(--scale-factor, 1));}
.part2_bg{ width: 1118px; height: 873px; background: url("../images/part2_bg.webp") no-repeat; position: absolute; left: 41px; top: 0;}
.part2_title,.part3_title,.part4_title{ width: 100%; text-align: center; position: absolute; left: 0;}
.part2_title{ top: 17px;}
.rule,.rule2{ width: 100%; text-align: center; position: absolute; left: 0; font-size: 24px; line-height: 28px;}
.rule{ color: #ffffff; top: 135px;}
.part2_box{ width: 474px; height: 454px; background: url("../images/part2_bg.png") no-repeat; position: absolute; top: 250px; left: 80px;}
.part2_check,.part2_redeem{ position: absolute; bottom: -120px;}
.part2_check{ width: 242px; height: 119px; background: url("../images/check.png") no-repeat; left: -10px;}
.part2_check:hover{ background: url("../images/check2.png") no-repeat;}
.part2_redeem{ width: 237px; height: 120px; background: url("../images/redeem.png") no-repeat; right: -10px;}
.part2_redeem:hover{ background: url("../images/redeem2.png") no-repeat;}
.part2_ranking{ width: 100%; text-align: center; font-size: 24px; font-weight: bolder; color: #ef383b; position: absolute; left: 0; top: 115px;}
.part2_score{ width: 274px; height: 36px; background: #62c147; border-radius: 10px; position: absolute; top: 360px; left: 100px; font-weight: bolder; font-size: 24px; line-height: 36px; color: #ffffff; text-align: center;}
.part2_list{ width: 274px; position: absolute; top: 160px; left: 100px; font-size: 19px; color: #35425f;}
.part2_list li{ margin: 15px 0;}
.part2_number{ width: 10%; float: left; text-align: left;}
.part2_name{ width: 70%; float: left; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.part2_score2{ width: 20%; float: left; text-align: center;}

.game{position: relative; width: 442px; height: 552px; position: absolute; top: 262px; right: 80px;}
.back{ width: 442px; height: 552px; background: rgba(0,0,0,0.8); margin: 0 auto;position: absolute; z-index: 10; top: 0; left: 0; right: 0;display: none;}
.container{ position: relative; width: 442px; height: 552px; background: #a0a0a0; margin: 0 auto; padding: 30px 0;box-sizing: border-box;}
.left,.right{ position: absolute; top: 5%;color: #5f493b;font-size: 1.1rem;font-weight: 600;}
.left{ left: 10%;}
.right{ right: 10%;}
.main{ width: 80%; margin: 10% auto 6%; background: #ef383b; text-align: center;}
.list1{ width: 100%;}
.list1>img{ width: 100%; display: block;}
#begin,#reset{position: absolute; left: 50%; width: 45%; -webkit-transform: translateX(-50%);transform: translateX(-50%);}
#begin{ bottom: 10%; }
#reset{ top: 45%; }
#begin img,#reset img{ width: 100%; display: block;}


.part3{top: 1354px; top: calc(var(--part3-top, 1354px) * var(--scale-factor, 1));}
.part3_title{ top: 51px;}
.er_box,.ir_box{ width: 100%; position: absolute; left: 0;}
.er_box{ top: 155px;}
.ir_box{ top: 845px;}
.part3_text{ width: 100%; position: absolute; left: 0; top: 0; font-size: 22px; color: #ffffff; line-height: 24px; text-align: center;}
.er_role{ width: 567px; height: 573px; background: url("../images/role1.webp") no-repeat; position: absolute; top: 20px; left: -40px; z-index: 1;}
.ir_role{ width: 461px; height: 490px; background: url("../images/role2.webp") no-repeat; position: absolute; top: 110px; right: -5px; z-index: 1; pointer-events: none;}
.part3_bg{ width: 572px; height: 343px; background: url("../images/part3_bg.png") no-repeat; position: absolute; top: 158px; left: 314px; z-index: 2;}

/* 轮播图 */
.swiper{width: 560px;height: 333px; position: absolute; left: 3px; top: 3.5px;}
.swiper-slide{text-align: center;display: flex;justify-content: center;align-items: center;}
.swiper-slide img{display: block;width: 560px;height: 333px;object-fit: cover;z-index: 2;}
.er_box .swiper-button-prev,.er_box .swiper-button-next,.ir_box .swiper-button-prev2,.ir_box .swiper-button-next2{ position: absolute; width: 57px; height: 62px; z-index: 5; cursor: pointer; top: 310px;}
.er_box .swiper-button-prev:after,.er_box .swiper-button-next:after,.ir_box .swiper-button-prev2:after,.ir_box .swiper-button-next2:after{ display: none; }
.er_box .swiper-button-prev,.ir_box .swiper-button-prev2{ left: 250px; background: url("../images/lf.png") no-repeat; -webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite;-o-animation: bounce-down 1.5s linear infinite;-ms-animation: bounce-down 1.5s linear infinite;-moz-animation: bounce-down 1.5s linear infinite;}
.er_box .swiper-button-next,.ir_box .swiper-button-next2{ right: 250px; background: url("../images/rg.png") no-repeat; -webkit-animation: bounce-down2 1.5s linear infinite;animation: bounce-down2 1.5s linear infinite;-o-animation: bounce-down2 1.5s linear infinite;-ms-animation: bounce-down2 1.5s linear infinite;-moz-animation: bounce-down2 1.5s linear infinite;}
.er_box .swiper-button-prev:hover,.ir_box .swiper-button-prev2:hover{ background: url("../images/lf2.png") no-repeat;}
.er_box .swiper-button-next:hover,.ir_box .swiper-button-next2:hover{ background: url("../images/rg2.png") no-repeat;}


.banner_bg,.banner_bg2{ height: 381px; position: absolute; z-index: 5; pointer-events: none;}
.banner_bg{ width: 459px; background: url("../images/banner_bg.png") no-repeat; top: -18px; right: -120px;}
.banner_bg2{ width: 650px; background: url("../images/banner_bg2.png") no-repeat; top: -19px; left: -120px;}
.part3_claimbox{ width: 274px; height: 44px; background: #d6d6d6; font-size: 18px; line-height: 44px; color: #35425f; border-radius: 10px; position: absolute; top: 517px; left: 463px; text-align: center;}
.part3_claim{ width: 242px; height: 119px; background: url("../images/claim.png") no-repeat; position: absolute; cursor: pointer;}
.part3_claim,.part3_copy,.part3_success{top: 542px; left: 346px;}
.part3_claim:hover{ background: url("../images/claim2.png") no-repeat;}
.part3_play{ width: 242px; height: 120px; background: url("../images/play.png") no-repeat; position: absolute; top: 542px; right: 349px;}
.part3_play:hover{ background: url("../images/play2.png") no-repeat;}
.part3_copy{ width: 242px; height: 119px; background: url("../images/copy.png") no-repeat; position: absolute; cursor: pointer; display: none;}
.part3_copy:hover{ background: url("../images/copy2.png") no-repeat;}
.part3_success{ width: 242px; height: 119px; background: url("../images/success.png") no-repeat; position: absolute;}


.part3_cloud{ height: 72px; background: url("../images/part3_cloud.png") no-repeat; top: -45px; z-index: 2;}
.part3_cloud2{ height: 72px; background: url("../images/part3_cloud2.png") no-repeat; top: 1514px; z-index: 2;}
/* 为所有装饰元素设置不同的动画延迟，实现交错运动 */
.part3_decoration{ animation-delay: 0s;}
.part3_decoration2{ animation-delay: 1.25s;}
.part3_decoration3{ animation-delay: 2.5s;}
.part3_decoration4{ animation-delay: 3.75s;}
.part3_decoration,.part3_decoration2,.part3_decoration3,.part3_decoration4{ position: absolute; pointer-events: none; animation-name: gentleFloat; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
.part3_decoration{ width: 440px; height: 245px; background: url("../images/part3_decoration.webp") no-repeat; left: -360px; top: 0;}
.part3_decoration2{ width: 462px; height: 266px; background: url("../images/part3_decoration2.webp") no-repeat; right: -360px; top: 0;}
.part3_decoration3{ width: 543px; height: 260px; background: url("../images/part3_decoration3.webp") no-repeat; left: -360px; top: 1295px;}
.part3_decoration4{ width: 493px; height: 295px; background: url("../images/part3_decoration4.webp") no-repeat; right: -360px; top: 1260px;}


.part4{top: 2909px; top: calc(var(--part4-top, 2909px) * var(--scale-factor, 1));}
.part4_title{ top: 48px;}
.rule2{ color: #293c79; top: 170px;}
.part4_box{ width: 1137px; position: absolute; top: 230px; left: 31.5px;  display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 20px 39px;}
.part4_inbox{ width: 549px; height: 365px; position: relative;}
.part4_play{ width: 232px; height: 92px; background: url("../images/playnow.webp") no-repeat; position: absolute; bottom: 0; left: 158.5px;}
.part4_inbox:hover .part4_play{ background: url("../images/playnow2.webp") no-repeat;}


.facebook,.discord{ width: 300px; height: 89px; position: absolute; top: 1816px;}
.facebook{ background: url("../images/facebook.png") no-repeat; left: 256px;}
.facebook:hover{ background: url("../images/facebook2.png") no-repeat;}
.discord{ background: url("../images/discord.png") no-repeat; right: 256px;}
.discord:hover{ background: url("../images/discord2.png") no-repeat;}

/*Footer*/
.footer{ position: absolute; top: 2017px; left: 50%; margin-left: -960px;padding-bottom: 10px; height: 100px;width:1920px;background-color: #191919;}
.footer .inner { position: relative; min-width: 960px; max-width: 1200px; margin: 0 auto;}
.footer .footer-hd { margin-left:33.21%; overflow: hidden; zoom:1;}
.footer .footer-hd li { float:left; margin-top:26px; color: #b2b1af;}
.footer .footer-hd li a {float:left;color: #b2b1af;}
.footer p{padding-top:20px; color: #b2b1af; text-align: center; font-size:12px;}
.footer .i-separation {position:relative; top:5px; float:left; width:0; height:10px; margin:0 17px 0 17px; border-right: 1px solid #b2b1af;}


.mask { width: 100%; height: 100%; background: #000; opacity: .74; filter: alpha(opacity=74); position: fixed; left: 0; top: 0; z-index: 99;}
.pop { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 564px; height: 230px; z-index: 100; background: url("../images/pop.webp") no-repeat;}
.pop_close { width: 24px; height: 24px; cursor: pointer; background: url("../images/pop_close.png") no-repeat; position: absolute; top: 20px; right: 0;}
.pop_close:hover { animation: rotate360 0.6s ease-in-out 1;}
.pop_text { display: flex; justify-content: center; align-items: center; width: 70%; height: 100%; text-align: center; font-size: 20px; color: #ffffff; line-height: 28px; margin: 0 auto;}
.pop_text p { width: 100%;}


@keyframes bounce-down { 70% {transform: translateX(-3px);} 80%{transform: translateX(0);} 90% {transform: translateX(3px);} 100% {transform: translateX(0);}}
@-moz-keyframes bounce-down { 70% {-moz-transform: translateX(-3px);} 80%{-moz-transform: translateX(0);} 90% {-moz-transform: translateX(3px);} 100% {-moz-transform: translateX(0);}}
@-webkit-keyframes bounce-down { 70% {-webkit-transform: translateX(-3px);} 80%{-webkit-transform: translateX(0);} 90% {-webkit-transform: translateX(3px);} 100% {-webkit-transform: translateX(0);}}
@-ms-keyframes bounce-down { 70% {-ms-transform: translateX(-3px);} 80%{-ms-transform: translateX(0);} 90% {-ms-transform: translateX(3px);} 100% {-ms-transform: translateX(0);}}
@-o-keyframes bounce-down { 70% {-o-transform: translateX(-3px);} 80%{-o-transform: translateX(0);} 90% {-o-transform: translateX(3px);} 100% {-o-transform: translateX(0);}}

@keyframes bounce-down2 { 70% {transform: translateX(3px);} 80%{transform: translateX(0);} 90% {transform: translateX(-3px);} 100% {transform: translateX(0);}}
@-moz-keyframes bounce-down2 { 70% {-moz-transform: translateX(3px);} 80%{-moz-transform: translateX(0);} 90% {-moz-transform: translateX(-3px);} 100% {-moz-transform: translateX(0);}}
@-webkit-keyframes bounce-down2 { 70% {-webkit-transform: translateX(3px);} 80%{-webkit-transform: translateX(0);} 90% {-webkit-transform: translateX(-3px);} 100% {-webkit-transform: translateX(0);}}
@-ms-keyframes bounce-down2 { 70% {-ms-transform: translateX(3px);} 80%{-ms-transform: translateX(0);} 90% {-ms-transform: translateX(-3px);} 100% {-ms-transform: translateX(0);}}
@-o-keyframes bounce-down2 { 70% {-o-transform: translateX(3px);} 80%{-o-transform: translateX(0);} 90% {-o-transform: translateX(-3px);} 100% {-o-transform: translateX(0);}}


/* 定义旋转关键帧动画 */
@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 为Webkit内核浏览器添加兼容性前缀 */
@-webkit-keyframes rotate360 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}


/* 为包含图片的元素添加一个微浮动动画，模拟风吹叶动的效果 */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0) rotate(0.5deg);
    }
    25% {
        transform: translateY(-2px) rotate(-0.3deg);
    }
    50% {
        transform: translateY(1px) rotate(0.7deg);
    }
    75% {
        transform: translateY(-1px) rotate(-0.5deg);
    }
}


:root {
    /* 定义缩放因子变量，并为不支持CSS变量的浏览器提供静态降级值 */
    --scale-factor: 1;
    /* 定义基础高度和各部分位置，同样提供回退值 */
    --base-height: 5036px;
    --part2-top: 432px;
    --part3-top: 1354px;
    --part4-top: 2909px;
}

.bg, .part1, .part2, .part3, .part4 {
    /* 为transform属性提供回退，不支持CSS变量的浏览器会忽略第二条规则 */
    transform: perspective(1px) scale(1);
    transform: perspective(1px) scale(var(--scale-factor, 1)); /* [4](@ref) */
    transform-origin: center 0;
    transition: all 0.5s ease;
}

@media screen and (max-width: 1800px) {
    :root { --scale-factor: 0.96; }
}
@media screen and (max-width: 1700px) {
    :root { --scale-factor: 0.92; }
}
@media screen and (max-width: 1600px) {
    :root { --scale-factor: 0.88; }
}
@media screen and (max-width: 1500px) {
    :root { --scale-factor: 0.84; }
}
@media screen and (max-width: 1400px) {
    :root { --scale-factor: 0.8; }
}