*{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: 5714px; overflow: hidden; height: calc(var(--base-height, 5714px) * 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;}
.post{ position: absolute;}

.r2_games{position: absolute;top: 19px;left: 130px;}
.part1,.part2,.part3,.part4,.part5{position:absolute;left: 50%;margin-left: -960px; width: 1920px;}
.part1{top: 0;}
.slogan{position: absolute;text-align: center;width: 100%;top: 147px;left: 0;}
.part1_time{top: 239px;left: 435px;text-align: center; background-color: #e2a006;color: #fff;width: 330px;height: 40px;font-size: 24px; line-height: 40px;border-radius: 15px;}


.part2{top:336px; top: calc(var(--part2-top, 336px) * var(--scale-factor, 1));}
.part2_eggbox{ width: 1150px; left: 25px; top: 0;}
.part2_egg1,.part2_egg2,.part2_egg3{ width: 400px; height: 400px; top: 0; background: url("../images/part2_egg1.webp") no-repeat;}
.part2_egg1{left: 0;}
.part2_egg2{ left: 375px;}
.part2_egg3{ right: 0;}
.part2_eggbox .on{-webkit-animation: box 2s steps(34);animation: box 2s steps(34); -webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.part2_eggbox .ed{ background-position: 0 -13200px;}
.part2_eggbg1,.part2_eggbg2,.part2_eggbg3{ width: 335px; height: 56px; background: url("../images/part2_eggbg.webp") no-repeat; top: 350px;}
.part2_eggbg1{ left: 32.5px;}
.part2_eggbg2{ left: 407.5px;}
.part2_eggbg3{ right: 32.5px;}
.part2_checkin{ width: 287px; height: 139px; background: url("../images/part2_checkin.webp") no-repeat; left: 56.5px; bottom: -140px; cursor: pointer;}
.part2_checkin:hover{ background: url("../images/part2_checkin2.webp") no-repeat;}
.part2_egg1 .ed,.part2_egg2 .ed,.part2_egg3 .ed{ background: url("../images/part2_checkin.webp") no-repeat; filter: grayscale(100%); cursor: unset;}
.part2_rules,.part3_rules,.part4_rules{ width: 1161px; color: #ffffff; background: #3c9a99; border-radius: 25px; left: 20px; box-sizing: border-box; padding: 25px 40px; font-size: 18px; line-height: 30px;}
.part2_rules{ top: 584px;}
.part2_check,.part2_redeem{ width: 514px; height: 144px; top: 774px;}
.part2_check{ background: url("../images/part2_check.webp") no-repeat; left: 69px;}
.part2_redeem{ background: url("../images/part2_redeem.webp") no-repeat; right: 69px;}
.part2_check:hover{ background: url("../images/part2_check2.webp") no-repeat;}
.part2_redeem:hover{ background: url("../images/part2_redeem2.webp") no-repeat;}


.part3{top: 1307px; top: calc(var(--part3-top, 1307px) * var(--scale-factor, 1));}
.title{ width: 100%; text-align: center; left: 0; top: 0;}
.part3_rules,.part4_rules{ top: 170px;}
.rabbit{ width: 130px; height: 120px; background: url("../images/rabbit.gif") no-repeat; top: -105px; left: 0;}
.aom_box{ width: 100%; left: 0; top: 320px;}
.part3_text{ width: 1080px; left: 60px; top: 0; font-size: 18px; color: #ffffff; line-height: 30px; text-align: center;text-shadow: 4px 4px 8px #3c9a99;}
.part3_text img{ margin-bottom: 15px;}
.part3_bg{ width: 1363px; height: 524px; background: url("../images/part3_bg.webp") no-repeat; position: absolute; top: 147px; left: -121px; z-index: 2;}
/* 轮播图 */
.swiper{width: 775px;height: 440px; position: absolute; left: 40px; top: 42px;}
.swiper-slide{text-align: center;display: flex;justify-content: center;align-items: center;}
.swiper-slide img{display: block;width: 775px;height: 440px;object-fit: cover;z-index: 2;}
.aom_box .swiper-button-prev,.aom_box .swiper-button-next{ position: absolute; width: 57px; height: 62px; z-index: 5; cursor: pointer; top: 260px; background: url("../images/arrow.png") no-repeat;}
.aom_box .swiper-button-prev:after,.aom_box .swiper-button-next:after{ display: none; }
.aom_box .swiper-button-prev{transform: rotateY(180deg); left: 270px;}
.aom_box .swiper-button-next{ right: 190px;}
.part3_redeem{ width: 398px; height: 113px; background: url("../images/part3_redeem.webp") no-repeat; left: 402px; top: 697px;}
.part3_redeem:hover{ background: url("../images/part3_redeem2.webp") no-repeat;}


.part4{top: 2481px; top: calc(var(--part4-top, 2481px) * var(--scale-factor, 1));}
.part4_rules,.part4_tips{ text-align: center;}
.part4_tips{ width: 424px; color: #ffffff; background: #3c9a99; border-radius: 25px; top: 270px; left: 388px; box-sizing: border-box; font-size: 24px; padding: 20px 0;}
.part4_box{ width: 1070px; top: 365px; left: 65px;  display: flex; justify-content: flex-start; flex-wrap: wrap;}
.part4_box > * { margin-right: 50px; margin-bottom: 123px;}
.part4_box > *:nth-child(2n) { margin-right: 0;}
.part4_inbox{ width: 510px; height: 365px; background: url("../images/part4_bg.webp") no-repeat; position: relative;}
.part4_pic{ left: 67px; top: 117px;}
.part4_claimbox{ width: 230px; height: 30px; background: #f74343; font-size: 14px; line-height: 30px; color: #fff; border-radius: 25px; top: 170px; left: 73px; text-align: center; border: 3px solid #fff;}
.part4_claim,.part4_copy,.part4_success,.part4_play{ width: 172px; height: 60px; top: 385px;}
.part4_claim,.part4_copy,.part4_success{ left: 71px;}
.part4_claim,.part4_copy{ cursor: pointer;}
.part4_claim{ background: url("../images/part4_claim.webp") no-repeat;}
.part4_play{ background: url("../images/part4_play.webp") no-repeat; right: 74px;}
.part4_copy{ background: url("../images/part4_copy.webp") no-repeat; display: none;}
.part4_success{ background: url("../images/part4_success.webp") no-repeat;}
.part4_ico{ width: 34px; height: 31px; left: 25px; top: 141px;}


.part5{top: 4808px; top: calc(var(--part5-top, 4808px) * var(--scale-factor, 1));}
.part5_gamebox{ width: 1161px; height: 155px; left: 0; top: 300px;}
.part5_gamebox ul{ display: flex; justify-content: space-between; padding: 0; list-style: none;}
.part5_gamebox li{ width: 273px;}
.part5_gamebox a:hover,.facebook:hover,.discord:hover,.aom_box .swiper-button-prev:hover,.aom_box .swiper-button-next:hover,.part4_claim:hover,.part4_play:hover,.part4_copy:hover{ filter: brightness(120%);}
.part5_fbbox{ width: 882px; height: 124px; background: #c4e4dc; border: 2px solid #f4ffff; top: 522px; left: 159px; border-radius: 94px;}
.facebook,.discord{ width: 300px; height: 89px; position: absolute; top: 20px;}
.facebook{ background: url("../images/facebook.png") no-repeat; left: 120px;}
.discord{ background: url("../images/discord.png") no-repeat; right: 120px;}
.part5_tips{ width: 100%; text-align: center; left: 0; top: 700px; font-size: 18px; color: #3c9a99;}

/*Footer*/
.footer{ position: absolute; top:800px; left: 50%; margin-left: -960px;padding-bottom: 10px; height: 100px;width:1920px;background-color: #3c9a99;}
.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: #fff;}
.footer .footer-hd li a {float:left;color: #fff;}
.footer p{padding-top:20px; color: #fff; 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 #fff;}


.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: 910px; height: 278px; z-index: 100; background: url("../images/pop.webp") no-repeat;}
.pop_close { width: 61px; height: 61px; cursor: pointer; background: url("../images/pop_close.webp") no-repeat; position: absolute; top: 58px; right: 70px;}
.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; box-sizing: border-box; margin-top: 20px;}
.pop_text p { width: 100%;}



/* 定义旋转关键帧动画 */
@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 box {
    to{background-position: 0 -13600px;}
}
@-webkit-keyframes box {
    to{background-position: 0 -13600px;}
}



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

.bg, .part1, .part2, .part3, .part4, .part5 {
    /* 为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; }
}