html, body {
    margin: 0;
    padding: 0;
    min-height: 880px;
    background-color: #1d1d1f;
    font-family: "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft Yahei", sans-serif, arial;
}
#p0522-2 {
    margin: 0 0 0 50%;
    width: 1280px;
    height: 880px;
    background-image: url("../images/bg.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
    position: relative;
    transform: translateX(-50%);
}
.rwapper {
    padding: 5px 40px 0;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.rwapper .row {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-game {
    padding: 24px;
    width: 760px;
    height: 313px;
    background-image: url("../images/main-game.png");
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
}
.main-game .main-game-btn {
    width: 130px;
    height: 40px;
    background-image: url("../images/main-game-btn.png");
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
}
.main-game .main-game-btn:hover {
    background-image: url("../images/main-game-btn-active.png");
}
.entry {
    padding-top: 33px;
    width: 421px;
    height: 313px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}
.entry .entry-item {
    padding-right: 10px;
    width: 100%;
    height: 135px;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    transition: all 0.5s;
}
.entry .item1 {
    background-image: url("../images/entry1.png");

}
.entry .item2 {
    background-image: url("../images/entry2.png");
}
.entry .entry-item .arrow {
    width: 10px;
    height: 17px;
    background-image: url("../images/icon-arrow.png");
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    transition: all 0.5s;
}
.entry .entry-item:hover {
    filter: drop-shadow(0 0 3px rgba(208, 208, 208, 0.2));
}
.entry .entry-item:hover .arrow {
    filter: drop-shadow(0 0 3px #d0d0d0);
}
.app-download {
    padding-right: 20px;
    width: 421px;
    height: 150px;
    background-image: url("../images/app-download.png");
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.main-promo {
    height: 150px;
    transition: all 0.5s;
}
.main-promo:hover {
    filter: drop-shadow(0 0 3px rgba(208, 208, 208, 0.2));
}
.promo {
    height: 150px;
    transition: all 0.5s;
}
.promo:hover {
    filter: drop-shadow(0 0 3px rgba(208, 208, 208, 0.2));
}
.qrcode {
    margin-left: auto;
    width: 120px;
    height: 120px;
    background-color: #ffffff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.qrcode img {
    width: 100px;
    height: 100px;
    border: 8px solid #ffffff;
    border-radius: 4px;
}

.footer {
    margin-top: auto;
    width: 100%;
    height: 159px;
    background-image: url("../images/footer.png");
    background-repeat: no-repeat;
    background-size: 100%;
}