*{padding: 0;margin:0;border:0;list-style: none;}
a{text-decoration: none;transition: all 0.5s;}
.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: #747300;}
.wrap{position: relative;width: 100%;height: 3835px;overflow: hidden;}
.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{position: relative;width: 1200px;margin: 0 auto;}

.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: 35px;left: 0;}
.duration{position: absolute;text-align: center;width: 100%;top: 443px;left: 0; font-size: 18px; font-weight: bolder;}
.info_box{ width: 633px; height: 210px; background: url("../images/info_bg.webp") no-repeat; position: absolute; top: 611px; left: 284px;}
.pic{ width: 133px; height: 133px; position: absolute; left: 81px; top: 39px;}
.pic img{ max-width: 100%; height: auto;}
.pic_bg{ width: 170px; height: 161px; background: url("../images/pic_bg.webp") no-repeat; position: absolute; left: -22px; top: -14px;}
.info{ position: absolute; left: 240px; top: 42px; font-size: 14px; line-height: 25px;}
.points{ width: 298px; height: 38px; text-align: center; background: #e5905a; border: 2px solid #311800; color: #311800; border-radius: 5px; position: absolute; top: 133px; left: 234px; line-height: 38px; font-size: 22px; font-weight: bolder;}
.role1{ width: 421px; height: 443px; background: url("../images/role1.webp") no-repeat; position: absolute; right: -360px; top: -119px;}


.part2{top:866px;}
.title{ width: 100%; text-align: center; position: absolute; left: 0; top: 0;}
.part2_box{ width: 1313px; height: 667px; background: url("../images/part2_bg.webp") no-repeat; position: absolute; top: 120px; left: -73px;}
.part2_title{ width: 100%; text-align: center; position: absolute; left: 0; top: 100px; font-size: 20px; color: #606900; font-weight: 500; font-family: Elephant; line-height: 28px;}
.part2_txt{ position: absolute; top: 183px; left: 172px; color: #606900; font-size: 18px; line-height: 24px;}
.part2_txt p{ font-size: 20px; font-weight: bolder;}
.excList{width: 981px;display: flex;justify-content: space-between; position: absolute; left: 169px; top: 286px;}
.excBox{position: relative; width: 185px; height: 190px; cursor: pointer;}
.excBox .ed{ filter: grayscale(100%);}
.exchange{ width: 100%; height: 100%;}
.claimed{ width: 185px; height: 198px; background: url("../images/claimed.webp") no-repeat; position: absolute; top: 0; left: 0; display: none; pointer-events: none;}
.history,.redeem{ width: 216px; height: 81px; position: absolute; top: 497px;}
.history{ background: url("../images/history1.webp") no-repeat; left: 381px;}
.history:hover{ background: url("../images/history2.webp") no-repeat;}
.redeem{ background: url("../images/redeem1.webp") no-repeat; right: 381px;}
.redeem:hover{ background: url("../images/redeem2.webp") no-repeat;}


.part3{top: 1680px;}
.role2{ width: 432px; height: 469px; background: url("../images/role2.webp") no-repeat; position: absolute; left: -164px; top: -195px; pointer-events: none; z-index: 2;}
.part3_box{ width: 1330px; height: 580px; background: url("../images/part3_bg.webp") no-repeat; position: absolute; left: -65px; top: 0;}
.part3_title{ width: 100%; text-align: center; position: absolute; left: 0; top: 190px; font-size: 20px; color: #ebae20; font-weight: 500; font-family: Elephant; line-height: 28px;}
.part3_progress{ width: 866px; height: 12px; position: absolute; left: 197px; top: 193px; background: #000000;}
.part3_day{width: 172px; height: 49px; position: absolute; left: 0; top: 137px; z-index: 2;}
.actList{width: 1087px;display: flex;justify-content: space-between; position: absolute; left: 122px; top: 305px;}
.actBox{position: relative;width: 172px;height: 238px;}
.actBox .actRewards{width: 180px;height: 165px;background: url(../images/part3_box.webp) no-repeat;}
.actBox .actRewards.on{-webkit-animation: box 1s steps(25);animation: box 1s steps(25); -webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.actBox .actRewards.ed{ background-position: 0 -3960px;}
.actLight{display: none; position: absolute;top: -45px;left: -80px;width: 350px;height: 270px;background: url(../images/part3_light.webp) no-repeat;-webkit-animation: light 3s steps(54) infinite;animation: light 3s steps(54) infinite; z-index: 1;}
.checkIn{display: block;margin: 30px auto 0 auto; width: 167px;height: 63px;background: url(../images/checkin1.webp) no-repeat; position: relative; z-index: 2;}
.checkIn:hover{background: url(../images/checkin2.webp) no-repeat;}
.part3_swing,.exchange:hover{ animation:swing 2s infinite;}


.part4{top: 2359px;}
.part4_title{ width: 100%; text-align: center; position: absolute; left: 0; top: 187px; font-size: 20px; color: #ebae20; font-weight: 500; font-family: Elephant; line-height: 28px;}
.gameList {
    width: 1166px;
    display: -webkit-box; /* 兼容老版本WebKit内核浏览器，如旧版Safari、iOS Safari */
    display: -ms-flexbox; /* 兼容IE10 */
    display: flex; /* 标准写法 */
    position: absolute;
    left: 17px;
    top: 264px;
    -webkit-flex-wrap: wrap; /* Webkit内核兼容写法 */
    -ms-flex-wrap: wrap; /* IE兼容写法 */
    flex-wrap: wrap; /* 标准写法 */
    -webkit-box-pack: start; /* 老版本Webkit兼容 */
    -ms-flex-pack: start; /* IE兼容 */
    justify-content: flex-start; /* 标准写法 */

    /* 使用margin负值技巧模拟gap效果 */
    margin: -10px -38px; /* 抵消子元素margin，保持容器尺寸 */
}

/* 为子元素设置margin来模拟gap间距 */
.gameList > * {
    margin: 10px 38px; /* 模拟gap: 20px 76px的效果 */
}

/* 现代浏览器支持gap时，使用原生gap属性 */
@supports (gap: 20px 76px) {
    .gameList {
        gap: 20px 76px; /* 使用原生gap属性 */
        margin: 0; /* 重置margin */
    }
    .gameList > * {
        margin: 0; /* 重置子元素margin */
    }
}
.gameBox{position: relative; width: 338px; height: 334px;}
.game{ width: 338px; height: 290px; position: relative; z-index: 2;}
.gameBox .part4_play{display: block; width: 231px;height: 80px;background: url(../images/btn1.webp) no-repeat; position: relative; z-index: 2; position: absolute; left: 56.5px; bottom: 0; z-index: 1; font-size: 26px; line-height: 80px; color: #000000; text-align: center; font-weight: bolder;}
.gameBox:hover .part4_play{background: url(../images/btn2.webp) no-repeat;}
.role3{ width: 260px; height: 447px; background: url("../images/role3.webp") no-repeat; position: absolute; right: -207px; top: -41px;}
.role4{ width: 244px; height: 425px; background: url("../images/role4.webp") no-repeat; position: absolute; left: -217px; top: 780px;}


.part5{top: 3450px;}
.facebook,.discord{ width: 296px; height: 88px; position: absolute; top: 0;}
.facebook{ background: url("../images/facebook.webp") no-repeat; left: 256px;}
.facebook:hover{ background: url("../images/facebook2.webp") no-repeat;}
.discord{ background: url("../images/discord.webp") no-repeat; right: 256px;}
.discord:hover{ background: url("../images/discord2.webp") no-repeat;}


/*Footer*/
.footer{position: absolute;top: 290px;left: 50%;margin-left: -960px;padding-bottom: 10px; height: 85px;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{width: 670px; height: 654px; z-index:100; background: url("../images/pop.webp") no-repeat;
    margin-left:-335px!important;
    margin-top:-327px!important;
    left:50%;/*FF IE7*/
    top:50%;/*FF IE7*/
    margin-top:0px;
    position:fixed!important;/*FF IE7*/
    position:absolute;/*IE6*/
    _top:       expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/}
.pop_close{ width: 231px; height: 80px; cursor: pointer; background: url("../images/btn1.webp") no-repeat; margin: 0 auto; font-size: 26px; line-height: 80px; color: #000000; text-align: center; font-weight: bolder;}
.pop_close:hover{ background: url("../images/btn2.webp") no-repeat;}
.top_close{ width: 79px; height: 82px; cursor: pointer; background: url("../images/close.webp") no-repeat; position: absolute; top: 23px; right: 30px; cursor: pointer;}
.top_close:hover{ background: url("../images/close2.webp") no-repeat;}
.pop_text{display: flex; width: 60%;height: 220px;margin: 150px auto 0;align-items: center;text-align: center; font-size: 26px;color: #3c0603;line-height: 42px;}
.pop_text p{width: 100%;}
.pop_text2{display: flex; width: 60%;margin: 0 auto 20px auto; text-align: left; font-size: 24px;color: #3c0603;line-height: 35px;}
.pop_text2 p{width: 100%;}
.pop_title{ width: 100%; font-weight: bolder; text-align: center; font-size: 26px;color: #3c0603; margin-top: 150px;line-height: 70px;}
.pop_rewards{font-weight: bold;}
.btnList{ width: 470px; display: flex;justify-content: space-between; margin: 0 auto;}
.btnBox,.btnBox2,.btnBox3{ position: relative; width: 231px; height: 80px; background: url("../images/btn1.webp") no-repeat; font-size: 26px; color: #000000; text-align: center; font-weight: bolder;}
.btnBox:hover,.btnBox2:hover{ background: url("../images/btn2.webp") no-repeat;}
.btnBox,.btnBox3{ line-height: 80px;}
.btnBox,.btnBox2{ cursor: pointer;}
.btnBox2{ line-height: 25px; box-sizing: border-box; padding-top: 15px;}
.btnBox3{ display: none;}
.codeBox{ width: 300px; height: 50px; background: #ffffff; font-size: 20px; line-height: 50px; margin: 0 auto 20px auto; text-align: center; border: 2px #000000 solid; border-radius: 10px;}

/*宝箱摇摆动画*/
@-webkit-keyframes swing {
    70% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
    75% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    85% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    90% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    70% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
    75% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    85% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    90% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes light {
    to{background-position: 0 -14580px;}
}
@keyframes light {
    to{background-position: 0 -14580px;}
}
@keyframes box {
    to{background-position: 0 -4125px;}
}
@-webkit-keyframes box {
    to{background-position: 0 -4125px;}
}


@media screen and (max-width: 1800px) {
    .wrap{height: 3681.6px;}
    .bg,.part1,.part2,.part3,.part4,.part5{ -webkit-transform:perspective(1px) scale(0.96);-moz-transform:perspective(1px) scale(0.96);-ms-transform:perspective(1px) scale(0.96);-o-transform:perspective(1px) scale(0.96);transform:perspective(1px) scale(0.96);-webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
    .bg,.part1,.part2,.part3,.part4,.part5{-webkit-transform-origin: center 0;-moz-transform-origin: center 0;-ms-transform-origin: center 0;-o-transform-origin: center 0;transform-origin: center 0;}
    .part2{top: 831.36px;}
    .part3{top: 1612.8px;}
    .part4{top: 2264.64px;}
    .part5{top: 3312px;}
}

@media screen and (max-width: 1700px) {
    .wrap{height: 3528.2px;}
    .bg,.part1,.part2,.part3,.part4,.part5{ -webkit-transform:perspective(1px) scale(0.92);-moz-transform:perspective(1px) scale(0.92);-ms-transform:perspective(1px) scale(0.92);-o-transform:perspective(1px) scale(0.92);transform:perspective(1px) scale(0.92);}
    .part2{top: 796.72px;}
    .part3{top: 1545.6px;}
    .part4{top: 2170.28px;}
    .part5{top: 3174x;}
}

@media screen and (max-width: 1600px) {
    .wrap{height: 3374.8px;}
    .bg,.part1,.part2,.part3,.part4,.part5{ -webkit-transform:perspective(1px) scale(0.88);-moz-transform:perspective(1px) scale(0.88);-ms-transform:perspective(1px) scale(0.88);-o-transform:perspective(1px) scale(0.88);transform:perspective(1px) scale(0.88);}
    .part2{top: 762.08px;}
    .part3{top: 1478.4px;}
    .part4{top: 2075.92px;}
    .part5{top: 3036px;}
}

@media screen and (max-width: 1500px) {
    .wrap{height: 3221.4px;}
    .bg,.part1,.part2,.part3,.part4,.part5{ -webkit-transform:perspective(1px) scale(0.84);-moz-transform:perspective(1px) scale(0.84);-ms-transform:perspective(1px) scale(0.84);-o-transform:perspective(1px) scale(0.84);transform:perspective(1px) scale(0.84);}
    .part2{top: 727.44px;}
    .part3{top: 1411.2px;}
    .part4{top: 1981.56px;}
    .part5{top: 2898px;}
}

@media screen and (max-width: 1400px) {
    .wrap{height: 3068px;}
    .bg,.part1,.part2,.part3,.part4,.part5{ -webkit-transform:perspective(1px) scale(0.8);-moz-transform:perspective(1px) scale(0.8);-ms-transform:perspective(1px) scale(0.8);-o-transform:perspective(1px) scale(0.8);transform:perspective(1px) scale(0.8);}
    .part2{top: 692.8px;}
    .part3{top: 1344px;}
    .part4{top: 1887.2px;}
    .part5{top: 2760px;}
}

@media screen and (max-width: 1300px) {
    .wrap{height: 2914.6px;}
    .bg,.part1,.part2,.part3,.part4,.part5{ -webkit-transform:perspective(1px) scale(0.76);-moz-transform:perspective(1px) scale(0.76);-ms-transform:perspective(1px) scale(0.76);-o-transform:perspective(1px) scale(0.76);transform:perspective(1px) scale(0.76);}
    .part2{top: 658.16px;}
    .part3{top: 1276.8px;}
    .part4{top: 1792.84px;}
    .part5{top: 2622px;}
}