html, body { background-color:#141414; }

.app { position:relative; display:block; width:1280px; height:4288px; margin:0 auto; }
.app .bgs { position:absolute; top:0; left:0; right:0; }
.app .bgs .bg { display:block; width:100%; height:1072px; background-repeat:no-repeat; background-position:50% 50%; }
.app .bgs .bg.bg1 { background-image:url("../images/bg1.png"); }
.app .bgs .bg.bg2 { background-image:url("../images/bg2.png"); }
.app .bgs .bg.bg3 { background-image:url("../images/bg3.png"); }
.app .bgs .bg.bg4 { background-image:url("../images/bg4.png"); }
.app .logo { position:absolute; top:40px; right:40px; display:block; width:300px; height:142px; }
.app .logo img { display:block; width:100%; height:100%; }
.app .invitation { position:absolute; top:2070px; left:50%; display:block; width:1018px; margin-left:-509px; }
.app .invitation .invitation-header { display:block; height:64px; background-image:linear-gradient(to right, transparent, #31126b, transparent); margin-bottom:50px; color:#fff; font-size:48px; text-align:center; line-height:64px; }
.app .invitation .invitation-header span { color:#ffb300; }
.app .invitation .invitation-body { display:block; }
.app .invitation .invitation-body .input { position:relative; display:block; width:1018px; height:176px; background:url("../images/input.png") no-repeat 50% 50%; }
.app .invitation .invitation-body .input input[type="text"] { display:block; width:100%; height:100%; border:none; background-color:transparent; color:#381972; font-size:80px; text-align:center; }
.app .invitation .invitation-body .input .btn-copy { position:absolute; top:0; bottom:0; right:0; display:block; width:176px; background:url("../images/btn-copy.png") no-repeat 50% 50%;  }
.app .reward { position:absolute; top:2694px; left:50%; display:block; width:1072px; margin-left:-536px; }
.app .reward .reward-header { display:block; height:64px; background-image:linear-gradient(to right, transparent, #31126b, transparent); margin-bottom:50px; color:#fff; font-size:48px; text-align:center; line-height:64px; }
.app .reward .reward-header span { color:#ffb300; }
.app .reward .reward-body { display:flex; justify-content:center; align-items:center; gap:64px; }
.app .reward .reward-body img { display:block; width:504px; height:376px; }
.app .reward .reward-footer { display:block; margin-top:60px; }
.app .reward .reward-footer .btn-join { display:block; width:616px; height:190px; background:url("../images/btn-join.png") no-repeat 50% 50%; margin:0 auto; color:transparent; text-align:center; line-height:190px; }
.app .rules { position:absolute; top:3856px; left:50%; display:block; width:1056px; margin-left:-528px; }
.app .rules .rules-body { display:block; }
.app .rules .rules-body p { position:relative; display:block; padding-left:80px; color:#fff; font-size:48px; text-align:left; line-height:64px; }
.app .rules .rules-body p::before { content:""; position:absolute; top:4px; left:0; display:block; width:54px; height:56px; background-image:url("../images/order.png"); background-repeat:no-repeat; }
.app .rules .rules-body p:nth-child(1) {  }
.app .rules .rules-body p:nth-child(1)::before { background-position:0 0; }
.app .rules .rules-body p:nth-child(2) {  }
.app .rules .rules-body p:nth-child(2)::before { background-position:-54px 0; }

.copyright { display:block; width:100%; background-color:#141414; padding:64px 0px; }
.copyright p { display:block; color:#fff; font-size:28px; text-align:center; line-height:56px; }