* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    background-color: #F6F6F8;
}
a {
    color: inherit;
}

/* Flex布局 */
.flex, .flex-row {
    display: flex;
    flex-direction: row;
}
.flex-center, .flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.flex-center-start, .flex-row-center-start {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
.flex-center-end, .flex-row-center-end {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}
.flex-start, .flex-row-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-start-center, .flex-row-start-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.flex-start-end, .flex-row-start-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
}
.flex-end, .flex-row-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}
.flex-end-center, .flex-row-end-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.flex-end-start, .flex-row-end-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex-column-center-start {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.flex-column-center-end {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.flex-column-start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-column-start-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.flex-column-start-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}
.flex-column-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
.flex-column-end-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.flex-column-end-start {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

body > .header {
    height: 220rem;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    background-size: cover;
    background-position: 50% -80rem;
    background-repeat: no-repeat;
    background-image: url('../images/header_background.png');
}
body.bg_b > .header.droplet {
height: 504rem;
}
body > .header .top {
    height: 120rem;
    padding: 0 28rem 0 42rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body > .header .top .logo {
    height: 65rem;
}
body > .header .top .logo img {
    height: 100%;
}
body > .header .top .search {
    width: 380rem;
    height: 60rem;
    border-radius: 198rem;
    background: #F6F6F8;
    display: flex;
    align-items: center;
    padding: 0 32rem;
    box-sizing: border-box;
}
body > .header .top .search .search-button {
    border: none;
    background-color: transparent;
    flex-shrink: 0;
    width: 28rem;
    height: 28rem;
    background-size: 100% 100%;
    background-image: url('../images/search.png');
}
body > .header .top .search .search-input {
    margin-left: 8rem;
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
}
body > .header .nav {
    overflow: auto;
    display: flex;
    align-items: center;
}
body > .header .nav .item {
    flex-shrink: 0;
    height: 100rem;
    padding: 0 20rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rem;
    color: white;
    position: relative;
}
body > .header .nav .item.selected {
    font-weight: bold;
}
body > .header .nav .item.selected::after {
    content: '';
    position: absolute;
    top: calc(100% - 20rem);
    left: calc(50% - 40% / 2);
    width: 40%;
    height: 6rem;
    background: #FFFFFF;
    border-radius: 198rem;
}
body > .footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    padding: 38rem 8rem 38rem 28rem;
    background-color: #333333;
    gap: 20rem;
}
body > .footer .title {
    font-size: 24rem;
    color: #CCCCCC;
}
body > .footer .nav {
    display: flex;
    flex-direction: column;
    gap: 15rem;
}
body > .footer .nav .row {
    display: flex;
    align-items: center;
}
.footer {
	text-align: center;
}
.footer-nav {
	text-align: center;
}
.footer-nav a {
	display: inline-block;
    font-size: 24rem;
    margin: 12rem;
    line-height: 1;
    color: #999999;
}

body > .footer .copyright {
    font-size: 24rem;
    color: #999999;
}
body > .main {
    display: flex;
    flex-direction: column; margin-top:10px;
}
.main-section {
    display: flex;
    flex-direction: column;
    padding: 0 28rem;
    box-sizing: border-box;
    background-color: #fff;
}
.section-title {
    margin-top: 10rem;
    margin-bottom: 10rem;
    display: flex;
    align-items: center;
}
.section-title > span:nth-child(1) {
    margin-right: 8rem;
    font-size: 40rem;
    font-weight: bold;
    color: #1A1A1A;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.section-title > span:nth-child(1).has-marker::after {
    content: '';
    margin-left: 16rem;
    flex-shrink: 0;
    width: 60rem;
    height: 60rem;
    background-size: 100% 100%;
    background-image: url('../images/section_title_end_marker.png');
}
.section-title > span:nth-child(2) {
    margin-left: auto;
    font-size: 14rem;
    color: #999999;
}
.section-title .add-button {
    margin-left: auto;
    width: 148rem;
    height: 36rem;
    background: #FFFFFF;
    border-radius: 32rem;
    border: 2rem solid #FA4B4A; border-right:0px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: 16rem;
    box-sizing: border-box;
    font-size: 20rem;
    line-height: 1;
    color: #FA4B4A;
}
.section-title .add-button::after {
    content: '';
    box-sizing: border-box;
    margin-left: auto;
    flex-shrink: 0;
    width: 36rem;
    height: 36rem;
    background-size: 100% 100%;
    background-image: url('../images/add_button_icon.png');
}
 



.head-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36rem;
    margin: 45rem 0;
}
.head-title::before {
    content: '';
    flex-shrink: 0;
    width: 120rem;
    height: 40rem;
    background-size: 100% 100%;
    background-image: url('../images/head_title_begin_marker.png');
}
.head-title::after {
    content: '';
    flex-shrink: 0;
    width: 124rem;
    height: 40rem;
    background-size: 100% 100%;
    background-image: url('../images/head_title_end_marker.png');
}
.head-title span {
    font-size: 32rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.head-title span a{
    color: #1A1A1A;
}

.modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2100;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.modal.show {
    display: flex;
}
.modal > .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
}
.modal > .modal-content {
    position: relative;
    z-index: 2101;
}
.error-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 100rem;
}
.error-page > .image {
    width: 480rem;
    height: 240rem;
}
.error-page > .description {
    margin-top: 16rem;
    font-size: 28rem;
    color: #999999;
}
.error-page > .error-code {
    margin-top: 16rem;
    font-size: 24rem;
    color: #B3B3B3;
}
.error-page > .primary-button {
    margin-top: 40rem;
}
.primary-button {
    cursor: pointer;
    border-radius: 198rem;
    border: 2rem solid #FFCBCB;
    font-size: 32rem;
    line-height: 1;
    color: #FA4B4A;
    padding: 18rem 56rem;
    background-color: white;
}
.tabs {
    margin-left: 28rem;
    margin-right: 28rem;
    display: flex;
    flex-wrap: wrap;
    gap: 16rem 4rem;
    background-color: #fff;
    box-shadow: 0 0 40rem 0 rgba(0,0,0,0.08);
    border-radius: 16rem;
    padding: 32rem 20rem;
    box-sizing: border-box;
}
.tabs .item {
    /*width: 160rem;*/
    height: 60rem;
    border-radius: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8rem;
    box-sizing: border-box;
    font-size: 24rem;
    font-weight: normal;
    color: #4D4D4D;
    background-color: #fff;
   	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}
.tabs .item.selected {
    font-weight: bold;
    color: white;
    background-color: #FA4B4A;
    　　text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}
.pagination {
    margin: 60rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20rem;
}
.pagination a{

    font-size: 28rem;
  
}
.pagination b{

    font-size: 28rem;
  
}

.pagination .prev-button,
.pagination .next-button {
    height: 60rem;
    display: flex;
    align-items: center;
    padding: 0 35rem;
    box-sizing: border-box;
    border-radius: 12rem;
    border: 2rem solid #E6E6E6;
    font-size: 28rem;
    line-height: 1;
    color: #666666;
}
.gift-modal > .modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 560rem;
    height: 640rem;
    border-radius: 40rem;
    background: linear-gradient(180deg, #FFE7E7 0%, #FFFFFF 100%);
    padding-top: 52rem;
}
.gift-modal > .modal-content .header {
    width: 100%;
    padding: 0 36rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.gift-modal > .modal-content .header .title {
    font-size: 44rem;
    line-height: 1;
    color: #333333;
}
.gift-modal > .modal-content .header .cancel {
    position: absolute;
    right: 36rem;
    flex-shrink: 0;
    width: 40rem;
    height: 40rem;
    background-size: 100% 100%;
    background-image: url('../images/cancel.png');
}
.gift-modal > .modal-content .gift-box {
    margin-top: 28rem;
    flex-shrink: 0;
    width: 240rem;
    height: 240rem;
    background-size: 100% 100%;
    background-image: url('../images/gift_box.png');
}
.gift-modal > .modal-content .activation-code {
    margin-top: 28rem;
    font-size: 28rem;
    color: #666666;
}
.gift-modal > .modal-content .copy-button {
    margin-top: 70rem;
    cursor: pointer;
    width: 376rem;
    height: 88rem;
    background-color: #FA4B4A;
    border-radius: 198rem;
    font-size: 32rem;
    line-height: 1;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.droplet-main-first {
    position: relative;
    margin-top: -260rem !important;
}
.droplet-main-first::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: #fff;
}

.index-swiper-wrap {
    padding: 0 28rem;
    box-sizing: border-box;
}
.index-swiper {
    position: relative;
    width: 100%;
    height: 380rem;
    box-sizing: border-box;
    border-radius: 16rem;
}
.index-swiper-pagination {
    position: absolute;
    bottom: 16rem;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 16rem;
}
.index-swiper-pagination .swiper-pagination-bullet {
    margin: 0 !important;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: transparent;
    border: 2rem solid #FA4B4A;
    box-sizing: border-box;
}
.index-swiper-pagination .swiper-pagination-bullet-active {
    background-color: #FA4B4A;
}
.index-swiper img {
    width: 100%;
    height: 100%;
}
.index-swiper .title {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%;
    padding: 16rem 28rem 0 28rem;
    box-sizing: border-box;
    height: 100rem;
    background: rgba(60,60,60,0.81);
    font-size: 28rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-recommend {
    padding-top: 48rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.game-recommend .list {

}
.game-recommend .list .item {
    width: 220rem;
    height: 360rem;
    border-radius: 20rem;
    background-color: #F5F5F7;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30rem;
    box-sizing: border-box;float:left; margin-left:5px; margin-bottom:5px;
  
}
.game-recommend .list .item .thumbnail {
    width: 120rem;
    height: 120rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.game-recommend .list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.game-recommend .list .item .title {
    margin-top: 20rem;
    width: 146rem;
    text-align: center;
    font-size: 30rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-recommend .list .item .description {
    margin-top: 6rem;
    width: 146rem;
    text-align: center;
    font-size: 24rem;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-recommend .list .item .download-button {
    margin-top: 20rem;
    width: 120rem;
    height: 60rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rem solid #FF7979;
    border-radius: 198rem;
    background: #FFEBEA;
    box-sizing: border-box;
    font-size: 24rem;
    color: #FA4A4A;
}
.latest-news {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.latest-news .banner {
    width: 100%;
    height: 360rem;
    position: relative;
}
.latest-news .banner .tag {
    width: 120rem;
    height: 60rem;
    background: #FA4B4A;
    border-radius: 0 16rem 16rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rem;
    color: white;
    position: absolute;
    top: 0;
    left: -12rem;
}
.latest-news .banner .tag::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12rem;
    width: 12rem;
    height: 12rem;
    background-size: 100% 100%;
    background-image: url('../images/arc_angle.png');
}
.latest-news .banner .thumbnail {
    width: 100%;
    height: 100%;
    border-radius: 16rem;
}
.latest-news .banner .title {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80rem;
    line-height: 80rem;
    text-align: center;
    background: rgba(60,60,60,0.81);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 16rem;
    box-sizing: border-box;
    font-size: 28rem;
    color: white;
    border-radius: 0 0 16rem 16rem;
}
.latest-news .list {
    margin-top: 40rem;
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.latest-news .list .item {
    display: flex;
    align-items: center;
}
.latest-news .list .item .latest {
    font-size: 28rem;
    color: #FA4B4A;
    flex-shrink: 0;
    margin-right: 8rem;
}
.latest-news .list .item .title {
    margin-right: 8rem;
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.latest-news .list .item .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 24rem;
    color: #999999;
}
.hot-game {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.hot-game .list {
    display: flex;
    flex-direction: column;
    gap: 24rem;
}
.hot-game .list .item {
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 24rem;
    box-sizing: border-box;
    border-bottom: 1rem solid #E6E6E6;
}
.hot-game .list .item:last-child {
    border-bottom-color: transparent;
}
.hot-game .list .item .thumbnail {
    width: 128rem;
    height: 128rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.hot-game .list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.hot-game .list .item .content {
    height: 128rem;
    margin-left: 24rem;
    margin-right: 8rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.hot-game .list .item .content .title {
    font-size: 30rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-game .list .item .content .type {
    font-size: 24rem;
    color: #999999;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-game .list .item .content .description {
    font-size: 24rem;
    color: #4D4D4D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-game .list .item .download-button {
    margin-left: auto;
    width: 120rem;
    height: 56rem;
    background: #FA4A4A;
    border-radius: 198rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rem;
    color: white;
    flex-shrink: 0;
}
.hot-activity {
    display: flex;
    flex-direction: column;
    padding-top: 40rem;
    padding-bottom: 20rem;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    background-image: url('../images/hot_activity_background.png'), linear-gradient(to bottom, #fffafa, white);
}
.hot-activity .hot-activity-swiper {
    position: relative;
    width: 100%;
    height: 620rem;
    box-sizing: border-box;
    border-radius: 16rem;
    background-color: #fff;
    padding-top: 40rem;
    box-shadow: 0 0 40rem 0 rgba(0,0,0,0.06);
}
.hot-activity-swiper-pagination {
    position: absolute;
    bottom: 40rem !important;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 16rem;
}
.hot-activity-swiper-pagination .swiper-pagination-bullet {
    margin: 0 !important;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    flex-shrink: 0;
    /* background-color: #E9E9EB; */
}
.hot-activity-swiper-pagination .swiper-pagination-bullet-active {
    background-color: #FA4B4A;
}
.hot-activity .hot-activity-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.hot-activity .hot-activity-swiper .swiper-slide .item {
    display: flex;
    align-items: center;
    padding-bottom: 32rem;
    box-sizing: border-box;
    border-bottom: 1rem solid #E6E6E6;
}
.hot-activity .hot-activity-swiper .swiper-slide .item:last-child {
    border-bottom-color: transparent;
}
.hot-activity .hot-activity-swiper .swiper-slide .item .thumbnail {
    margin-left: 32rem;
    width: 180rem;
    height: 120rem;
    border-radius: 16rem;
    overflow: hidden;
    flex-shrink: 0;
}
.hot-activity .hot-activity-swiper .swiper-slide .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.hot-activity .hot-activity-swiper .swiper-slide .item .content {
    margin-left: 28rem;
    margin-right: 32rem;
    height: 120rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}
.hot-activity .hot-activity-swiper .swiper-slide .item .content .title {
    display: flex;
    align-items: center;
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-activity .hot-activity-swiper .swiper-slide .item:nth-child(1) .content .title::before {
    content: '';
    width: 21.54rem;
    height: 28rem;
    background-size: 100% 100%;
    background-image: url('../images/hot_activity_item_title_icon_1.png');
    flex-shrink: 0;
    margin-right: 10rem;
}
.hot-activity .hot-activity-swiper .swiper-slide .item:nth-child(2) .content .title::before {
    content: '';
    width: 21.54rem;
    height: 28rem;
    background-size: 100% 100%;
    background-image: url('../images/hot_activity_item_title_icon_2.png');
    flex-shrink: 0;
    margin-right: 10rem;
}
.hot-activity .hot-activity-swiper .swiper-slide .item:nth-child(3) .content .title::before {
    content: '';
    width: 21.54rem;
    height: 28rem;
    background-size: 100% 100%;
    background-image: url('../images/hot_activity_item_title_icon_3.png');
    flex-shrink: 0;
    margin-right: 10rem;
}
.hot-activity .hot-activity-swiper .swiper-slide .item .content .description {
    margin-right: 8rem;
    font-size: 24rem;
    color: #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-activity .hot-activity-swiper .swiper-slide .item .content .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 24rem;
    color: #999999;
}
.selection-album {
    display: flex;
    flex-direction: column;
    padding-top: 40rem;
    padding-bottom: 20rem;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    background-image: url('../images/hot_activity_background.png'), linear-gradient(to bottom, #fffafa, white);
}
.selection-album .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.selection-album .list .item {
    width: 340rem;
    height: 340rem;
    border-radius: 16rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40rem;
    box-sizing: border-box;
    box-shadow: 0 0 40rem 0 rgba(0,0,0,0.06);
}
.selection-album .list .item .thumbnail {
    width: 140rem;
    height: 140rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.selection-album .list .item  .thumbnail img {
    width: 100%;
    height: 100%;
}
.selection-album .list .item  .title {
    margin-top: 16rem;
    width: 280rem;
    text-align: center;
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 16rem;
    box-sizing: border-box;
    border-bottom: 1rem solid #E6E6E6;
}
.selection-album .list .item .description {
    margin-top: 16rem;
    width: 280rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.selection-album .list .item .description .total {
    font-size: 24rem;
    color: #4D4D4D;
}
.selection-album .list .item .description .total .number {
    color: #FA4A4A;
}
.selection-album .list .item .description .time {
    font-size: 24rem;
    color: #999999;
}
.selection-album .nav {
    margin-top: 36rem;
    display: flex;
    flex-wrap: wrap;
    gap: 24rem 14rem;
}
.selection-album .nav .item {
    width: 340rem;
    height: 60rem;
    line-height: 60rem;
    padding: 0 30rem;
    box-sizing: border-box;
    font-size: 24rem;
    border-radius: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.selection-album .nav .item:nth-child(4n+1) {
    color: #FA4A4A;
    background: #FFF6F4;
    border: 2rem solid #FA4A4A;
}
.selection-album .nav .item:nth-child(4n+2) {
    color: #23C268;
    background: #F4FCF7;
    border: 2rem solid #23C268;
}
.selection-album .nav .item:nth-child(4n+3) {
    color: #5E6FFB;
    background: #F3F5FF;
    border: 2rem solid #5E6FFB;
}
.selection-album .nav .item:nth-child(4n+4) {
    color: #F99500;
    background: #FFFDF8;
    border: 2rem solid #F99500;
}
.game-strategy {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.game-strategy .list {
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.game-strategy .list .item {
    display: flex;
    align-items: center;
}
.game-strategy .list .item .title {
    display: flex;
    align-items: center;
    margin-right: 8rem;
    overflow: hidden;
		font-size: 28rem;
		color: #1A1A1A;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
}
.game-strategy .list .item .title span {
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-strategy .list .item .title i{
	font-size: 28rem;
	color: #1A1A1A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	flex: 1;
	font-style: normal;
}
.game-strategy .list .item .title::before {
    content: '';
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: #D9D9D9;
    flex-shrink: 0;
    margin-right: 16rem;
		display: inline-block;
}
.game-strategy .list .item .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 24rem;
    color: #999999;
}
.game-strategy .image-group {
    margin-top: 40rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.game-strategy .image-group .big-image {
    width: 454rem;
    height: 320rem;
    border-radius: 16rem;
    overflow: hidden;
    flex-shrink: 0;
}
.game-strategy .image-group .big-image img {
    width: 100%;
    height: 100%;
}
.game-strategy .image-group .little-image-wrap {
    height: 320rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.game-strategy .image-group .little-image-wrap .little-image {
    width: 220rem;
    height: 150rem;
    border-radius: 16rem;
    overflow: hidden;
    flex-shrink: 0;
}
.game-strategy .image-group .little-image-wrap .little-image img {
    width: 100%;
    height: 100%;
}
.hot-game-rankings {
    padding-top: 40rem;
    padding-bottom: 80rem;
    display: flex;
    flex-direction: column;
}
.hot-game-rankings .rankings-wrap {
    overflow: auto;
    display: flex;
    align-items: center;
    gap: 36rem;
}
.hot-game-rankings .rankings-wrap .rankings {
    flex-shrink: 0;
    width: 620rem;
    height: 1020rem;
    border-radius: 16rem;
    overflow: hidden;
}
.hot-game-rankings .rankings-wrap .rankings .banner {
    width: 100%;
    height: 200rem;
    background-size: 100% 100%;
    background-image: url('../images/hot_game_rankings_banner_1.png');
    display: flex;
    align-items: center;
}
.hot-game-rankings .rankings-wrap .rankings .banner span {
    font-size: 56rem;
    font-weight: bold;
    color: #404040;
    margin-left: 210rem;
}
.hot-game-rankings .rankings-wrap .rankings .list {
    padding: 30rem 24rem;
    box-sizing: border-box;
    background-color: #F8F8FA;
    display: flex;
    flex-direction: column;
    gap: 40rem;
}
.hot-game-rankings .rankings-wrap .rankings .list .item {
    display: flex;
    align-items: center;
}
.hot-game-rankings .rankings-wrap .rankings .list .item .serial-number {
    font-size: 28rem;
    color: #666666;
    flex-shrink: 0;
}
.hot-game-rankings .rankings-wrap .rankings .list .item .thumbnail {
    width: 120rem;
    height: 120rem;
    border-radius: 24rem;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 20rem;
}
.hot-game-rankings .rankings-wrap .rankings .list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.hot-game-rankings .rankings-wrap .rankings .list .item .content {
    margin-left: 20rem;
    margin-right: 8rem;
    height: 120rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}
.hot-game-rankings .rankings-wrap .rankings .list .item .content .title {
    font-size: 30rem;
    line-height: 1;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-game-rankings .rankings-wrap .rankings .list .item .content .description {
    font-size: 24rem;
    color: #999999;
    line-height: 1;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-game-rankings .rankings-wrap .rankings .list .item .content .score {
    font-size: 24rem;
    line-height: 1;
    color: #999999;
    display: flex;
    align-items: center;
}
.hot-game-rankings .rankings-wrap .rankings .list .item .content .score::before {
    content: '';
    margin-right: 8rem;
    width: 24rem;
    height: 24rem;
    background-size: 100% 100%;
    background-image: url('../images/score_icon.png');
    flex-shrink: 0;
}
.hot-game-rankings .rankings-wrap .rankings .list .item .download-button {
    margin-left: auto;
    width: 120rem;
    height: 60rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 198rem;
    border: 2rem solid #FFCBCB;
    font-size: 24rem;
    color: #FA4B4A;
    flex-shrink: 0;
    background-color: #fff;
}
.friendly-links {
    padding: 20rem 12rem;
}
.friendly-links a {
	position: relative;
	display: inline-block;
	color: #909399;
	margin: 6rem 0;
	margin-right: 12rem;
	font-size: 26rem;
	line-height: 45rem;
}
.about-content {
    margin-top: 40rem;
    display: flex;
    flex-direction: column;
    gap: 60rem;
    padding-bottom: 100rem;
    box-sizing: border-box;
}
.about-content > p {
    font-size: 28rem;
    line-height: 56rem;
    color: #666666;
    white-space: pre-wrap;
}
.about-content .website-map {
    display: flex;
    flex-direction: column;
}
.about-content .website-map .title {
    display: flex;
    align-items: center;
    margin-bottom: 24rem;
}
.about-content .website-map .title::before {
    content: '';
    width: 6rem;
    height: 28rem;
    background: #FA4B4A;
    border-radius: 198rem;
    margin-right: 12rem;
    flex-shrink: 0;
}
.about-content .website-map .title span {
    font-size: 28rem;
    font-weight: bold;
    color: #1A1A1A;
}
.about-content .website-map .list {
    display: flex;
    flex-wrap: wrap;
    gap: 18rem;
}
.about-content .website-map .list .item {
    padding: 14rem 32rem;
    box-sizing: border-box;
    background: #F6F6F8;
    border-radius: 12rem;
    font-size: 24rem;
    color: #4D4D4D;
}
.news-list {
    display: flex;
    flex-direction: column;
}
.news-list .list {
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.news-list .list .item {
    display: flex;
    flex-direction: column;
    gap: 20rem;
    padding-bottom: 32rem;
    box-sizing: border-box;
    border-bottom: 1rem solid #E6E6E6;
}
.news-list .list .item:last-child {
    border-bottom-color: transparent;
}
.news-list .list .item .title {
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-list .list .item .main {
    display: flex;
    align-items: center;
    gap: 28rem;
}
.news-list .list .item .main .thumbnail {
    width: 260rem;
    height: 140rem;
    border-radius: 16rem;
    overflow: hidden;
    flex-shrink: 0;
}
.news-list .list .item .main .thumbnail img {
    width: 100%;
    height: 100%;
}
.news-list .list .item .main .content {
    overflow: hidden;
    height: 140rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.news-list .list .item .main .content .description {
    font-size: 28rem;
    color: #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-list .list .item .main .content .time {
    background-color: #FFEFEF;
    border-radius: 4rem;
    font-size: 24rem;
    line-height: 1;
    color: #FA4B4A;
    padding: 10rem 22rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
}
.news-detail {
    padding-top: 40rem;
    padding-bottom: 20rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.news-detail .title {
    width: 100%;
    text-align: center;
    font-size: 36rem;
    font-weight: bold;
    color: #1A1A1A;
    line-height: 58rem;
}
.news-detail .description {
    margin-top: 40rem;
    width: 100%;
    height: 80rem;
    line-height: 80rem;
    text-align: center;
    border-top: 2rem solid #FFF1F1;
    border-bottom: 2rem solid #FFF1F1;
    box-sizing: border-box;
    font-size: 24rem;
    color: #999999;
   	display: flex;
    justify-content: space-between;
}
.news-detail .content {
    margin-top: 40rem;
    color: #666666;
}
.news-detail .content p {
	font-size: 28rem;
	text-indent: 2em;
	line-height: 58rem;
    margin-bottom: 15px
}

.news-detail .content iframe {
    display: block;
    width: 100%;
    height: 300px
}


.news-detail .content img {
	text-indent: 0;
	display: block;
	max-width: 100%;
	height: auto !important;
}

.news-detail .content p img {
	text-indent: 0;
	display: block;
	max-width: 100%;
	height: auto !important;
}
.related-read {
    padding-top: 40rem;
    padding-bottom: 40rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.related-read .list {
    display: flex;
    flex-direction: column;
    gap: 28rem;
}
.related-read .list .item {
    position: relative;
    width: 100%;
    height: 200rem;
    border-radius: 16rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 36rem;
    box-sizing: border-box;
}
.related-read .list .item img {
    filter: blur(5rem) brightness(0.55);
    object-fit: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.related-read .list .item span {
    z-index: 1;
    width: 100%;
    text-align: center;
    font-size: 28rem;
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-game {
    padding-top: 40rem;
    padding-bottom: 40rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.related-game .list {
    overflow: auto;
    display: flex;
    align-items: center;
    gap: 12rem;
}
.related-game .list .item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.related-game .list .item .thumbnail {
    width: 128rem;
    height: 128rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.related-game .list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.related-game .list .item .title {
    margin-top: 12rem;
    width: 156rem;
    text-align: center;
    font-size: 26rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-game .list .item .download-button {
    margin-top: 16rem;
    width: 120rem;
    height: 60rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 198rem;
    background-color: #fff;
    border: 2rem solid #FFCBCB;
    box-sizing: border-box;
    font-size: 24rem;
    color: #FA4B4A;
}
.hot-strategy {
    padding-top: 40rem;
    padding-bottom: 40rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.hot-strategy .banner {
    width: 100%;
    height: 360rem;
    position: relative;
}
.hot-strategy .banner .tag {
    width: 120rem;
    height: 60rem;
    background: #FA4B4A;
    border-radius: 0 16rem 16rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rem;
    color: white;
    position: absolute;
    top: 0;
    left: -12rem;
}
.hot-strategy .banner .tag::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12rem;
    width: 12rem;
    height: 12rem;
    background-size: 100% 100%;
    background-image: url('../images/arc_angle.png');
}
.hot-strategy .banner .thumbnail {
    width: 100%;
    height: 100%;
    border-radius: 16rem;
}
.hot-strategy .banner .title {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80rem;
    line-height: 80rem;
    text-align: center;
    background: rgba(60,60,60,0.81);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 16rem;
    box-sizing: border-box;
    font-size: 28rem;
    color: white;
    border-radius: 0 0 16rem 16rem;
}
.hot-strategy .list {
    margin-top: 40rem;
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.hot-strategy .list .item {
    display: flex;
    align-items: center;
}
.hot-strategy .list .item::before {
    content: '';
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: #D9D9D9;
    flex-shrink: 0;
    margin-right: 16rem;
}
.hot-strategy .list .item .title {
    margin-right: 8rem;
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-strategy .list .item .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 24rem;
    color: #999999;
}
.hot-download {
    padding-top: 40rem;
    padding-bottom: 40rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.hot-download.is-game-list {
    padding-top: 0;
}
.hot-download .list {
    display: flex;
    flex-direction: column;
    gap: 40rem;
}
.hot-download.is-game-list .list {
    gap: 32rem;
}
.hot-download .list .item {
    display: flex;
    align-items: center;
}
.hot-download.is-game-list .list .item {
    padding-bottom: 32rem;
    box-sizing: border-box;
    border-bottom: 1rem solid #E6E6E6;
}
.hot-download.is-game-list .list .item:last-child {
    border-bottom-color: transparent;
}
.hot-download .list .item .thumbnail {
    width: 120rem;
    height: 120rem;
    border-radius: 24rem;
    overflow: hidden;
    flex-shrink: 0;
}
.hot-download .list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.hot-download .list .item .content {
    margin-left: 20rem;
    margin-right: 8rem;
    height: 120rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}
.hot-download .list .item .content .title {
    font-size: 30rem;
    line-height: 1;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-download .list .item .content .description {
    font-size: 24rem;
    color: #999999;
    line-height: 1;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-download .list .item .content .score {
    font-size: 24rem;
    line-height: 1;
    color: #999999;
    display: flex;
    align-items: center;
}
.hot-download .list .item .content .score::before {
    content: '';
    margin-right: 8rem;
    width: 24rem;
    height: 24rem;
    background-size: 100% 100%;
    background-image: url('../images/score_icon.png');
    flex-shrink: 0;
}
.hot-download .list .item .download-button {
    margin-left: auto;
    width: 120rem;
    height: 60rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 198rem;
    border: 2rem solid #FFCBCB;
    font-size: 24rem;
    color: #FA4B4A;
    flex-shrink: 0;
    background-color: #fff;
}
.hot-list {
    padding-top: 40rem;
    padding-bottom: 80rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.hot-list .list {
    display: flex;
    flex-direction: column;
    gap: 34rem;
}
.hot-list .list .item {
    display: flex;
    align-items: center;
}
.hot-list .list .item .serial-number {
    width: 32rem;
    text-align: center;
    font-size: 32rem;
    color: #999999;
    flex-shrink: 0;
}
.hot-list .list .item:nth-child(1) .serial-number {
    width: 32rem;
    height: 32rem;
    background-size: 100% 100%;
    background-image: url('../images/cursor_right.png');
}
.hot-list .list .item:nth-child(1) .serial-number span {
    display: none;
}
.hot-list .list .item .title {
    margin-left: 24rem;
    margin-right: 8rem;
    font-size: 28rem;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-list .list .item:nth-child(1) .title {
    color: #FA4B4A;
}
.hot-list .list .item .time {
    margin-left: auto;
    font-size: 28rem;
    color: #999999;
    flex-shrink: 0;
}
.gift-list {
    padding-top: 40rem;
    display: flex;
    flex-direction: column;
}
.gift-list .list {
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.gift-list.related-gift .list {
    gap: 56rem;
}
.gift-list .list .item {
    display: flex;
    align-items: center;
    padding-bottom: 32rem;
    box-sizing: border-box;
    border-bottom: 1rem solid #E6E6E6;
}
.gift-list.related-gift .list .item {
    padding-bottom: 0;
    border-bottom: none;
}
.gift-list .list .item:last-child {
    border-bottom-color: transparent;
}
.gift-list .list .item .thumbnail {
    width: 136rem;
    height: 136rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.gift-list .list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.gift-list .list .item .content {
    margin-left: 24rem;
    margin-right: 8rem;
    height: 136rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}
.gift-list .list .item .content .title {
    font-size: 30rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gift-list .list .item .content .description {
    font-size: 24rem;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gift-list .list .item .content .remaining {
    font-size: 24rem;
    color: #4D4D4D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gift-list .list .item .content .remaining .value {
    color: #FF4D4D;
}
.gift-list .list .item .button {
    margin-left: auto;
    width: 120rem;
    height: 60rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 198rem;
    background-color: #FF4D4D;
    flex-shrink: 0;
    font-size: 24rem;
    color: white;
}
.gift-detail-header-wrap {
    padding-top: 40rem;
    padding-bottom: 28rem;
}
.gift-detail-header {
    width: 100%;
    height: 460rem;
    display: flex;
    flex-direction: column;
    padding: 40rem 36rem;
    border-radius: 16rem;
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat;
    background-image: url('../images/gift_detail_header_background.png');
    box-shadow: 0 0 20rem 0 rgba(0,0,0,0.08);
}
.gift-detail-header .header {
    display: flex;
    align-items: center;
    gap: 20rem;
}
.gift-detail-header .header .thumbnail {
    width: 120rem;
    height: 120rem;
    border-radius: 30rem;
    flex-shrink: 0;
}
.gift-detail-header .header .content {
    height: 120rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.gift-detail-header .header .content .title {
    font-size: 32rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gift-detail-header .header .content .remaining {
    display: flex;
    align-items: center;
    gap: 16rem;
    font-size: 24rem;
    color: #666666;
}
.gift-detail-header .header .content .remaining .progress-bar {
    width: 180rem;
    height: 12rem;
    border-radius: 198rem;
    background-color: #fff;
    overflow: hidden;
}
.gift-detail-header .header .content .remaining .progress-bar .value {
    height: 100%;
    border-radius: 198rem;
    background-color: #FA4A4A;
}
.gift-detail-header .header .content .remaining > .value {
    color: #FA4A4A;
}
.gift-detail-header .button-wrap {
    margin-top: 58rem;
    display: flex;
    flex-direction: column;
    gap: 24rem;
}
.gift-detail-header .button-wrap .receive-gift-button {
    cursor: pointer;
    width: 100%;
    height: 88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rem;
    line-height: 1;
    color: white;
    background-color: #FF4D4D;
    border-radius: 198rem;
}
.gift-detail-header .button-wrap .not-gift-button {
    cursor: pointer;
    width: 100%;
    height: 88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rem;
    line-height: 1;
    color: #999999;
    background-color: #E6EBF0;
    border-radius: 198rem;
}
.gift-detail-header .button-wrap .download-button {
    width: 100%;
    height: 88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rem;
    line-height: 1;
    color: #FF4D4D;
    background-color: #fff;
    border: 2rem solid #FFCBCB;
    border-radius: 198rem;
}
.gift-detail-header .button-wrap .download-button::before {
    content: '';
    margin-right: 12rem;
    flex-shrink: 0;
    width: 36rem;
    height: 36rem;
    background-size: 100% 100%;
    background-image: url('../images/download_icon_red.png');
}
.gift-detail-header .button-wrap .not-download-button {
    width: 100%;
    height: 88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rem;
    line-height: 1;
    color: #999999;
    background-color: #E6EBF0;
    border-radius: 198rem;
}
.gift-detail-header .button-wrap .not-download-button::before {
    content: '';
    margin-right: 12rem;
    flex-shrink: 0;
    width: 36rem;
    height: 36rem;
    background-size: 100% 100%;
    background-image: url('../images/disable_icon.png');
}
.gift-detail-title {
    display: flex;
    align-items: center;
    padding-bottom: 40rem;
}
.gift-detail-title::before {
    content: '';
    margin-right: 16rem;
    flex-shrink: 0;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background-color: #FA4B4A;
}
.gift-detail-title span {
    font-size: 40rem;
    color: #FA4B4A;
}
.gift-detail-description {
    display: flex;
    flex-direction: column;
    padding-top: 20rem;
}
.gift-detail-description > .gift-detail-title + * {
    padding-top: 0;
}
.gift-detail-description h3 {
    padding: 60rem 0 24rem 0;
    font-weight: normal;
    font-size: 36rem;
    color: #333333;
    line-height: 42.19rem;
}
.gift-detail-description p {
    font-size: 28rem;
    color: #666666;
    line-height: 58rem;
    white-space: pre-wrap;
}
.related-gift {
    padding-bottom: 40rem;
}
.latest-gift {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.latest-gift .list {
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.latest-gift .list .item {
    display: flex;
    flex-direction: column;
    padding-bottom: 32rem;
    border-bottom: 1rem solid #E6E6E6;
}
.latest-gift .list .item:last-child {
    border-bottom: none;
}
.latest-gift .list .item .header {
    display: flex;
    align-items: center;
    gap: 24rem;
}
.latest-gift .list .item .header .tag {
    width: 76rem;
    height: 40rem;
    border-radius: 8rem;
    position: relative;
    background-color: #FA4B4A;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rem;
    line-height: 1;
    color: white;
    flex-shrink: 0;
}
.latest-gift .list .item .header .tag::after {
    content: '';
    position: absolute;
    right: -16rem;
    width: 16rem;
    height: 16rem;
    background-size: 100% 100%;
    background-image: url('../images/tag_decorate.png');
    flex-shrink: 0;
}
.latest-gift .list .item .header .title {
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.latest-gift .list .item .content {
    margin-top: 20rem;
    display: flex;
    align-items: center;
    gap: 8rem;
}
.latest-gift .list .item .content .description {
    font-size: 24rem;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.latest-gift .list .item .content .time {
    margin-left: auto;
    font-size: 24rem;
    color: #999999;
    flex-shrink: 0;
}
.hot-gift {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.hot-gift .top-list {
    display: flex;
    flex-direction: column;
    gap: 40rem;
    margin-bottom: 40rem;
}
.hot-gift .top-list .item {
    display: flex;
    align-items: center;
}
.hot-gift .top-list .item .thumbnail {
    width: 124rem;
    height: 124rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.hot-gift .top-list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.hot-gift .top-list .item .content {
    margin-left: 20rem;
    margin-right: 8rem;
    overflow: hidden;
    height: 124rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.hot-gift .top-list .item .content .title {
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-gift .top-list .item .content .remaining {
    display: flex;
    align-items: center;
    gap: 16rem;
    font-size: 24rem;
    color: #666666;
}
.hot-gift .top-list .item .content .remaining .progress-bar {
    width: 180rem;
    height: 12rem;
    border-radius: 198rem;
    background-color: #F6F6F8;
    overflow: hidden;
}
.hot-gift .top-list .item .content .remaining .progress-bar .value {
    height: 100%;
    border-radius: 198rem;
    background-color: #FA4A4A;
}
.hot-gift .top-list .item .content .remaining > .value {
    color: #FA4A4A;
}
.hot-gift .list {
    display: flex;
    flex-direction: column;
    gap: 40rem;
}
.hot-gift .list .item {
    display: flex;
    align-items: center;
}
.hot-gift .list .item::before {
    content: '';
    margin-right: 16rem;
    flex-shrink: 0;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: #D9D9D9;
}
.hot-gift .list .item .title {
    margin-right: 8rem;
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-gift .button {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 136rem;
    height: 60rem;
    border-radius: 198rem;
    background-color: #FA4A4A;
    font-size: 24rem;
    line-height: 1;
    color: white;
}
.selection-game {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.selection-game .list {
    display: flex;
    flex-wrap: wrap;
    gap: 40rem 44rem;
}
.selection-game .list .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rem;
}
.selection-game .list .item .thumbnail {
    width: 100rem;
    height: 100rem;
    border-radius: 20rem;
    overflow: hidden;
    flex-shrink: 0;
}
.selection-game .list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.selection-game .list .item .title {
    width: 140rem;
    text-align: center;
    font-size: 26rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-activity {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.recent-activity .list {
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.recent-activity .list .item {
    display: flex;
    align-items: center;
    gap: 20rem;
    padding-bottom: 32rem;
    border-bottom: 1rem solid #E6E6E6;
}
.recent-activity .list .item:last-child {
    border-bottom: none;
}
.recent-activity .list .item .thumbnail {
    width: 240rem;
    height: 140rem;
    border-radius: 16rem;
    overflow: hidden;
    flex-shrink: 0;
}
.recent-activity .list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.recent-activity .list .item .content {
    height: 140rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}
.recent-activity .list .item .content .header {
    display: flex;
    align-items: center;
    gap: 12rem;
}
.recent-activity .list .item .content .header .tag {
    width: 68rem;
    height: 36rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8rem;
    background-color: #FFF2F2;
    font-size: 24rem;
    color: #FA4B4A;
    line-height: 1;
    flex-shrink: 0;
}
.recent-activity .list .item .content .header .title {
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-activity .list .item .content .main {
    display: flex;
    align-items: center;
    gap: 8rem;
}
.recent-activity .list .item .content .main .description {
    font-size: 28rem;
    color: #4D4D4D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-activity .list .item .content .main .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 24rem;
    color: #999999;
}
.detail-header-wrap {
    padding-bottom: 28rem;
}
.detail-header {
    padding: 40rem 28rem 0 28rem;
    margin: 0 28rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 694rem;
    /*height: 560rem;*/
    background-size: 100% 100%;
    background-image: url('../images/detail_header_background.png');
    background-color: #fff;
    border-radius: 16rem;
    box-shadow: 0 0 20rem 0 rgba(0,0,0,0.08); padding-bottom:10px;
}
.detail-header .title {
    width: 100%;
    text-align: center;
    font-size: 36rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.detail-header .thumbnail {
    margin-top: 20rem;
    width: 140rem;
    height: 140rem;
    border-radius: 40rem;
    overflow: hidden;
    flex-shrink: 0;
}
.detail-header .description {
    margin-top: 44rem;
    display: flex;
    align-items: center;
}
.detail-header .description .item {
    display: flex;
    align-items: center;
}
.detail-header .description .item .content {
    display: flex;
    flex-direction: column;
    gap: 24rem; line-height:24px;  font-size: 24rem;
}
.detail-header .description .item::after {
    content: '';
    margin: 0 30rem;
    align-self: stretch;
    flex-shrink: 0;
    width: 1rem;
    background-color: #FFD9D9;
}
.detail-header .description .item:last-child::after {
    display: none;
}
.detail-header .description .item .content .label {
    font-size: 24rem;
    color: #999999;
}
.detail-header .description .item .content .value {
    font-size: 24rem;
    color: #666666;
}
.moreg .download-button {
    margin-top: 46rem;
    width: 100%;
    height: 88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rem;
    line-height: 1;
    color: white;
    background-color: #FF4D4D;
    border-radius: 198rem;
}

.game-screenshot {
    padding-top: 20rem;
}
.game-screenshot .list {
    overflow: auto;
    display: flex;
    align-items: center;
    gap: 24rem;
}
.game-screenshot .list .item {
    flex-shrink: 0;
    width: 280rem;
    overflow: hidden;
}
.game-screenshot .list .item img {
    width: 100%;
    height: 100%;
}
.detail-description {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.detail-description .content {
    display: flex;
    flex-direction: column;
}
.detail-description .content h3 {
    margin: 28rem 0;
    font-size: 36rem;
    color: #FA4B4A;
    display: flex;
    align-items: center;
}
.detail-description .content h3::before {
    content: '';
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: #FF4D4D;
    flex-shrink: 0;
    margin-right: 16rem;
}
.detail-description .content p {
    font-size: 28rem;
    color: #666666;
    white-space: pre-wrap;
    line-height: 58rem;
}
.related-game-swiper-wrap {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.related-game-swiper-wrap .related-game-swiper {
    position: relative;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}
.related-game-swiper-pagination {
    margin-top: 40rem;
    display: flex;
    justify-content: center;
    gap: 20rem;
}
.related-game-swiper-pagination .swiper-pagination-bullet {
    margin: 0 !important;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #E4E4E5;
}
.related-game-swiper-pagination .swiper-pagination-bullet-active {
    width: 36rem;
    height: 16rem;
    border-radius: 198rem;
    background-color: #FA4B4A;
}
.related-game-swiper-wrap .related-game-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30rem;
}
.related-game-swiper-wrap .related-game-swiper .swiper-slide .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 32rem;
    box-sizing: border-box;
    width: 300rem;
    height: 380rem;
    border-radius: 16rem;
    background-color: #F6F6F8;
}
.related-game-swiper-wrap .related-game-swiper .swiper-slide .item .thumbnail {
    width: 120rem;
    height: 120rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.related-game-swiper-wrap .related-game-swiper .swiper-slide .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.related-game-swiper-wrap .related-game-swiper .swiper-slide .item .title {
    margin-top: 20rem;
    width: 218rem;
    text-align: center;
    font-size: 30rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-game-swiper-wrap .related-game-swiper .swiper-slide .item .description {
    margin-top: 12rem;
    width: 218rem;
    text-align: center;
    font-size: 24rem;
    color: #999999;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-game-swiper-wrap .related-game-swiper .swiper-slide .item .download-button {
    margin-top: 28rem;
    flex-shrink: 0;
    width: 136rem;
    height: 60rem;
    border-radius: 198rem;
    background-color: #FFEBEA;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rem solid #FF7979;
    font-size: 24rem;
    color: #FA4B4A;
}
.game-news {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.game-news .list {
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.game-news .list .item {
    display: flex;
    align-items: center;
    border-radius: 16rem;
    overflow: hidden;
    background-color: #F5F5F7;
    gap: 28rem;
}
.game-news .list .item .thumbnail {
    width: 240rem;
    height: 240rem;
    flex-shrink: 0;
}
.game-news .list .item .thumbnail img {
    width: 100%;
    height: 100%;
		object-fit: cover;
}
.game-news .list .item .content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 30rem 16rem 30rem 0;
}
.game-news .list .item .content .title {
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-news .list .item .content .description {
    margin-top: 20rem;
    font-size: 28rem;
    color: #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-news .list .item .content .footer {
    display: flex;
    align-items: center;
    margin-top: 46rem;
}
.game-news .list .item .content .footer .time {
    font-size: 24rem;
    color: #999999;
}
.game-news .list .item .content .footer .type {
    margin-left: 16rem;
    font-size: 24rem;
    color: #999999;
    display: flex;
    align-items: center;
}
.game-news .list .item .content .footer .type::before {
    content: '';
    margin-right: 16rem;
    flex-shrink: 0;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: #D9D9D9;
}
.game-album {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.game-album .list {
    display: flex;
    flex-direction: column;
    gap: 40rem;
}
.game-album .list .item {
    display: flex;
    align-items: center;
    gap: 32rem;
}
.game-album .list .item .thumbnail {
    width: 196rem;
    height: 196rem;
    border-radius: 40rem;
    flex-shrink: 0;
    overflow: hidden;
}
.game-album .list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.game-album .list .item .content {
    width: 100%;
    overflow: hidden;
    height: 196rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.game-album .list .item .content .title {
    margin-top: 16rem;
    display: flex;
    align-items: center;
}
.game-album .list .item .content .title span {
    font-size: 32rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-album .list .item .content .title::before {
    content: '';
    width: 25.22rem;
    height: 29rem;
    margin-right: 14rem;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-image: url('../images/title_begin_marker.png');
}
.game-album .list .item .content .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.game-album .list .item .content .footer .time {
    font-size: 24rem;
    color: #999999;
}
.game-album .list .item .content .footer .button {
    width: 192rem;
    height: 64rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF2F2;
    border-radius: 16rem 0 16rem 0;
    font-size: 28rem;
    color: #FA4B4A;
}
.album-list-swiper-wrap {
    display: flex;
    align-items: center;
    padding: 0 28rem;
}
.album-list-swiper {
    width: 100%;
    display: flex;
    align-items: center;
}
.album-list-swiper-pagination {
    margin-top: 40rem;
    display: flex;
    justify-content: center;
    gap: 20rem;
}
.album-list-swiper-pagination .swiper-pagination-bullet {
    margin: 0 !important;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #E4E4E5;
}
.album-list-swiper-pagination .swiper-pagination-bullet-active {
    width: 36rem;
    height: 16rem;
    border-radius: 198rem;
    background-color: #FA4B4A;
}
.album-list-swiper .swiper-slide {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.album-list-swiper .swiper-slide .item {
    width: 340rem;
    height: 340rem;
    border-radius: 16rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40rem;
    box-sizing: border-box;
    box-shadow: 0 0 40rem 0 rgba(0,0,0,0.06);
}
.album-list-swiper .swiper-slide .item .thumbnail {
    width: 140rem;
    height: 140rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.album-list-swiper .swiper-slide .item  .thumbnail img {
    width: 100%;
    height: 100%;
}
.album-list-swiper .swiper-slide .item  .title {
    margin-top: 16rem;
    width: 280rem;
    text-align: center;
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 16rem;
    box-sizing: border-box;
    border-bottom: 1rem solid #E6E6E6;
}
.album-list-swiper .swiper-slide .item .description {
    margin-top: 16rem;
    width: 280rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.album-list-swiper .swiper-slide .item .description .total {
    font-size: 24rem;
    color: #4D4D4D;
}
.album-list-swiper .swiper-slide .item .description .total .number {
    color: #FA4A4A;
}
.album-list-swiper .swiper-slide .item .description .time {
    font-size: 24rem;
    color: #999999;
}
.album-list-tabs {
    padding-top: 82rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.album-list-tabs .item {
    position: relative;
    width: 332rem;
    height: 88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 28rem;
    background: linear-gradient(90deg, #F5F7F9 0%, #EEF0F2 100%);
    font-size: 30rem;
    color: #999999;
}
.album-list-tabs .item.game::before {
    content: '';
    position: absolute;
    right: 0;
    width: 140rem;
    height: 88rem;
    background-size: 100% 100%;
    background-image: url('../images/game_album_tab_background.png');
}
.album-list-tabs .item.app::before {
    content: '';
    position: absolute;
    right: 0;
    width: 140rem;
    height: 88rem;
    background-size: 100% 100%;
    background-image: url('../images/app_album_tab_background.png');
}
.album-list-tabs .item.selected {
    color: white;
    background: linear-gradient(90deg, #FDCA57 0%, #FBAF04 100%);
}
.album-list-tabs .item.selected::after {
    content: '';
    position: absolute;
    bottom: -32rem;
    left: calc(50% - 32rem / 2);
    width: 32rem;
    height: 32rem;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-image: url(../images/album_tab_selected_triangle.png);
}
.album-list {
    padding-top: 60rem;
    display: flex;
    flex-direction: column;
}
.album-list .list {
    display: flex;
    flex-direction: column;
    gap: 48rem;
}
.album-list .list > .item {
    display: flex;
    flex-direction: column;
    gap: 20rem;
}
.album-list .list > .item .header {
    display: flex;
    align-items: center;
}
.album-list .list > .item .header::before {
    content: '';
    width: 28.7rem;
    height: 33rem;
    margin-right: 16rem;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-image: url('../images/title_begin_marker.png');
}
.album-list .list > .item .header .title {
    margin-right: 8rem;
    font-size: 32rem;
    font-weight: bold;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-list .list > .item .header .add-button {
    margin-left: auto;
    width: 128rem;
    height: 36rem;
    background: #FFFFFF;
    border-radius: 198rem;
    border: 2rem solid #FA4B4A;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: 16rem;
    box-sizing: border-box;
    font-size: 20rem;
    line-height: 1;
    color: #FA4B4A;
}
.album-list .list > .item .header .add-button::after {
    content: '';
    box-sizing: border-box;
    margin-left: auto;
    flex-shrink: 0;
    width: 36rem;
    height: 36rem;
    background-size: 100% 100%;
    background-image: url('../images/add_button_icon.png');
}
.album-list .list > .item .main {
    display: flex;
    justify-content: space-between;
    border-radius: 16rem;
    background-color: #F5F7F9;
    padding: 38rem 30rem;
}
.album-list .list > .item .main .item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.album-list .list > .item .main .item .thumbnail {
    width: 120rem;
    height: 120rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.album-list .list > .item .main .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.album-list .list > .item .main .item .title {
    margin-top: 12rem;
    width: 140rem;
    text-align: center;
    font-size: 26rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-list .list > .item .main .item .download-button {
    margin-top: 16rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rem;
    height: 60rem;
    background-color: #fff;
    border: 2rem solid #FFCBCB;
    border-radius: 198rem;
    font-size: 24rem;
    color: #FA4B4A;
}
.album-detail-header {
    padding-top: 40rem;
    display: flex;
    flex-direction: column;
}
.album-detail-header > .title {
    display: flex;
    align-items: center;
}
.album-detail-header > .title::before {
    content: '';
    width: 38rem;
    height: 44rem;
    margin-right: 16rem;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-image: url('../images/title_begin_marker.png');
}
.album-detail-header > .title span {
    font-size: 40rem;
    font-weight: bold;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-detail-header > .tags {
    margin-top: 20rem;
    overflow: auto;
    display: flex;
    align-items: center;
    gap: 60rem;
}
.album-detail-header > .tags div {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-size: 28rem;
    color: #999999;
}
.album-detail-header > .tags div::before {
    content: '';
    flex-shrink: 0;
    margin-right: 12rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: #FA4B4A;
}
.album-detail-header .editor-recommend {
    margin-top: 32rem;
    padding: 54rem 50rem 0 50rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 520rem;
    background-size: 100% 100%;
    background-image: url('../images/editor_recommend_background.png');
}
.album-detail-header .editor-recommend > .title {
    flex-shrink: 0;
    width: 280rem;
    height: 40rem;
    background-size: 100% 100%;
    background-image: url('../images/editor_recommend_title.png');
}
.album-detail-header .editor-recommend .main {
    margin-top: 40rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 28rem;
    border-bottom: 1.72rem solid #F2E7E7;
}
.album-detail-header .editor-recommend .main .header {
    display: flex;
    align-items: center;
    gap: 24rem;
}
.album-detail-header .editor-recommend .main .header .thumbnail {
    width: 136rem;
    height: 136rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.album-detail-header .editor-recommend .main .header .thumbnail img {
    width: 100%;
    height: 100%;
}
.album-detail-header .editor-recommend .main .header .content {
    overflow: hidden;
    height: 136rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.album-detail-header .editor-recommend .main .header .content .title {
    font-size: 30rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-detail-header .editor-recommend .main .header .content .description {
    font-size: 24rem;
    color: #999999;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-detail-header .editor-recommend .main .header .content .score {
    font-size: 24rem;
    line-height: 1;
    color: #999999;
    display: flex;
    align-items: center;
}
.album-detail-header .editor-recommend .main .header .content .score::before {
    content: '';
    margin-right: 8rem;
    width: 24rem;
    height: 24rem;
    background-size: 100% 100%;
    background-image: url('../images/score_icon.png');
    flex-shrink: 0;
}
.album-detail-header .editor-recommend .main > .description {
    margin-top: 24rem;
    font-size: 24rem;
    color: #4D4D4D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-detail-header .editor-recommend .download-button {
    margin-top: 28rem;
    width: 100%;
    height: 88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rem;
    line-height: 1;
    color: white;
    background-color: #FF4D4D;
    border-radius: 198rem;
}
.album-detail-header .editor-recommend .download-button::before {
    content: '';
    margin-right: 12rem;
    flex-shrink: 0;
    width: 36rem;
    height: 36rem;
    background-size: 100% 100%;
    background-image: url('../images/download_icon.png');
}
.album-detail-list {
    padding-top: 60rem;
    padding-bottom: 60rem;
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.album-detail-list .item {
    display: flex;
    align-items: center;
    padding-bottom: 32rem;
    border-bottom: 1rem solid #E6E6E6;
    gap: 24rem;
}
.album-detail-list .item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.album-detail-list .item .thumbnail {
    width: 136rem;
    height: 136rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.album-detail-list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.album-detail-list .item .content {
    margin-right: 8rem;
    height: 136rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.album-detail-list .item .content .header {
    display: flex;
    align-items: center;
    gap: 16rem;
}
.album-detail-list .item .content .header .title {
    font-size: 30rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-detail-list .item .content .header .serial-number {
    flex-shrink: 0;
    font-size: 20rem;
    color: white;
    line-height: 1;
    border-radius: 198rem;
    padding: 4rem 12rem;
}
.album-detail-list .item:nth-child(1) .content .header .serial-number {
    background-color: #F54652;
}
.album-detail-list .item:nth-child(2) .content .header .serial-number {
    background-color: #FF9056;
}
.album-detail-list .item:nth-child(3) .content .header .serial-number {
    background-color: #FEC63F;
}
.album-detail-list .item .content .type {
    font-size: 24rem;
    color: #999999;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-detail-list .item .content .description {
    font-size: 24rem;
    color: #4D4D4D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-detail-list .item .download-button {
    margin-left: auto;
    flex-shrink: 0;
    width: 60rem;
    height: 60rem;
    background-size: 100% 100%;
    background-image: url('../images/arrow_download_button.png');
}
.hot-album {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.hot-album .list {
    display: flex;
    flex-direction: column;
    gap: 38rem;
}
.hot-album .list .item {
    display: flex;
    flex-direction: column;
    gap: 12rem;
}
.hot-album .list .item .content {
    display: flex;
    align-items: center;
}
.hot-album .list .item .content .serial-number {
    margin-right: 16rem;
    width: 32rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rem;
    line-height: 1;
    color: #999999;
    flex-shrink: 0;
}
.hot-album .list .item:nth-child(1) .content .serial-number,
.hot-album .list .item:nth-child(2) .content .serial-number,
.hot-album .list .item:nth-child(3) .content .serial-number {
    color: #FA4B4A;
}
.hot-album .list .item:nth-child(4) .content .serial-number,
.hot-album .list .item:nth-child(5) .content .serial-number {
    color: #FF922E;
}
.hot-album .list .item .content .title {
    margin-right: 8rem;
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-album .list .item .content .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 24rem;
    color: #999999;
}
.hot-album .list .item .description {
    margin-left: 48rem;
    font-size: 24rem;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rankings-banner {
    width: 100%;
    height: 220rem;
}
.rankings-tabs {
    overflow: auto;
    display: flex;
    align-items: center;
    background-color: #836DF5;
}
.rankings-tabs .item {
    flex-shrink: 0;
    font-size: 28rem;
    color: white;
    padding: 13rem 32rem;
}
.rankings-tabs .item.selected {
    background-color: #5D3FF5;
}
.rankings-list {
    padding-top: 60rem;
    padding-bottom: 60rem;
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.rankings-list .item {
    display: flex;
    align-items: center;
    padding-bottom: 32rem;
    border-bottom: 1rem solid #E6E6E6;
}
.rankings-list .item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.rankings-list .item .serial-number {
    width: 40rem;
    height: 40rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rem;
    color: #4D4D4D;
    background-size: 100% 100%;
    flex-shrink: 0;
}
.rankings-list .item:nth-child(1) .serial-number span,
.rankings-list .item:nth-child(2) .serial-number span,
.rankings-list .item:nth-child(3) .serial-number span {
    display: none;
}
.rankings-list .item:nth-child(1) .serial-number {
    background-image: url('../images/rankings_top_1.png');
}
.rankings-list .item:nth-child(2) .serial-number {
    background-image: url('../images/rankings_top_2.png');
}
.rankings-list .item:nth-child(3) .serial-number {
    background-image: url('../images/rankings_top_3.png');
}
.rankings-list .item .thumbnail {
    margin-left: 16rem;
    flex-shrink: 0;
    width: 120rem;
    height: 120rem;
    overflow: hidden;
    border-radius: 30rem;
}
.rankings-list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.rankings-list .item .content {
    margin-left: 20rem;
    margin-right: 8rem;
    height: 120rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}
.rankings-list .item .content .title {
    font-size: 30rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rankings-list .item .content .description {
    font-size: 24rem;
    color: #999999;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rankings-list .item .content .score {
    font-size: 24rem;
    line-height: 1;
    color: #999999;
    display: flex;
    align-items: center;
}
.rankings-list .item .content .score::before {
    content: '';
    margin-right: 8rem;
    width: 24rem;
    height: 24rem;
    background-size: 100% 100%;
    background-image: url('../images/score_icon.png');
    flex-shrink: 0;
}
.rankings-list .item .download-button {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rem;
    height: 60rem;
    background-color: #fff;
    border: 2rem solid #FFCBCB;
    border-radius: 198rem;
    font-size: 24rem;
    color: #FA4B4A;
}
.rankings-group-list {
    padding-top: 48rem;
    display: flex;
    flex-direction: column;
}
.rankings-group-list .list {
    display: flex;
    flex-direction: column;
    gap: 24rem;
}
.rankings-group-list .list .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8rem;
    height: 240rem;
    background-color: #F5F7F9;
    border-radius: 16rem;
    padding: 0 40rem;
}
.rankings-group-list .list .item .left {
    width: 475rem;
    display: flex;
    flex-direction: column;
    gap: 28rem;
}
.rankings-group-list .list .item .left .title-wrap {
    display: flex;
    align-items: center;
    gap: 12rem;
}
.rankings-group-list .list .item .left .title-wrap::before {
    content: '';
    width: 36rem;
    height: 36rem;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-image: url('../images/rankings_item_title_begin_marker.png');
}
.rankings-group-list .list .item .left .title-wrap .title {
    font-size: 32rem;
    font-weight: bold;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rankings-group-list .list .item .left .description {
    font-size: 24rem;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rankings-group-list .list .item .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rem;
}
.rankings-group-list .list .item .right .thumbnail {
    position: relative;
    width: 120rem;
    height: 120rem;
    flex-shrink: 0;
}
.rankings-group-list .list .item .right .thumbnail::before {
    content: '';
    position: absolute;
    top: -34rem;
    right: -34rem;
    flex-shrink: 0;
    width: 68rem;
    height: 68rem;
    background-size: 100% 100%;
    background-image: url('../images/rankings_item_hat.png');
}
.rankings-group-list .list .item .right .thumbnail img {
    border-radius: 30rem;
    width: 100%;
    height: 100%;
}
.rankings-group-list .list .item .right .title {
    width: 120rem;
    text-align: center;
    font-size: 26rem;
    color: #4D4D4D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rankings-detail-header-wrap {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.rankings-detail-header {
    height: 180rem;
    padding: 0 40rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-image: url('../images/rankings_detail_header_background.png');
    background-color: #fff;
    border-radius: 16rem;
    box-shadow: 0 0 32rem 0 rgba(0,0,0,0.08);
}
.rankings-detail-header .title {
    display: flex;
    align-items: center;
    gap: 12rem;
}
.rankings-detail-header .title::before {
    content: '';
    width: 36rem;
    height: 36rem;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-image: url('../images/rankings_item_title_begin_marker.png');
}
.rankings-detail-header .title span {
    font-size: 32rem;
    font-weight: bold;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rankings-detail-header .description {
    display: flex;
    align-items: center;
    gap: 16rem;
}
.rankings-detail-header .description::before {
    content: '';
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: #FF4D4D;
    flex-shrink: 0;
}
.rankings-detail-header .description span {
    font-size: 24rem;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.more-rankings {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.more-rankings .list {
    display: flex;
    flex-direction: column;
    gap: 24rem;
}
.more-rankings .list .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32rem;
    height: 180rem;
    background-color: #F5F7F9;
    border-radius: 16rem;
}
.more-rankings .list .item .left {
    width: 450rem;
    display: flex;
    flex-direction: column;
    gap: 12rem;
}
.more-rankings .list .item .left .title {
    display: flex;
    align-items: center;
    gap: 12rem;
}
.more-rankings .list .item .left .title::before {
    content: '';
    width: 36rem;
    height: 36rem;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-image: url('../images/rankings_item_title_begin_marker.png');
}
.more-rankings .list .item .left .title a {
    font-size: 32rem;
    font-weight: bold;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.more-rankings .list .item .left .description {
    font-size: 24rem;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.more-rankings .list .item .right {
    width: 100rem;
    height: 100rem;
    position: relative;
    margin-right: 60rem;
    display: flex;
    align-items: center;
}
.more-rankings .list .item .right .thumbnail {
    position: absolute;
    z-index: 4;
    width: 100rem;
    height: 100rem;
    border-radius: 30rem;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #fff;
}
.more-rankings .list .item .right .thumbnail:nth-child(2) {
    position: absolute;
    z-index: 3;
    left: 28rem;
}
.more-rankings .list .item .right .thumbnail:nth-child(2) img {
    opacity: 0.5;
}
.more-rankings .list .item .right .thumbnail:nth-child(3) {
    position: absolute;
    z-index: 2;
    left: 48rem;
}
.more-rankings .list .item .right .thumbnail:nth-child(3) img {
    opacity: 0.25;
}
.more-rankings .list .item .right .thumbnail:nth-child(4) {
    position: absolute;
    z-index: 1;
    left: 60rem;
}
.more-rankings .list .item .right .thumbnail:nth-child(4) img {
    opacity: 0.1;
}
.more-rankings .list .item .right .thumbnail img {
    width: 100%;
    height: 100%;
}
.game-evaluation {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.game-evaluation .list {
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.game-evaluation .list .item {
    display: flex;
    align-items: center;
}
.game-evaluation .list .item .score {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112rem;
    height: 40rem;
    background-color: #FA4B4A;
    border-radius: 198rem;
    font-size: 24rem;
    color: white;
    flex-shrink: 0;
}
.game-evaluation .list .item .title {
    margin-left: 16rem;
    margin-right: 8rem;
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-evaluation .list .item .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 24rem;
    color: #999999;
}
.game-activity {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.game-activity .image-group {
    display: flex;
    flex-direction: column;
    gap: 24rem;
}
.game-activity .image-group .big-image {
    display: flex;
    flex-direction: column;
    border-radius: 16rem;
    overflow: hidden;
}
.game-activity .image-group .big-image img {
    height: 320rem;
}
.game-activity .image-group .big-image div {
    width: 100%;
    height: 80rem;
    padding: 0 16rem;
    text-align: center;
    background-color: #F6F6F8;
    font-size: 28rem;
    color: #1A1A1A;
    line-height: 80rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-activity .image-group .little-image-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.game-activity .image-group .little-image-wrap .item {
    width: 335rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-radius: 16rem;
    overflow: hidden;
}
.game-activity .image-group .little-image-wrap .item img {
    height: 220rem;
}
.game-activity .image-group .little-image-wrap .item div {
    width: 100%;
    height: 80rem;
    padding: 0 16rem;
    text-align: center;
    background-color: #F6F6F8;
    font-size: 28rem;
    color: #1A1A1A;
    line-height: 80rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-activity .list {
    margin-top: 40rem;
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.game-activity .list .item {
    display: flex;
    align-items: center;
}
.game-activity .list .item .title {
    display: flex;
    align-items: center;
    margin-right: 8rem;
    overflow: hidden;
}
.game-activity .list .item .title span {
    font-size: 28rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-activity .list .item .title::before {
    content: '';
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: #D9D9D9;
    flex-shrink: 0;
    margin-right: 16rem;
}
.game-activity .list .item .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 24rem;
    color: #999999;
}
.download-rankings {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
}
.download-rankings .top-list {
    display: flex;
    flex-direction: column;
    gap: 52rem;
}
.download-rankings .top-list .item {
    display: flex;
    align-items: center;
}
.download-rankings .top-list .item .serial-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40rem;
    height: 40rem;
    border-radius: 8rem;
    font-size: 24rem;
    color: white;
    flex-shrink: 0;
}
.download-rankings .top-list .item:nth-child(1) .serial-number {
    background-color: #F54652;
}
.download-rankings .top-list .item:nth-child(2) .serial-number {
    background-color: #FF9056;
}
.download-rankings .top-list .item:nth-child(3) .serial-number {
    background-color: #FEC63F;
}
.download-rankings .top-list .item .thumbnail {
    margin-left: 20rem;
    width: 140rem;
    height: 140rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.download-rankings .top-list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.download-rankings .top-list .item .content {
    margin-left: 28rem;
    margin-right: 8rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 140rem;
}
.download-rankings .top-list .item .content .title {
    font-size: 30rem;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.download-rankings .top-list .item .content .description {
    font-size: 24rem;
    color: #999999;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.download-rankings .top-list .item .content .score {
    font-size: 24rem;
    line-height: 1;
    color: #999999;
    display: flex;
    align-items: center;
}
.download-rankings .top-list .item .content .score::before {
    content: '';
    margin-right: 12rem;
    width: 32rem;
    height: 32rem;
    background-size: 100% 100%;
    background-image: url('../images/score_icon.png');
    flex-shrink: 0;
}
.download-rankings .top-list .item .download-button {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rem;
    height: 60rem;
    background-color: #fff;
    border: 2rem solid #FFCBCB;
    border-radius: 198rem;
    font-size: 24rem;
    color: #FA4B4A;
}
.download-rankings .list {
    margin-top: 50rem;
    display: flex;
    flex-direction: column;
    gap: 34rem;
}
.download-rankings .list .item {
    display: flex;
    align-items: center;
}
.download-rankings .list .item .serial-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40rem;
    height: 40rem;
    background-color: #F5F7F9;
    border-radius: 8rem;
    font-size: 24rem;
    color: #999999;
    flex-shrink: 0;
}
.download-rankings .list .item .title {
    margin-left: 20rem;
    margin-right: 8rem;
    font-size: 30rem;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.download-rankings .list .item .description {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 24rem;
    color: #999999;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-message {
    padding-top: 40rem;
    padding-bottom: 20rem;
    font-size: 32rem;
    color: #4D4D4D;
}
.server-list-dropmenu {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100rem;
    background-color: #F5F5F7;
    padding: 0 28rem;
}
.server-list-dropmenu > .item {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12rem;
}
.server-list-dropmenu > .item::after {
    content: '';
    width: 32rem;
    height: 32rem;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-image: url('../images/dropmenu_arrow_icon.png');
}
.server-list-dropmenu > .item:hover::after {
    transform: rotate(180deg);
}
.server-list-dropmenu > .item.selected::after {
    background-image: url('../images/dropmenu_arrow_selected_icon.png');
}
.server-list-dropmenu > .item > span {
    font-size: 28rem;
    color: #999999;
}
.server-list-dropmenu > .item.selected > span {
    color: #FA4B4A;
}
.server-list-dropmenu > .item .content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    padding: 0 28rem;
    background-color: #fff;
    border-radius: 0 0 16rem 16rem;
    box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.08);
}
.server-list-dropmenu > .item:hover .content {
    display: flex;
}
.server-list-dropmenu > .item .content .item {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rem;
    border-bottom: 1rem solid #E6E6E6;
}
.server-list-dropmenu > .item .content .item:last-child {
    border-bottom: none;
}
.server-list-dropmenu > .item .content .item span {
    margin-right: 8rem;
    font-size: 28rem;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.server-list-dropmenu > .item .content .item.selected span {
    color: #F54A49;
}
.server-list-dropmenu > .item .content .item.selected::after {
    content: '';
    margin-left: auto;
    width: 36rem;
    height: 36rem;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-image: url('../images/selected_icon.png');
}
.server-list {
    padding-top: 40rem;
    padding-bottom: 40rem;
    display: flex;
    flex-direction: column;
    gap: 32rem;
}
.server-list .item {
    display: flex;
    align-items: center;
    padding-bottom: 32rem;
    border-bottom: 1rem solid #E6E6E6;
}
.server-list .item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.server-list .item .thumbnail {
    width: 120rem;
    height: 120rem;
    border-radius: 30rem;
    overflow: hidden;
    flex-shrink: 0;
}
.server-list .item .thumbnail img {
    width: 100%;
    height: 100%;
}
.server-list .item .content {
    margin-left: 20rem;
    margin-right: 8rem;
    overflow: hidden;
    height: 115rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.server-list .item .content .header {
    display: flex;
    align-items: center;
    gap: 16rem;
}
.server-list .item .content .header .title {
    font-size: 30rem;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.server-list .item .content .header .android-tag {
    width: 92rem;
    height: 40rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 24rem;
    color: #11CB9E;
    background-size: 100% 100%;
    background-image: url('../images/tag_1.png');
}
.server-list .item .content .header .ios-tag {
    width: 92rem;
    height: 40rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 24rem;
    color: #FF7A2F;
    background-size: 100% 100%;
    background-image: url('../images/tag_2.png');
}
.server-list .item .content .description {
    font-size: 24rem;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.server-list .item .content .description .value {
    color: #666666;
}
.server-list .item .download-button {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rem;
    height: 60rem;
    background-color: #fff;
    border: 2rem solid #FFCBCB;
    border-radius: 198rem;
    font-size: 24rem;
    color: #FA4B4A;
}




.liebtvb{margin:20px 0 0;margin-left:-20px;overflow:hidden}
.liebtvb .video-detail{background:#333; width:-webkit-calc(50% - 20px);
width:-moz-calc(50% - 20px);width:calc(50% -20px);float:left;margin-left:20px;margin-bottom:10px}
.liebtvb .img-show{width:100%;height:145px;position:relative;overflow:hidden;display:block}
.liebtvb .img-show img{width:100%;height:auto}
.liebtvb .img-show .play{position:absolute;width:46px;height:46px;left:50%;top:50%;margin-left:-23px;margin-top:-23px}
.liebtvb .img-show .icon5{width:46px;height:46px;background:url(../images/v.png) no-repeat center}
.liebtvb .img-show:hover .icon5{background:url(../images/v2.png) no-repeat center}
.liebtvb .img-detail .bname{line-height:40px;height:40px;overflow:hidden;text-align:center;font-size:14px; color: #FFF}


.wen ul{ width:90%;  padding-top:4px;}
.wen ul li{ border-bottom:#d9d9d9 1px solid; font-size:13px; color:#888; padding-top:10px; padding-bottom:10px;}
/*{ padding-bottom:10px;}*/
.wen ul li span img{ margin-right:5px; float:left; border-radius:5px;}
.wen h2{ font-size:15px; padding-bottom:5px;}
.wen h2{padding-top:3px;}
.wen h2,.wen h2 a,.wen ul li span a{color:#225599;}
/*{color:#225599;}*/
.wen ul li span{ line-height: 25px; padding-bottom:5px; display:block;}


.tuwenn{}
.tuwenn ul{margin-left:-20px;overflow:hidden}
.tuwenn ul li{ width:-webkit-calc(50% - 30px);
width:-moz-calc(50% - 30px);
width:calc(50% -30px);background:#ebeef5;border-radius:4px;padding:5px;float:left;margin-left:20px;margin-bottom:20px}
.tuwenn ul li .img{height:110px;position:relative;overflow:hidden}
.tuwenn ul li .img img{width:100%;height:129px}
.tuwenn ul li .bname{font-size:16px;color:#333;height:30px;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}

.tlieb{margin:20px 0 0;margin-left:-20px;overflow:hidden}
.tlieb a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-overflow:ellipsis;background:#333; width:-webkit-calc(33.3333% - 30px);
width:-moz-calc(33.3333% - 30px);
width:calc(33.3333% -30px);float:left;margin-left:20px;margin-bottom:10px;display:block;padding:5px; text-align:center; color:#FFF;font-size: 24rem;}


.jlieb{overflow:hidden}
.jlieb a{width:calc(100% - 26px);display:block;height:45px;line-height:45px;border-bottom:1px solid #eee;background:url(../images/sp.png) no-repeat left;background-size:26px;padding-left:26px;font-size:16px;overflow:hidden;white-space: nowrap;
    text-overflow: ellipsis; color:#000
  }







.bsxxc{display:flex;justify-content:space-between;overflow:auto}
.bsxxc li{float:left}
.bsxxc li a{padding:0px 10px;display:block;font-size:16px;font-family:Microsoft YaHei;font-weight:400;text-align:center;cursor:pointer;color:#fff;border:1px solid #fc614a;background:#fc614a;height:40px;line-height:40px}
.bsxxc li:first-child a{border-radius:4px 0px 0px 4px}
.bsxxc li a.active{background:#ed9e5e;color:#fff}
.bsxxc li:last-child a{border-radius:0px 4px 4px 0px}


.contentmf{margin-top:20px;width:100%; overflow:hidden;white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling:touch;}
.contentmf a{border:1px solid #ededed;border-radius:4px;width:70px;font-size:16px;background:#ebeef5;margin-left:4px; display:inline-block; text-align:center; padding:10px 0px}
.contentmf a.active{color: #fa4e4a;font-weight:bold;border: 1px solid #fa4d4a;position:relative;}



.matchb h6{display:flex;height:24px;line-height:24px;align-items:center;margin:10px 0px}
.matchb h6 time{font-size:12px;font-weight:400;line-height:25px;color:#999999;height:}
.match  h6 time:before{content:"";display:inline-block;width:2px;height:18px;background:#1c969f;margin-right:6px;position:relative;top:2px}

.match_bj{width:100%;position:relative;height:280px;overflow:hidden;background: linear-gradient(90deg,#fb534a  18.8%,#e6524f 49.96%,#fb504b 81.5%);margin-top:10px;}

 .match_bg .match_bg_wrapper{width:1200px;margin:auto}
.match_bg .match_bg_wrapper .match_bg_container{position:absolute;display:flex;justify-content:center;bottom:0}
.fixed_score_box .fixed_score_top{color:#fff}

.scoreleft{text-align:center;width:30%}
.scoreright{text-align:center;width:30%}
.scoreleft h1,.scoreright h1{height:26px;font-size:20px;font-weight:bold;line-height:26px;color:#FFFFFF;margin-top:10px}
.scoreright .image_container,.scoreleft .image_container{width:80px;height:80px;border-radius:50%;background-color:white;display:flex;justify-content:center;align-items:center;margin:0 auto}
.scoreright .image_container img,.scoreleft .image_container img{width:56px;height:56px;border-radius:50%}
.score_name{text-align:center;width:40%}
.league_name{width:100%;height:28px;line-height:28px;padding:4px 27px;font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;text-align:center;padding-top:50px}
.score{width:100%;display:flex;justify-content:space-around;align-items:center}
.match_score{display:flex;justify-content:space-between;align-items:center;margin:25px 0;height:39px;padding:0 12px}
.match_score > div{font-size:32px;font-family:DIN;font-weight:bold;line-height:39px;color:#FFFFFF}
.match_status{height:36px;background:#FFFFFF;border-radius:18px;font-size:16px;font-family:Microsoft YaHei;font-weight:bold;line-height:36px;width:140px;margin:auto;color:#fa504b}
.match_status.live{color:#FF2727}
.scoreleft.scoreright{flex-direction:row-reverse}
.scoreleft.scoreright .image_container{margin-left:20px}
.match_details{margin-top:10px;margin-bottom:10px}



.ntags{}
.ntags i:nth-child(1) {
	background-color: #ecf4ff;
	color: #6190c6;
}
.ntags i:nth-child(2) {
	background-color: #fbe7e6;
	color: #e69882;
}
.ntags i:nth-child(3) {
	background-color: #e3f6e0;
	color: #76ab7d;
}
.ntags i:nth-child(4) {
	background-color: #f7e1f8;
	color: #da80d7;
}
.ntags i:nth-child(5) {
	background-color: #D3F2FD;
	color: #3072f6;
}
.ntags i:nth-child(6) {
	background-color: #e3f6e0;
	color: #76ab7d;
}
.ntags {
	margin: 10px;
}
.ntags i {
	padding: 4px 12px;
	display: inline-block;
	font-style: normal;
	font-size: 18px;
	margin-left: 5px; margin-bottom:5px;
}
.ntags i a{ color:#333}


.videony{position:relative}
.videony img.full{width:100%;height:auto}
.videony img.play_icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}


.bsggf{}
.bsggf ul{}
.bsggf ul li{font-size:20rem;margin-right:10px;background:#CCC;display:inline-block;padding:10px 20px;margin-top:10px;margin-bottom:10px;border-radius:6px}
.bsggf ul li.f{background:#fb4e4a}
.bsggf ul li.f a{color:#fff}


.fixscotc{color:#333}
.fixscotc p{font-size:14px;line-height:22px;margin-bottom:10px}
.fixscotc p a{margin-right:10px}
.fixscotc p span.bname{color:#4C59CE}

.zbds{}
.zbds img{width:100%}

.nowu{text-align:center;margin:40px 0px;min-height:190px}
.nowu img{width:100px}
.nowu span{display:block; color:#CCC}


.matchb{}
.matchb .rmbss{padding:12px 6px;border-bottom:1px solid #eee;overflow:hidden;}
.matchb .rmbss  a.items-center{font-size: 20rem;width:100%;display:block;}
.matchb .rmbss .strebox{width:100%;}

.rmbss .status{float:left;margin-right:10px}
.rmbss .sj{float:left;margin-right:20px;height:28px; line-height:28px;}
.rmbss .bt{float:left;margin-right:20px;width:100px;height:28px; line-height:28px; margin-bottom:10px;}

.rmbss .zd{height:28px;line-height:28px;float:left;margin-right:10px;/* width:100px; */white-space:nowrap;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-overflow:ellipsis;}
.rmbss .zdlogo{width:24px;float:left;margin-right:10px}
.rmbss .zdlogo img{width:24px;vertical-align:middle}
.rmbss .zdbf{margin-right:2px;float:left;width:30px;background:#ebeef5;border-radius:5px;overflow:hidden;text-align:center}
.rmbss .bf{margin-right:2px;float:left;width:5px;text-align:center}
.rmbss .kdbf{margin-right:10px;float:left;width:30px;background:#ebeef5;border-radius:5px;overflow:hidden;text-align:center}
.rmbss .kdlogo{margin-right:10px;float:left;width:24px}
.rmbss .kdlogo img{width:24px;vertical-align:middle}
.rmbss .kd{height:28px;line-height:28px;float:left;margin-right:10px;width:100px;white-space:nowrap;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-overflow:ellipsis;}
.rmbss .status p{font-weight:400;font-size:14px;line-height:22px;width:50px;height:28px;display:flex;justify-content:center;align-items:center;color:#fff;border-radius:3px}
.rmbss .status.live p{background:   linear-gradient(90deg,#fc684b,#fc664b);}
.rmbss .status.prelive p{background:linear-gradient(90deg,#929292,#c1c1c1)}
.strtop{float:left}
.strtop,.strtop p{display:flex;align-items:center}
.strtop p{color:#333;justify-content:center}
.strtop p:first-child{font-size:14px}
.strtop p:first-child:before{content:"";width:20px;height:26px;background:url(../images/live_icon.png) no-repeat;background-position:50%;background-size:20px 20px;margin-right:3px}

.strebox .viemore{font-size:12px;display:flex;justify-content:center;align-items:center;height:26px;cursor:pointer;float:left; color:#333}
.strebox .viemore:after{content:"";width:23px;height:26px;}
.strebox .viemore.show:after{transform:rotate(180deg)}
.streabtm{}
.streabtm p {
    color: #fa4a4a;
    font-size: 14px;
    line-height: 26px;
    border-bottom: 1px solid #ff4d4d;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    float: left;
    margin-right: 10px;
}
.more_match{display:block;text-align:center;margin:0 auto;width:130px;height:36px;line-height:36px;font-size:16px;color:#fff;background-color:#4C59CE;border-radius:2px;margin-top:10px}
.more_match  a{color:#fff}
.matchb .clear{clear:both}



 .fadd{ margin-top:10px; color:#444; line-height:28px;font-size:16px;word-spacing:8px;}
 .fadd p{margin-bottom:26px;}
 .fadd img{ max-width:100%!important; height:auto !important}
 .fadd h2{ height:22px; color:#333; line-height:22px; margin:25px 40px 20px 40px; font-size:18px; display:block; background-position:0px -512px; overflow:hidden;clear:both; display:block;}
 .fadd h2 a{ width:22px; height:22px; line-height:22px; background:#4C59CE; text-align:center; color:#FFF; float:left; font-size:12px; font-weight:normal; margin:2px 0px 0px 0px; padding-top:-2px; padding-left:1px;}
 .fadd h2 span{ height:24px; line-height:24px; background:#FFF; display:block; float:left; padding:0 7px;}

.hide{display:none}
.xxk{background:#fb5e4a}
.xxk ul{height:50px;overflow:hidden;white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling:touch;}
.xxk li{font-size: 24rem;height:50px;line-height:50px;margin-right:2px;text-align:center;padding:0 12px;cursor:pointer; display:inline-block; color:#FFF}
.xxk li.on{background:#fa4b4a;color:#FFF}


.qlieb{margin:20px 0 0;overflow:hidden}
.qlieb a{background:#ececec; width:-webkit-calc(25% - 20px);
width:-moz-calc(25% - 20px);
width:calc(25% -20px);float:left;margin-left:10px;margin-right:10px;margin-bottom:10px;display:block;padding:5px}
.qlieb .img-show{position:relative;overflow:hidden;display:block; text-align:center}
.qlieb .img-show img{width:70px;height:70px;margin:0 auto}
.qlieb .img-detail{line-height:40px;height:40px;overflow:hidden;text-align:center;font-size:14px}


.ejdhha {overflow-y:auto;position:relative;width:100%;}
.ejdhha ul {padding-left:2%;height:33px;width:580px;}
.ejdhha ul li {line-height:33px;text-align:center; display:inline-block;position:relative;height:33px;background:#fb7849;border-radius:6px 6px 0px 0px;width:78px;margin-right:4px;font-size:13px;letter-spacing:0.02em;color:#FFFFFF;}
.ejdhha ul li.active {background:#fa4e4a  !important;color:#fff!important;}




.jff{margin-top:10px}
.jff .jfname{font-size:18px;font-weight:bold;padding:10px}
.rankingtdf { width:100%;overflow:hidden;white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling:touch;}
.jff .rankingt{ width:600px;}

.lmbj{background:#fc684b;height:40px;line-height:40px; color:#FFF}
.bgg{border-bottom:1px solid #fc684b}
.log{display:flex;align-items:center;text-align:left}

.truncate{padding-left:5px}
.rankingt .order{display:block;width:28px;height:28px;background:#ccc;font:18px / 30px Helvetica;color:#fff;border-radius:2px;text-align:center}

.rankingt{display:grid;grid-template-columns:5% 23% 9% 9% 9% 9% 9% 9% 9% 9%;height:50px;align-items:center;padding:0 10px}
.ranking_lanqiu_table{display:grid;grid-template-columns:6% 26% 17% 17% 17% 17%;height:50px;align-items:center;padding:0 30px; color:#FFF}
.fixscotc{color:#333}
.fixscotc p{font-size:14px;line-height:22px;margin-bottom:10px}
.fixscotc p a{margin-right:10px}
.fixscotc p span.bname{color:#fa504b}

.liebItem{padding:10px 0px;overflow:hidden}
.citiaimg{}
.citiaimg img{width:150px;height: auto; margin: 0 auto; float:left; margin-right:10px;}
.ctnr{font-size:14px; color:#FFF}
.tyss{overflow:hidden}
.wnr{ text-align:center; padding:30px;}




.taggs{}
.taggs a{border:1px solid #e6e6e6;border-radius:3px;color:#555;display:inline-block;font-size:14px;font-weight:500;margin:0 6px 6px 0;padding:6px 8px;float:left}