:root {
    --pm-c: #39f;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

html {
    overflow: hidden auto;
}

body {
    min-height: 100vh;
    background-color: #fff;
    overflow: hidden;
}

a {
    color: inherit;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

ol,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    padding-left: 0;
    margin: 0;
    line-height: initial;
}

.uk-notification {
    z-index: 2200;
}

/* 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 {
    display: flex;
    flex-direction: column;
}

body>.header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #fff;
}

body>.header .header-top {
    height: 120px;
}

body>.header .logo {}

body>.header .search {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-right: 51px;
    padding: 0 63px 0 20px;
    width: 268px;
    height: 48px;
    border: 1px solid #F35627;
    border-radius: 4px;
    background-color: #fff;
}

body>.header .search::after {
    content: '';
    position: absolute;
    left: 212px;
    width: 84px;
    height: 119px;
    background-size: 100% 100%;
    background-image: url('../images/search_decorate.png');
}

body>.header .search .input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent;
}

body>.header .search .button {
    cursor: pointer;
    width: 20px;
    height: 21px;
    border: none;
    background-color: transparent;
    background-size: 100% 100%;
    background-image: url('../images/search.png');
    flex-shrink: 0;
}

body>.header .nav {
    width: 100%;
    height: 60px;
    background-image: url('../images/nav_background.png');
}

body>.header .nav ul {
    height: 100%;
    gap: 20px;
}

body>.header .nav .item {
    height: 100%;
}

body>.header .nav .item a {
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    width: 96px;
    height: 100%;
    transition: all 0.2s;
}

body>.header .nav .item:hover a,
body>.header .nav .item.active a {
    color: #F35627;
}

body>.header .nav .item a::before {
    content: '';
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: -1;
    width: 96px;
    height: 33px;
    background-size: 100% 100%;
    background-image: url('../images/nav_item_active_background.png');
    flex-shrink: 0;
    transition: all 0.2s;
}

body>.header .nav .item:hover a::before,
body>.header .nav .item.active a::before {
    visibility: visible;
    opacity: 1;
}

body>.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    padding: 25px 0 35px 0;
    width: 100%;
    border-top: 5px solid #F35627;
    background-color: #333333;
}

body>.footer>div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body>.footer .nav-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

body>.footer .nav-wrap .nav-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body>.footer .nav-wrap .nav-group .title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #cccccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

body>.footer .nav-wrap .nav-group .title:hover {
    color: white;
}

body>.footer .nav-wrap .nav-group .title::before {
    content: '';
    flex-shrink: 0;
    background-size: 100% 100%;
}

body>.footer .nav-wrap .nav-group:nth-child(1) .title::before {
    width: 19px;
    height: 20px;
    /*background-image: url('../images/footer_icon_1.png');*/
}

body>.footer .nav-wrap .nav-group:nth-child(2) .title::before {
    width: 22px;
    height: 16px;
    /*background-image: url('../images/footer_icon_2.png');*/
}

body>.footer .nav-wrap .nav-group:nth-child(3) .title::before {
    width: 22px;
    height: 21px;
    background-image: url('../images/footer_icon_3.png');
}

body>.footer .nav-wrap .nav-group:nth-child(4) .title::before {
    width: 22px;
    height: 22px;
    background-image: url('../images/footer_icon_4.png');
}

body>.footer .nav-wrap .nav-group .content {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-auto-rows: 34px;
    gap: 10px 9px;
}

body>.footer .nav-wrap .nav-group .content .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 8px;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 1px solid #a0a0a0;
    border-radius: 4px;
}

body>.footer .nav-wrap .nav-group .content .item::after {
    content: '';
    flex-shrink: 0;
    width: 13px;
    height: 11px;
    background-size: 100% 100%;
    background-image: url('../images/right_arrow_1.png');
}

body>.footer .nav-wrap .nav-group .content .item span {
    font-size: 14px;
    color: #888888;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

body>.footer .nav-wrap .nav-group .content .item:hover span {
    color: white;
}

body>.footer .copyright {
    margin-top: 48px;
    font-size: 14px;
    color: #888888;
}

body>.main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 800px;
    background-position: top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
}

.modal.show {
    visibility: visible;
    opacity: 1;
}

.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;
    transform: translateY(-20px);
    transition: all 0.4s ease;
}

.modal.show>.modal-content {
    transform: translateY(0);
}

.main-container {
    width: 1200px;
}

.main-container-box {
    width: 1200px;
    background-color: #fff;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    padding-bottom: 17px;
    /*border-bottom: 1px solid #eeeeee;*/
}

.section-title>div:nth-child(1) {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.section-title>div:nth-child(1)::before {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 19px;
    background-size: 100% 100%;
    background-image: url('../images/news_icon_1.png');
}

.section-title>div:nth-child(1).game::before {
    width: 26px;
    height: 20px;
    background-image: url('../images/game_icon_1.png');
}

.section-title>div:nth-child(1).gift::before {
    width: 21px;
    height: 21px;
    /*background-image: url('../images/gift_icon_1.png');*/
}

.section-title>div:nth-child(1).ranking::before {
    width: 17px;
    height: 19px;
    background-image: url('../images/ranking_icon_1.png');
}

.section-title>div:nth-child(1) span {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    flex-shrink: 0;
}

.section-title>a {
    font-size: 12px;
    color: #999999;
    flex-shrink: 0;
    transition: all 0.2s;
}

.section-title>a:hover {
    color: #F35627;
}

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 250px;
}

.error-page>.breadcrumbs {
    align-self: flex-start;
}

.error-page>img {
    margin-top: 100px;
}

.error-page>span {
    font-size: 18px;
    color: #999999;
    margin-top: -27px;
}

.error-page>a {
    display: flex;
    align-items: center;
    margin-top: 59px;
    padding: 0 30px;
    height: 50px;
    background-color: #3299ff;
    font-size: 18px;
    color: white;
    line-height: 1;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    margin-top: 19px;
    margin-bottom: 19px;
    font-size: 12px;
    color: #999999;
    white-space: pre;
    z-index: 1;
}

.breadcrumbs>div {
    display: flex;
    align-items: center;
}

.breadcrumbs>div span:not(:last-child)::after {
    content: ' > ';
}

.breadcrumbs>div a {
    transition: all 0.2s;
}

.breadcrumbs>div a:hover {
    color: #F35627;
}

.main-layout {
    display: grid;
    grid-template-columns: 1fr 355px;
    gap: 20px;
}

.main-layout>.left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.main-layout>.sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pagination {
    margin: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

.pagination .page-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 28px;
    border: 1px solid #d2d2d2;
    background-color: #fff;
    font-size: 14px;
    color: #999999;
    line-height: 1;
    transition: all 0.2s;
}

.pagination .page-item:hover,
.pagination .page-item.active {
    color: white;
    border-color: transparent;
    background-color: #F35627;
}

.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
}

@keyframes swing {
    0% {
        transform: rotate(-15deg);
    }

    25% {
        transform: rotate(15deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    75% {
        transform: rotate(15deg);
    }
}

.home-top {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
}

.home-top-hot-recommend {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 27px 22px 20px 22px;
    height: 166px;
    background-color: #f7f9fb;
    position: relative;
}

.home-top-hot-recommend::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -1px;
    width: 113px;
    height: 65px;
    background-size: 100% 100%;
    background-image: url('../images/hot_recommend_tag.png');
}

.home-top-hot-recommend .card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px 20px 20px 20px;
    width: 251px;
    border-radius: 6px;
    box-shadow: 0 0 10px 4px rgba(213, 213, 213, 0.42);
}

.home-top-hot-recommend .card .icon {
    width: 78px;
    height: 78px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.home-top-hot-recommend .card .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-top-hot-recommend .card .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 78px;
}

.home-top-hot-recommend .card .content .title {
    font-size: 16px;
    font-weight: bold;
    color: #F35627;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-top-hot-recommend .card .content .description {
    font-size: 12px;
    color: #888888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-top-hot-recommend .list {
    display: grid;
    grid-template-columns: repeat(4, 191px);
    justify-content: space-between;
    row-gap: 21px;
    flex: 1;
    min-width: 0;
}

.home-top-hot-recommend .list .item {
    display: flex;
    align-items: center;
    min-width: 0;
}

.home-top-hot-recommend .list .item .icon {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.home-top-hot-recommend .list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-top-hot-recommend .list .item .title {
    margin-left: 11px;
    margin-right: 8px;
    font-size: 14px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.home-top-hot-recommend .list .item .title:hover {
    color: #F35627;
}

.home-top-hot-recommend .list .item .detail-button {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 11px;
    height: 24px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 12px;
    color: #666666;
    line-height: 1;
    transition: all 0.2s;
}

.home-top-hot-recommend .list .item .detail-button:hover {
    border: 1px solid #F35627;
    color: #F35627;
}

.home-top-category {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

.home-top-category .item {
    display: flex;
    align-items: center;
    gap: 13px;
}

.home-top-category .item .tag {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: 7px;
    width: 82px;
    height: 28px;
    font-size: 14px;
    color: white;
    line-height: 1;
    background-size: 100% 100%;
}

.home-top-category .item:nth-child(3n+1) .tag {
    background-image: url('../images/tag_background_1.png');
}

.home-top-category .item:nth-child(3n+2) .tag {
    background-image: url('../images/tag_background_2.png');
}

.home-top-category .item:nth-child(3n+3) .tag {
    background-image: url('../images/tag_background_3.png');
}

.home-top-category .item .list {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.home-top-category .item .list div {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.home-top-category .item .list div:not(:last-child)::after {
    content: '丨';
    flex-shrink: 0;
    margin: 0 12px;
    color: #dadada;
}

.home-top-category .item .list div a {
    font-size: 14px;
    color: #666666;
    line-height: 1;
    transition: all 0.2s;
}

.home-top-category .item .list div a:hover {
    color: #F35627;
}

.home-top-game {
    display: grid;
    grid-template-columns: repeat(10, 83px);
    justify-content: space-between;
    margin-top: 35px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 30px;
}

.home-top-game .item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-top-game .item .icon {
    width: 100%;
    height: 83px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.home-top-game .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-top-game .item .title {
    margin-top: 16px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #565656;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.home-top-game .item .title:hover {
    color: #F35627;
}

.home-top-game .item .download-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 19px;
    width: 80px;
    height: 28px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 14px;
    color: #999999;
    line-height: 1;
    transition: all 0.2s;
}

.home-top-game .item .download-button:hover {
    border: 1px solid #F35627;
    color: #F35627;
}

.home-top-game .item .download-button::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 13px;
    background-size: 100% 100%;
    background-image: url('../images/download_icon_1.png');
    transition: all 0.2s;
}

.home-top-game .item .download-button:hover::before {
    background-image: url('../images/download_icon_1_active.png');
}

.home-primary {
    display: grid;
    grid-template-columns: 355px 1fr 352px;
    gap: 18px;
    margin-top: 51px;
}

.home-primary>.left {
    min-width: 0;
}

.home-primary>.middle {
    min-width: 0;
}

.today-recommend {
    display: flex;
    flex-direction: column;
    padding: 75px 11px 16px 14px;
    flex-shrink: 0;
    width: 355px;
    height: 301px;
    background-size: 100% 100%;
    background-image: url('../images/today_recommend_background.png');
}

.home-primary .today-recommend {
    margin-top: -8px;
}

.today-recommend.more-ranking {
    background-image: url('../images/more_ranking_background.png');
}

.today-recommend .list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 22px 14px 14px 14px;
    width: 100%;
    height: 100%;
}

.today-recommend .list .item {
    display: flex;
    align-items: center;
}

.today-recommend .list .item::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    box-sizing: border-box;
}

.today-recommend .list .item .title {
    margin-left: 12px;
    margin-right: 8px;
    font-size: 14px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.today-recommend .list .item .title:hover {
    color: #F35627;
}

.today-recommend .list .item .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    color: #999999;
}

.today-recommend .list .item .detail-button {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    color: #999999;
    transition: all 0.2s;
}

.today-recommend .list .item .detail-button:hover {
    color: #F35627;
}

.hot-activity {
    display: flex;
    flex-direction: column;
    margin-top: 18px;
}

.hot-activity .list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hot-activity .list .item {
    display: flex;
    gap: 17px;
}

.hot-activity .list .item .icon {
    width: 123px;
    height: 75px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.hot-activity .list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hot-activity .list .item .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    min-width: 0;
    height: 75px;
}

.hot-activity .list .item .content .title {
    font-size: 16px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.hot-activity .list .item .content .title:hover {
    color: #F35627;
}

.hot-activity .list .item .content .description {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.hot-activity .list .item .content .description span {
    font-size: 13px;
    color: #888888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-swiper {
    position: relative;
}

.home-swiper .uk-slideshow-items {
    width: 100%;
    height: 293px;
    border-radius: 4px;
}

.home-swiper .uk-slideshow-items li {
    width: 100%;
    height: 100%;
}

.home-swiper .uk-slideshow-items li img {
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-swiper .title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    font-size: 16px;
    color: white;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 28px;
    padding-right: 28px;
    box-sizing: border-box;
    z-index: 1;
}

.new-game-test {
    display: flex;
    flex-direction: column;
    margin-top: 18px;
}

.new-game-test .list {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.new-game-test .list .item {
    display: flex;
    align-items: center;
}

.new-game-test .list .item .begin-marker {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.new-game-test .list .item .begin-marker::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #e5e5e5;
    transition: all 0.2s;
}

.new-game-test .list .item:hover .begin-marker::before {
    background-color: #F35627;
}

.new-game-test .list .item:not(:last-child) .begin-marker::after {
    content: '';
    position: absolute;
    top: 3px;
    z-index: -1;
    width: 1px;
    height: 47px;
    background-color: #e5e5e5;
}

.new-game-test .list .item .type {
    margin-left: 11px;
    flex-shrink: 0;
    width: 70px;
    font-size: 14px;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.new-game-test .list .item .icon {
    margin-left: 11px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.new-game-test .list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.new-game-test .list .item .title {
    margin-left: 16px;
    margin-right: 8px;
    flex: 1;
    min-width: 0;
    font-size: 16px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.new-game-test .list .item .title:hover {
    color: #F35627;
}

.new-game-test .list .item .platform {
    margin-right: 36px;
    font-size: 14px;
    color: #999999;
}

.new-game-test .list .item .detail-button {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 84px;
    height: 26px;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    font-size: 14px;
    color: #888888;
    line-height: 1;
    transition: all 0.2s;
}

.new-game-test .list .item .detail-button:hover {
    border: 1px solid #F35627;
    color: #F35627;
}

.selected-strategy {
    display: flex;
    flex-direction: column;
}

.selected-strategy .header {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    width: 352px;
    height: 147px;
    border-radius: 4px;
    background-size: 100% 100%;
    background-image: url('../images/selected_strategy_background.png');
}

.selected-strategy .header .title {
    margin: 65px 32px 0 32px;
    font-size: 16px;
    font-weight: bold;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.selected-strategy .header .title:hover {
    color: #F35627;
}

.selected-strategy .header .footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 21px;
    margin-top: auto;
    padding: 0 10px 15px 10px;
    font-size: 14px;
    color: #999999;
}

.selected-strategy .header .footer .time {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-strategy .header .footer .time::before {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('../images/clock_icon_1.png');
}

.selected-strategy .header .footer .hits {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-strategy .header .footer .hits::before {
    content: '';
    flex-shrink: 0;
    width: 17px;
    height: 15px;
    background-size: 100% 100%;
    background-image: url('../images/love_icon.png');
}

.selected-strategy .list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.selected-strategy .list .item {
    display: flex;
    align-items: center;
}

.selected-strategy .list .item::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border: 1px solid #d2d2d2;
    border-radius: 50%;
    box-sizing: border-box;
}

.selected-strategy .list .item .title {
    margin-left: 13px;
    margin-right: 8px;
    font-size: 14px;
    color: #565656;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.selected-strategy .list .item .title:hover {
    color: #F35627;
}

.selected-strategy .list .item .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    color: #999999;
}

.selected-strategy .topic-item {
    display: flex;
    align-items: center;
    margin: 18px 0;
}

.selected-strategy .topic-item::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-image: url('../images/topic_icon.png');
}

.selected-strategy .topic-item .title {
    margin-left: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.selected-strategy .topic-item .title:hover {
    color: #F35627;
}

.home-game-section {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    margin-top: 41px;
    padding: 21px 0;
    /*border-top: 1px solid #eeeeee;*/
    border-bottom: 1px solid #eeeeee;
}

.home-game-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-game-section-title::before,
.home-game-section-title::after {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 14px;
    background-size: 100% 100%;
    background-image: url('../images/marker_icon_1.png');
}

.home-game-section-title span {
    font-size: 18px;
    font-weight: bold;
    color: #F35627;
}

.home-game-section-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
}

.home-game-section-category .list {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-auto-rows: 42px;
    justify-content: space-between;
    row-gap: 10px;
    width: 100%;
}

.home-game-section-category .list .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    background-color: #f7f7f7;
    transition: all 0.2s;
}

.home-game-section-category .list .item:hover {
    background-color: #F35627;
}

.home-game-section-category .list .item span {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #666666;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.home-game-section-category .list .item:hover span {
    color: white;
}

.home-game-section-album {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
    margin-top: 24px;
}

.home-game-section-album .list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.home-game-section-album .list .item {
    display: flex;
    align-items: center;
}

.home-game-section-album .list .item::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('../images/album_icon_1.png');
}

.home-game-section-album .list .item .title {
    margin-left: 15px;
    margin-right: 8px;
    font-size: 15px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.home-game-section-album .list .item .title:hover {
    color: #F35627;
}

.home-game-section-album .list .item .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    color: #999999;
}

.home-game-section>.list {
    display: grid;
    grid-template-columns: repeat(7, 80px);
    justify-content: space-between;
    row-gap: 25px;
}

.home-game-section>.list .item {
    display: flex;
    flex-direction: column;
}

.home-game-section>.list .item .icon {
    width: 100%;
    height: 80px;
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
}

.home-game-section>.list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-game-section>.list .item .title {
    margin-top: 16px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #555555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.home-game-section>.list .item .title:hover {
    color: #F35627;
}

.home-player-recommend {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    width: 100%;
    height: 633px;
    background-size: cover;
    background-image: url('../images/player_recommend_background.png');
}

.home-player-recommend .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 46px;
    padding-top: 32px;
}

.home-player-recommend .wrap>.title {
    flex-shrink: 0;
    width: 319px;
    height: 59px;
    background-size: 100% 100%;
    background-image: url('../images/player_recommend_title.png');
}

.home-player-recommend .wrap .list {
    display: grid;
    grid-template-columns: repeat(4, 292px);
    grid-auto-rows: 140px;
    justify-content: space-between;
    align-self: flex-start;
    row-gap: 20px;
    width: calc(100% + 9px);
}

.home-player-recommend .wrap .list .item {
    display: flex;
    gap: 40px;
    width: 100%;
    min-width: 0;
    height: 100%;
    background-size: 100% 100%;
}

.home-player-recommend .wrap .list .item:nth-child(8n+1) {
    background-image: url('../images/player_recommend_item_background_1.png');
}

.home-player-recommend .wrap .list .item:nth-child(8n+2) {
    background-image: url('../images/player_recommend_item_background_2.png');
}

.home-player-recommend .wrap .list .item:nth-child(8n+3) {
    background-image: url('../images/player_recommend_item_background_3.png');
}

.home-player-recommend .wrap .list .item:nth-child(8n+4) {
    background-image: url('../images/player_recommend_item_background_4.png');
}

.home-player-recommend .wrap .list .item:nth-child(8n+5) {
    background-image: url('../images/player_recommend_item_background_5.png');
}

.home-player-recommend .wrap .list .item:nth-child(8n+6) {
    background-image: url('../images/player_recommend_item_background_6.png');
}

.home-player-recommend .wrap .list .item:nth-child(8n+7) {
    background-image: url('../images/player_recommend_item_background_7.png');
}

.home-player-recommend .wrap .list .item:nth-child(8n+8) {
    background-image: url('../images/player_recommend_item_background_8.png');
}

.home-player-recommend .wrap .list .item .content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 36.5px 0 0 32px;
    min-width: 0;
}

.home-player-recommend .wrap .list .item .content .title {
    font-size: 18px;
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-player-recommend .wrap .list .item .content .description {
    font-size: 12px;
    color: white;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-player-recommend .wrap .list .item .icon {
    margin: 30px 31px 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.home-player-recommend .wrap .list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.2s;
}

.home-player-recommend .wrap .list .item .icon:hover img {
    transform: rotate(-360deg);
}

.home-game-strategy {
    display: grid;
    grid-template-columns: 1fr 346px;
    gap: 25px;
    margin-top: -165px;
}

.game-strategy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.game-strategy .wrap {
    display: grid;
    grid-template-columns: 389px 1fr;
    gap: 35px;
}

.game-strategy .wrap>div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.game-strategy .wrap .banner {
    flex-shrink: 0;
    margin-bottom: 29px;
}

.game-strategy .game-strategy-list {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.game-strategy .game-strategy-list .top-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.game-strategy .game-strategy-list .top-list .item {
    display: flex;
    gap: 19px;
    padding-bottom: 24px;
    border-bottom: 1px dashed #eeeeee;
}

.game-strategy .game-strategy-list .top-list .item .icon {
    width: 120px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.game-strategy .game-strategy-list .top-list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-strategy .game-strategy-list .top-list .item .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 80px;
}

.game-strategy .game-strategy-list .top-list .item .content .title {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    line-height: 26px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.game-strategy .game-strategy-list .top-list .item .content .title:hover {
    color: #F35627;
}

.game-strategy .game-strategy-list .top-list .item .content .time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #999999;
}

.game-strategy .game-strategy-list .top-list .item .content .time::before {
    content: '';
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    background-size: 100% 100%;
    background-image: url('../images/clock_icon_3.png');
}

.game-strategy .game-strategy-list .list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.game-strategy .game-strategy-list .list .item {
    display: flex;
    align-items: center;
}

.game-strategy .game-strategy-list .list .item::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border: 1px solid #bbbbbb;
    border-radius: 50%;
    box-sizing: border-box;
}

.game-strategy .game-strategy-list .list .item .title {
    margin-left: 10px;
    margin-right: 8px;
    font-size: 14px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.game-strategy .game-strategy-list .list .item .title:hover {
    color: #F35627;
}

.game-strategy .game-strategy-list .list .item .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    color: #999999;
}

.game-strategy .boutique-list {
    display: grid;
    grid-template-columns: repeat(2, 190px);
    grid-auto-rows: 108px;
    justify-content: space-between;
    row-gap: 18px;
    margin-top: 16px;
}

.game-strategy .boutique-list .item {
    position: relative;
    width: 100%;
    height: 100%;
}

.game-strategy .boutique-list .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-strategy .boutique-list .item .tag {
    position: absolute;
    top: 8px;
    left: -8px;
    padding: 4px 0 0 8px;
    width: 47px;
    height: 35px;
    background-size: 100% 100%;
    background-image: url('../images/tag_background_4.png');
    font-size: 14px;
    color: white;
    line-height: 1;
}

.original-boutique {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.original-boutique .header {
    display: flex;
    gap: 20px;
    height: 131px;
}

.original-boutique .header>.title {
    padding-top: 16px;
    padding-left: 6.5px;
    width: 37px;
    height: 100%;
    background-color: #F35627;
    font-size: 16px;
    color: white;
    writing-mode: vertical-lr;
    text-orientation: upright;
    letter-spacing: 11.8px;
    flex-shrink: 0;
}

.original-boutique .header .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 100%;
}

.original-boutique .header .content .title {
    font-size: 18px;
    font-weight: bold;
    color: #F35627;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.original-boutique .header .content .description {
    font-size: 14px;
    color: #666666;
    line-height: 30px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.original-boutique .header .content .remark {
    display: flex;
    align-items: center;
    gap: 10px;
}

.original-boutique .header .content .remark div {
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 28px;
    background-color: #f7f7f7;
    font-size: 12px;
    color: #999999;
    line-height: 1;
}

.original-boutique .top-list {
    display: grid;
    grid-template-columns: repeat(2, 165px);
    grid-auto-rows: 108px;
    justify-content: space-between;
    row-gap: 18px;
}

.original-boutique .top-list .item {
    position: relative;
    width: 100%;
    height: 100%;
}

.original-boutique .top-list .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.original-boutique .top-list .item .tag {
    position: absolute;
    top: 8px;
    left: -8px;
    padding: 4px 0 0 8px;
    width: 47px;
    height: 35px;
    background-size: 100% 100%;
    background-image: url('../images/tag_background_4.png');
    font-size: 14px;
    color: white;
    line-height: 1;
}

.original-boutique .list {
    display: flex;
    flex-direction: column;
    gap: 15.8px;
    margin-top: 19px;
}

.original-boutique .list .item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.original-boutique .list .item .calendar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    background-size: 100% 100%;
    background-image: url('../images/calendar_background.png');
}

.original-boutique .list .item .calendar div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 36px;
}

.original-boutique .list .item .calendar div:nth-child(1) {
    font-size: 24px;
    font-weight: bold;
    color: #222222;
}

.original-boutique .list .item .calendar div:nth-child(2) {
    font-size: 14px;
    color: #999999;
    white-space: pre;
}

.original-boutique .list .item .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 0;
    height: 72px;
}

.original-boutique .list .item .content .title {
    font-size: 16px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.original-boutique .list .item .content .title:hover {
    color: #F35627;
}

.original-boutique .list .item .content .description {
    font-size: 14px;
    color: #888888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-game-video {
    display: flex;
    flex-direction: column;
    margin-top: 33px;
}

.home-game-video-swiper {
    margin-left: 0;
    width: 100%;
    position: relative;
}

.home-game-video-swiper .item {
    display: flex;
    flex-direction: column;
    gap: 13px;
    width: 343px;
}

.home-game-video-swiper .item .thumbnail {
    width: 100%;
    height: 202px;
    flex-shrink: 0;
    position: relative;
}

.home-game-video-swiper .item .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-game-video-swiper .item .thumbnail .tags {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.home-game-video-swiper .item .thumbnail .tags div {
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 22px;
    border-radius: 4px;
    font-size: 14px;
    color: white;
    line-height: 1;
}

.home-game-video-swiper .item .thumbnail .tags div:nth-child(1) {
    background-color: #F35627;
}

.home-game-video-swiper .item .thumbnail .tags div:nth-child(2) {
    background-color: #ff7c3b;
}

.home-game-video-swiper .item .remark {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.home-game-video-swiper .item .remark .title {
    font-size: 16px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.home-game-video-swiper .item .remark .title:hover {
    color: #F35627;
}

.home-game-video-swiper .item .remark .time {
    flex-shrink: 0;
    font-size: 14px;
    color: #999999;
}

.home-game-video-swiper-next-button {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 45px;
    height: 202px;
    background-color: rgba(0, 0, 0, 0.5);
    background-position: center center;
    background-repeat: no-repeat;
    /*background-image: url('../images/right_arrow_2.png');*/
}

.home-game-collection {
    display: grid;
    grid-template-columns: 1fr 349px;
    gap: 23px;
    margin-top: 26px;
}

.game-collection-1 {
    display: flex;
    flex-direction: column;
}

.game-collection-1 .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 38px 41px;
}

.game-collection-1 .list .item {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.game-collection-1 .list .item .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.game-collection-1 .list .item .top .title {
    font-size: 16px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.game-collection-1 .list .item .top .title:hover {
    color: #F35627;
}

.game-collection-1 .list .item .top .time {
    flex-shrink: 0;
    font-size: 14px;
    color: #999999;
}

.game-collection-1 .list .item .content {
    display: grid;
    grid-template-columns: 174px 1fr;
    align-items: flex-end;
    gap: 18px;
}

.game-collection-1 .list .item .content .left {
    display: flex;
    align-items: flex-end;
    min-width: 0;
    position: relative;
}

.game-collection-1 .list .item .content .left a {
    z-index: 3;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.game-collection-1 .list .item .content .left a:nth-child(2) {
    position: absolute;
    left: 47px;
    z-index: 2;
    width: 100px;
    height: 100px;
}

.game-collection-1 .list .item .content .left a:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
}

.game-collection-1 .list .item .content .left a:nth-child(3) {
    position: absolute;
    left: 94px;
    z-index: 1;
    width: 80px;
    height: 80px;
}

.game-collection-1 .list .item .content .left a:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
}

.game-collection-1 .list .item .content .left a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.game-collection-1 .list .item .content .right {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-width: 0;
}

.game-collection-1 .list .item .content .right a {
    display: flex;
    align-items: center;
}

.game-collection-1 .list .item .content .right a::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('../images/game_icon_2.png');
    transition: all 0.2s;
}

.game-collection-1 .list .item .content .right a:hover::before {
    background-image: url('../images/game_icon_2_active.png');
}

.game-collection-1 .list .item .content .right a span:nth-child(1) {
    margin-left: 10px;
    margin-right: 8px;
    font-size: 14px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.game-collection-1 .list .item .content .right a:hover span:nth-child(1) {
    color: #F35627;
}

.game-collection-1 .list .item .content .right a span:nth-child(2) {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    color: #888888;
    transition: all 0.2s;
}

.game-collection-1 .list .item .content .right a:hover span:nth-child(2) {
    color: #F35627;
}

.game-collection-2 {
    display: flex;
    flex-direction: column;
}

.game-collection-2 .top-list {
    display: flex;
    flex-direction: column;
    gap: 33px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eeeeee;
}

.game-collection-2 .top-list .item {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.game-collection-2 .top-list .item .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.game-collection-2 .top-list .item .top .title {
    font-size: 16px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.game-collection-2 .top-list .item .top .title:hover {
    color: #F35627;
}

.game-collection-2 .top-list .item .top .time {
    flex-shrink: 0;
    font-size: 14px;
    color: #999999;
}

.game-collection-2 .top-list .item .content {
    display: grid;
    grid-template-columns: 174px 1fr;
    align-items: flex-end;
    gap: 18px;
}

.game-collection-2 .top-list .item .content .left {
    display: flex;
    align-items: flex-end;
    min-width: 0;
    position: relative;
}

.game-collection-2 .top-list .item .content .left a {
    z-index: 3;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.game-collection-2 .top-list .item .content .left a:nth-child(2) {
    position: absolute;
    left: 47px;
    z-index: 2;
    width: 100px;
    height: 100px;
}

.game-collection-2 .top-list .item .content .left a:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
}

.game-collection-2 .top-list .item .content .left a:nth-child(3) {
    position: absolute;
    left: 94px;
    z-index: 1;
    width: 80px;
    height: 80px;
}

.game-collection-2 .top-list .item .content .left a:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
}

.game-collection-2 .top-list .item .content .left a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.game-collection-2 .top-list .item .content .right {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-width: 0;
}

.game-collection-2 .top-list .item .content .right a {
    display: flex;
    align-items: center;
}

.game-collection-2 .top-list .item .content .right a::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('../images/game_icon_2.png');
    transition: all 0.2s;
}

.game-collection-2 .top-list .item .content .right a:hover::before {
    background-image: url('../images/game_icon_2_active.png');
}

.game-collection-2 .top-list .item .content .right a span:nth-child(1) {
    margin-left: 10px;
    margin-right: 8px;
    font-size: 14px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.game-collection-2 .top-list .item .content .right a:hover span:nth-child(1) {
    color: #F35627;
}

.game-collection-2 .top-list .item .content .right a span:nth-child(2) {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    color: #888888;
    transition: all 0.2s;
}

.game-collection-2 .top-list .item .content .right a:hover span:nth-child(2) {
    color: #F35627;
}

.game-collection-2 .list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.game-collection-2 .list .item {
    display: flex;
    align-items: center;
}

.game-collection-2 .list .item::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border: 1px solid #d2d2d2;
    border-radius: 50%;
    box-sizing: border-box;
}

.game-collection-2 .list .item .title {
    margin-left: 15px;
    margin-right: 8px;
    font-size: 16px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.game-collection-2 .list .item .title:hover {
    color: #F35627;
}

.game-collection-2 .list .item .time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    color: #888888;
}

.game-gift {
    display: flex;
    flex-direction: column;
}

.game-gift .list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.game-gift .list .item {
    display: flex;
    align-items: center;
}

.game-gift .list .item .icon {
    flex-shrink: 0;
    width: 61px;
    height: 61px;
    background-size: 100% 100%;
    /*background-image: url('../images/gift_icon_2.png');*/
}

.game-gift .list .item .content {
    margin-left: 10px;
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    min-width: 0;
    height: 61px;
}

.game-gift .list .item .content .title {
    font-size: 16px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.game-gift .list .item .content .title:hover {
    color: #F35627;
}

.game-gift .list .item .content .description {
    font-size: 14px;
    color: #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-gift .list .item .receive-button {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 28px;
    border-radius: 4px;
    background-color: #F35627;
    font-size: 12px;
    color: white;
    line-height: 1;
}

.home-rankings {
    display: flex;
    flex-direction: column;
    margin-top: 34px;
}

.home-rankings .wrap {
    display: grid;
    grid-template-columns: repeat(3, 380px);
    justify-content: space-between;
}

.home-rankings .wrap .ranking {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-rankings .wrap .ranking>.top {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 24px;
    width: 100%;
    height: 452px;
    background-size: 100% 100%;
}

.home-rankings .wrap .ranking:nth-child(1)>.top {
    background-image: url('../images/ranking_top_background_1.png');
}

.home-rankings .wrap .ranking:nth-child(2)>.top {
    background-image: url('../images/ranking_top_background_2.png');
}

.home-rankings .wrap .ranking:nth-child(3)>.top {
    background-image: url('../images/ranking_top_background_3.png');
}

.home-rankings .wrap .ranking>.top>.title {
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.home-rankings .wrap .ranking .top-list {
    display: grid;
    grid-template: "a b c"/ 101px 147px 101px;
    margin-top: 25px;
}

.home-rankings .wrap .ranking .top-list .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.home-rankings .wrap .ranking .top-list .item:nth-child(1) {
    grid-area: b;
}

.home-rankings .wrap .ranking .top-list .item:nth-child(2) {
    grid-area: a;
    margin-top: 78px;
}

.home-rankings .wrap .ranking .top-list .item:nth-child(3) {
    grid-area: c;
    margin-top: 101px;
}

.home-rankings .wrap .ranking .top-list .item .icon {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    position: relative;
}

.home-rankings .wrap .ranking .top-list .item:nth-child(1) .icon {
    width: 110.43px;
    height: 110.43px;
}

.home-rankings .wrap .ranking .top-list .item .icon::after {
    content: '';
    position: absolute;
    top: 51px;
    width: 101px;
    height: 42px;
    background-size: 100% 100%;
}

.home-rankings .wrap .ranking .top-list .item:nth-child(1) .icon::after {
    top: 77px;
    width: 147px;
    height: 59px;
    background-image: url('../images/ranking_number_1.png');
}

.home-rankings .wrap .ranking .top-list .item:nth-child(2) .icon::after {
    background-image: url('../images/ranking_number_2.png');
}

.home-rankings .wrap .ranking .top-list .item:nth-child(3) .icon::after {
    background-image: url('../images/ranking_number_3.png');
}

.home-rankings .wrap .ranking .top-list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.2s;
}

.home-rankings .wrap .ranking .top-list .item .icon:hover img {
    transform: rotate(-360deg);
}

.home-rankings .wrap .ranking .top-list .item:nth-child(1) .icon img {
    border: 6px solid #fddf8d;
}

.home-rankings .wrap .ranking .top-list .item:nth-child(2) .icon img {
    border: 4px solid #cce7ff;
}

.home-rankings .wrap .ranking .top-list .item:nth-child(3) .icon img {
    border: 4px solid #e9b685;
}

.home-rankings .wrap .ranking .top-list .item .title {
    margin-top: 21px;
    width: 80%;
    text-align: center;
    font-size: 14px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-rankings .wrap .ranking .top-list .item:nth-child(1) .title {
    margin-top: 18px;
}

.home-rankings .wrap .ranking .top-list .item .download-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    width: 61px;
    height: 22px;
    border-radius: 11px;
    background-color: #fff;
    font-size: 14px;
    line-height: 1;
}

.home-rankings .wrap .ranking:nth-child(1) .top-list .item .download-button {
    color: #3cc9ff;
}

.home-rankings .wrap .ranking:nth-child(2) .top-list .item .download-button {
    color: #7c8bf6;
}

.home-rankings .wrap .ranking:nth-child(3) .top-list .item .download-button {
    color: #ff8a36;
}

.home-rankings .wrap .ranking .list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 21px;
}

.home-rankings .wrap .ranking .list .item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #eeeeee;
}

.home-rankings .wrap .ranking .list .item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.home-rankings .wrap .ranking .list .item .top {
    display: flex;
    align-items: center;
}

.home-rankings .wrap .ranking .list .item .top .serial-number {
    flex-shrink: 0;
    width: 26px;
    font-size: 16px;
    font-weight: bold;
    color: #c0c0c0;
}

.home-rankings .wrap .ranking .list .item .top .icon {
    margin-left: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.home-rankings .wrap .ranking .list .item .top .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-rankings .wrap .ranking .list .item:hover .top .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: swing 0.2s;
}

.home-rankings .wrap .ranking .list .item .top .title {
    margin-left: 15px;
    margin-right: 8px;
    font-size: 16px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.home-rankings .wrap .ranking .list .item .top .title:hover {
    color: #F35627;
}

.home-rankings .wrap .ranking .list .item .top .type {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 14px;
    color: #666666;
}

.home-rankings .wrap .ranking .list .item .top .type::before {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 12px;
    background-size: 100% 100%;
}

.home-rankings .wrap .ranking:nth-child(1) .list .item .top .type::before {
    background-image: url('../images/game_icon_3.png');
}

.home-rankings .wrap .ranking:nth-child(2) .list .item .top .type::before {
    background-image: url('../images/game_icon_4.png');
}

.home-rankings .wrap .ranking:nth-child(3) .list .item .top .type::before {
    background-image: url('../images/game_icon_5.png');
}

.home-rankings .wrap .ranking .list .item .detail {
    display: none;
    align-items: center;
    gap: 20px;
    margin-left: 42px;
}

.home-rankings .wrap .ranking .list .item.active .detail {
    display: flex;
}

.home-rankings .wrap .ranking .list .item .detail .description {
    font-size: 14px;
    color: #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-rankings .wrap .ranking .list .item .detail .download-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    width: 70px;
    height: 32px;
    border-radius: 2px;
    font-size: 14px;
    color: white;
    line-height: 1;
}

.home-rankings .wrap .ranking:nth-child(1) .list .item .detail .download-button {
    background-color: #77d7fe;
}

.home-rankings .wrap .ranking:nth-child(2) .list .item .detail .download-button {
    background-color: #a5abfe;
}

.home-rankings .wrap .ranking:nth-child(3) .list .item .detail .download-button {
    background-color: #ff6427;
}

.home-game-picture {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

.home-game-picture .wrap {
    display: grid;
    grid-template:
        "a b d"137px "a c d"137px / 478fr 220fr 481fr;
    gap: 13px 10px;
}

.home-game-picture .wrap .item {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.home-game-picture .wrap .item:nth-child(1) {
    grid-area: a;
}

.home-game-picture .wrap .item:nth-child(2) {
    grid-area: b;
}

.home-game-picture .wrap .item:nth-child(3) {
    grid-area: c;
}

.home-game-picture .wrap .item:nth-child(4) {
    grid-area: d;
}

.home-game-picture .wrap .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s;
}

.home-game-picture .wrap .item:hover img {
    transform: scale(1.3);
}

.home-friendly-links {
    display: flex;
    flex-direction: column;
    margin-top: 35px;
    margin-bottom: 35px;
}

.home-friendly-links .list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px 24px;
}

.home-friendly-links .list a {
    font-size: 14px;
    color: #888888;
    line-height: 1;
    transition: all 0.2s;
}

.home-friendly-links .list a:hover {
    color: #F35627;
}

.about-us {
    display: flex;
    flex-direction: column;
    margin-bottom: 150px;
}

.about-us .wrap {
    display: grid;
    grid-template-columns: 352px 1fr;
    gap: 29px;
}

.about-us .wrap .left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-shrink: 0;
    padding: 0 19px 25px 19px;
    width: 100%;
    min-width: 0;
    height: 740px;
    background-size: cover;
    background-image: url('../images/about_us_banner.png');
}

.about-us .wrap .left .tabs {
    display: grid;
    grid-template-columns: repeat(3, 98px);
    grid-auto-rows: 38px;
    justify-content: space-between;
    row-gap: 13px;
}

.about-us .wrap .left .tabs a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 1px solid white;
    border-radius: 4px;
    font-size: 16px;
    color: white;
    line-height: 1;
    transition: all 0.2s;
}

.about-us .wrap .left .tabs a:hover,
.about-us .wrap .left .tabs a.active {
    background-color: #fff;
    color: #02adf5;
}

.about-us .wrap>.content {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}

.about-us .wrap>.content .article {
    display: flex;
    flex-direction: column;
}

.about-us .wrap>.content .article p {
    font-size: 16px;
    color: #666666;
    line-height: 36px;
    white-space: pre-wrap;
    text-indent: 2em;
}

.about-us .wrap>.content .article img {
    display: block;
    margin: 10px auto;
}

.about-us .wrap>.content .website-map {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.about-us .wrap>.content .website-map .category {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-us .wrap>.content .website-map .category .title {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 28px;
}

.about-us .wrap>.content .website-map .category .title div {
    display: flex;
    align-items: center;
    padding: 0 9px 0 10px;
    height: 100%;
    background-color: #F35627;
    font-size: 16px;
    color: white;
    line-height: 1;
}

.about-us .wrap>.content .website-map .category .title::after {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 100%;
    background-color: #F35627;
}

.about-us .wrap>.content .website-map .category .content {
    display: flex;
    flex-wrap: wrap;
    gap: 13px 80px;
}

.about-us .wrap>.content .website-map .category .content a {
    font-size: 16px;
    color: #666666;
    transition: all 0.2s;
}

.about-us .wrap>.content .website-map .category .content a:hover {
    color: #F35627;
}

.server-list-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.server-list-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.server-list-title div {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    flex-shrink: 0;
}

.server-list-title div::before {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 19px;
    background-size: 100% 100%;
    background-image: url(../images/news_icon_1.png);
}

.server-list-title>span {
    font-size: 14px;
    color: #999999;
}

.server-list {
    width: 100%;
    border: 1px solid #eeeeee;
    border-spacing: 0;
    table-layout: fixed;
}

.server-list thead {
    background-color: #f6f6f6;
}

.server-list thead tr {}

.server-list thead tr th {
    padding: 13px 15px;
    text-align: center;
    font-size: 15px;
    font-weight: initial;
    color: #333333;
}

.server-list thead tr .name-th {
    width: 230px;
}

.server-list thead tr .button-th {
    width: 150px;
}

.server-list tbody {}

.server-list tbody :nth-child(-n+3 of tr) {
    background-color: #fffdcf;
}

.server-list tbody tr td {
    border-top: 1px solid #eeeeee;
    padding: 16px;
    text-align: center;
    font-size: 15px;
    color: #666666;
}

.server-list tbody tr .name-td>div {
    display: flex;
    align-items: center;
    gap: 21px;
}

.server-list tbody tr .name-td>div .icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.server-list tbody tr .name-td>div .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.server-list tbody tr .name-td>div .title {
    text-align: start;
    color: #333333;
    transition: all 0.2s;
}

.server-list tbody tr .name-td>div .title:hover {
    color: #F35627;
}

.server-list tbody tr .time-td {
    color: #ff3b27;
}

.server-list tbody tr .download-button,
.server-list tbody tr .receive-button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 0 auto;
    padding: 0 15px;
    height: 34px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    transition: all 0.2s;
}

.server-list tbody tr .download-button {
    border: 1px solid #ff897e;
    color: #ff897e;
}

.server-list tbody tr .receive-button {
    border: 1px solid #529dff;
    color: #529dff;
}

.server-list tbody tr .download-button:hover {
    color: white;
    background-color: #ff897e;
}

.server-list tbody tr .receive-button:hover {
    color: white;
    background-color: #529dff;
}

.server-list tbody tr .download-button::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-size: 100% 100%;
    background-image: url('../images/download_icon_2.png');
    transition: all 0.2s;
}

.server-list tbody tr .download-button:hover::before {
    background-image: url('../images/download_icon_2_active.png');
}

.server-list tbody tr .receive-button::before {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background-size: 100% 100%;
    background-image: url('../images/gift_icon_3.png');
    transition: all 0.2s;
}

.server-list tbody tr .receive-button:hover::before {
    background-image: url('../images/gift_icon_3_active.png');
}

.server-list-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.server-list-filter .title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.server-list-filter .title::after {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-size: 100% 100%;
    background-image: url('../images/down_arrow_1.png');
}

.server-list-filter .content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 5;
    top: calc(100% + 11px);
    left: calc(50% - 150px / 2);
    display: flex;
    flex-direction: column;
    width: 150px;
    padding: 8px 0;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.server-list-filter:hover .content {
    visibility: visible;
    opacity: 1;
}

.server-list-filter .content::before {
    content: '';
    position: absolute;
    top: -20px;
    left: calc(50% - 20px / 2);
    z-index: 1;
    border: 10px solid transparent;
    border-bottom: 10px solid white;
}

.server-list-filter .content>div {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    cursor: pointer;
    padding: 16px 8px;
    font-size: 16px;
    font-weight: initial;
    color: #333333;
    transition: all 0.2s;
}

.server-list-filter .content>div:hover {
    background-color: rgba(128, 128, 128, 0.2);
}

.search-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.search-number {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

.search-category {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
}

.search-number+.search-category {
    margin-top: 35px;
}

.news-list-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.news-list-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 10px;
    width: 100%;
    margin-bottom: 48px;
}

.news-list-tabs a {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 42px;
    border-radius: 4px;
    background-color: #f7f7f7;
    font-size: 16px;
    color: #333333;
    line-height: 1;
    transition: all 0.2s;
}

.news-list-tabs a:hover,
.news-list-tabs a.active {
    color: white;
    background-color: #F35627;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.news-list .item {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.news-list .item .header {
    display: flex;
    align-items: center;
    padding-left: 71px;
    position: relative;
}

.news-list .item .header .begin-marker {
    position: absolute;
    left: 14px;
    z-index: 1;
    display: flex;
}

.news-list .item:not(:first-child) .header .begin-marker {
    width: 10px;
    height: 10px;
}

.news-list .item:last-child .header .begin-marker {
    display: none;
}

.news-list .item:first-child .header .begin-marker::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #eeeeee;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
}

.news-list .item .header .begin-marker::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    z-index: -1;
    width: 1px;
    height: 295px;
    background-color: #eeeeee;
}

.news-list .item .header .title {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.news-list .item:hover .header .title {
    color: #F35627;
}

.news-list .item .main {
    display: flex;
    align-items: center;
    padding-left: 71px;
    position: relative;
}

.news-list .item .main::before {
    content: '';
    position: absolute;
    left: 0;
    z-index: 1;
    width: 40px;
    height: 40px;
    background-size: 100% 100%;
    background-image: url('../images/news_item_begin_marker.png');
    transition: all 0.2s;
}

.news-list .item:hover .main::before {
    background-image: url('../images/news_item_begin_marker_active.png');
}

.news-list .item .main>.content {
    display: flex;
    align-items: center;
    gap: 21px;
    flex: 1;
    min-width: 0;
}

.news-list .item .main>.content .thumbnail {
    width: 194px;
    height: 116px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.news-list .item .main>.content .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-list .item .main>.content .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    height: 116px;
    border-radius: 4px;
    transition: all 0.2s;
}

.news-list .item:hover .main>.content .content {
    background: linear-gradient(to left, #f2f9ff, transparent);
}

.news-list .item .main>.content .content .description {
    margin-top: 6px;
    font-size: 14px;
    color: #666666;
    line-height: 28px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-list .item .main>.content .content .time {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #999999;
}

.news-list .item .main>.content .content .time::before {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('../images/clock_icon_1.png');
}

.hot-game {
    display: flex;
    flex-direction: column;
}

.hot-game>.top {
    display: flex;
    align-items: center;
    padding: 28px 20px 23px 21px;
    width: 100%;
    height: 166px;
    background-color: #f7f9fb;
    position: relative;
}

.hot-game>.top::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -1px;
    width: 113px;
    height: 65px;
    background-size: 100% 100%;
    background-image: url('../images/hot_recommend_tag.png');
}

.hot-game>.top .card {
    display: flex;
    align-items: center;
    padding: 17px 20px 20px 20px;
    flex: 1;
    min-width: 0;
    border-radius: 6px;
    box-shadow: 0 0 10px 4px rgba(213, 213, 213, 0.42);
}

.hot-game>.top .card .icon {
    width: 78px;
    height: 78px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.hot-game>.top .card .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hot-game>.top .card .content {
    margin-left: 15px;
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 78px;
}

.hot-game>.top .card .content .title {
    font-size: 16px;
    font-weight: bold;
    color: #F35627;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hot-game>.top .card .content .description {
    font-size: 12px;
    color: #888888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hot-game>.top .card .download-button {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 18px;
    height: 28px;
    border-radius: 4px;
    background-color: #F35627;
    font-size: 14px;
    color: white;
    line-height: 1;
}

.hot-game .list {
    display: grid;
    grid-template-columns: repeat(4, 65px);
    justify-content: space-between;
    row-gap: 30px;
    margin-top: 23px;
}

.hot-game .list .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.hot-game .list .item .icon {
    width: 100%;
    height: 65px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.hot-game .list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hot-game .list .item .title {
    margin-top: 13px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.hot-game .list .item .title:hover {
    color: #F35627;
}

.hot-game .list .item .download-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    width: 100%;
    height: 28px;
    border: 1px solid #F35627;
    border-radius: 4px;
    font-size: 14px;
    color: #F35627;
    line-height: 1;
    transition: all 0.2s;
}

.hot-game .list .item .download-button:hover {
    background-color: #F35627;
    color: white;
}

.news-detail-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.news-detail-article {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.news-detail-article .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 37px;
    padding: 46px 30px;
    background-color: #f8f8f8;
}

.news-detail-article .header .title {
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #222222;
    white-space: pre-wrap;
}

.news-detail-article .header .description {
    display: flex;
    align-items: center;
    gap: 50px;
    font-size: 14px;
    color: #888888;
}

.news-detail-article .main {
    display: flex;
    flex-direction: column;
}

.news-detail-article .main p {
    font-size: 16px;
    color: #555555;
    line-height: 36px;
    white-space: pre-wrap;
    text-indent: 2em;
}

.news-detail-article .main img {
    display: block;
    margin: 10px auto;
}

.related-news {
    display: flex;
    flex-direction: column;
}

.related-news .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 29px 31px;
}

.related-news .list .item {
    display: flex;
    gap: 19px;
    min-width: 0;
}

.related-news .list .item .thumbnail {
    width: 140px;
    height: 97px;
    flex-shrink: 0;
}

.related-news .list .item .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-news .list .item .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 97px;
}

.related-news .list .item .content .title {
    font-size: 16px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.related-news .list .item .content .title:hover {
    color: #F35627;
}

.related-news .list .item .content .description {
    font-size: 14px;
    color: #888888;
    line-height: 28px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-recommend {
    display: flex;
    flex-direction: column;
}

.editor-recommend .wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 22px 21px 22px;
    width: 100%;
    height: 489px;
    background-size: cover;
    background-image: url('../images/editor_recommend_background.png');
}

.editor-recommend .wrap .list {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 30px 50px;
    padding: 22px 21px;
    width: 100%;
    background-color: #fff;
}

.editor-recommend .wrap .list .item {
    display: flex;
    gap: 17px;
    min-width: 0;
}

.editor-recommend .wrap .list .item .icon {
    width: 65px;
    height: 65px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.editor-recommend .wrap .list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editor-recommend .wrap .list .item .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 0;
    height: 65px;
}

.editor-recommend .wrap .list .item .content .title {
    font-size: 16px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.editor-recommend .wrap .list .item .content .title:hover {
    color: #F35627;
}

.editor-recommend .wrap .list .item .content .description {
    font-size: 14px;
    color: #888888;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-list-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.download-list-tabs {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

.download-list-tabs .list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.download-list-tabs .list a {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 42px;
    border-radius: 4px;
    background-color: #f7f7f7;
    font-size: 16px;
    color: #333333;
    line-height: 1;
    transition: all 0.2s;
}

.download-list-tabs .list a:hover,
.download-list-tabs .list a.active {
    color: white;
    background-color: #F35627;
}

.download-list {
    display: flex;
    flex-direction: column;
}

.download-list .list {
    display: grid;
    grid-template-columns: repeat(5, 222px);
    grid-auto-rows: 258px;
    justify-content: space-between;
    row-gap: 29px;
}

.download-list .list .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 25px 0 25px;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 1px solid #f4f6f7;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
}

.download-list .list .item:hover {
    border: 1px solid #57cbfc;
}

.download-list .list .item::before {
    content: '';
    position: absolute;
    top: -6px;
    z-index: -1;
    width: 238px;
    height: 161px;
    background-size: 100% 100%;
    background-image: url('../images/download_list_item_background.png');
    transition: all 0.2s;
}

.download-list .list .item:hover::before {
    background-image: url('../images/download_list_item_background_active.png');
}

.download-list .list .item .title {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.download-list .list .item:hover .title {
    color: white;
}

.download-list .list .item .description {
    margin-top: 12px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #999999;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.download-list .list .item:hover .description {
    color: white;
}

.download-list .list .item .icon {
    margin-top: 24px;
    width: 80px;
    height: 80px;
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
}

.download-list .list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-list .list .item .download-button {
    margin-top: 20px;
    display: flex;
    align-items: center;
    padding: 0 31px;
    height: 32px;
    border-radius: 6px;
    background-color: #eaf5ff;
    font-size: 14px;
    color: #F35627;
    line-height: 1;
    transition: all 0.2s;
}

.download-list .list .item:hover .download-button {
    background-color: #F35627;
    color: white;
}

.game-detail-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.download-detail-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 36px;
    padding: 0 16px 15px 14px;
    width: 1200px;
    height: 283px;
    background-size: 100% 100%;
}

.download-detail-header.game {
    background-image: url('../images/game_detail_header_background.png');
}

.download-detail-header.app {
    background-image: url('../images/app_detail_header_background.png');
}

.download-detail-header.gift {
    background-image: url('../images/gift_detail_header_background.png');
}

.download-detail-header .main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 185px;
    padding: 0 30px;
    width: 100%;
    height: 193px;
}

.download-detail-header .main .left {
    display: flex;
    gap: 22px;
    flex: 1;
    min-width: 0;
}

.download-detail-header .main .left .icon {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 20px;
    flex-shrink: 0;
}

.download-detail-header .main .left .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    flex: 1;
    min-width: 0;
    min-height: 130px;
}

.download-detail-header .main .left .content .title {
    font-size: 24px;
    font-weight: bold;
    color: #222222;
}

.download-detail-header .main .left .content .description {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(3, auto);
    grid-auto-flow: column;
    justify-content: space-between;
    gap: 14px 65px;
    font-size: 14px;
    color: #666666;
    white-space: pre-wrap;
}

.download-detail-header .main .left .content .description .score {
    font-weight: bold;
    color: #2e97ff;
}

.download-detail-header .button-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex-shrink: 0;
}

.download-detail-header .button-wrap>div {
    display: flex;
    justify-content: center;
    position: relative;
}

.download-detail-header .button-wrap>div .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 186px;
    height: 55px;
    border-radius: 35px;
    background-color: #777777;
    background-size: 100% 100%;
}

.download-detail-header .button-wrap>div.android .button,
.download-detail-header .button-wrap>div.gift .button {
    cursor: pointer;
    border-radius: unset;
    background-color: unset;
    background-image: url('../images/button_background_1.png');
}

.download-detail-header .button-wrap>div.android .button::before {
    content: '';
    margin-right: 15px;
    flex-shrink: 0;
    width: 18px;
    height: 20px;
    background-size: 100% 100%;
    background-image: url('../images/android_icon_1.png');
}

.download-detail-header .button-wrap>div.ios .button,
.download-detail-header .button-wrap>div.download .button {
    cursor: pointer;
    border-radius: unset;
    background-color: unset;
    background-image: url('../images/button_background_2.png');
}

.download-detail-header .button-wrap>div.ios .button::before {
    content: '';
    margin-right: 17px;
    flex-shrink: 0;
    width: 15px;
    height: 19px;
    background-size: 100% 100%;
    background-image: url('../images/ios_icon_1.png');
}

.download-detail-header .button-wrap>div.gift .button::before {
    content: '';
    margin-right: 14px;
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    background-size: 100% 100%;
    background-image: url('../images/gift_icon_4.png');
}

.download-detail-header .button-wrap>div.download .button::before {
    content: '';
    margin-right: 13px;
    flex-shrink: 0;
    width: 20px;
    height: 19px;
    background-size: 100% 100%;
    background-image: url('../images/download_icon_3.png');
}

.download-detail-header .button-wrap>div .button>span {
    font-size: 16px;
    font-weight: bold;
    color: white;
    line-height: 1;
}

.download-detail-header .button-wrap>div .qrcode {
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    z-index: 1;
    right: 100%;
    width: 155px;
    padding: 8px 0 20px 0;
    background-color: #fff;
    box-shadow: 0 0 16px 0 rgba(100, 100, 100, 0.5);
    transition: all 0.4s;
}

.download-detail-header .button-wrap>div:hover .qrcode {
    visibility: visible;
    opacity: 1;
}

.download-detail-header .button-wrap>div .qrcode img {
    width: 125px;
    height: 125px;
}

.download-detail-header .button-wrap>div .qrcode span {
    font-size: 14px;
    color: #999999;
}

.detail-article {
    display: flex;
    flex-direction: column;
}

.detail-article h3 {
    display: flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 18px;
    margin-bottom: 16px;
    padding: 0 9px 0 10px;
    height: 28px;
    background-color: #F35627;
    font-size: 16px;
    color: white;
    line-height: 1;
    position: relative;
}

.detail-article .section-title+h3 {
    margin-top: 0;
}

.detail-article h3::after {
    content: '';
    position: absolute;
    right: -10px;
    width: 5px;
    height: 28px;
    background-color: #F35627;
}

.detail-article p {
    font-size: 16px;
    color: #666666;
    line-height: 36px;
    white-space: pre-wrap;
    text-indent: 2em;
}

.detail-article img {
    display: block;
    margin: 10px auto;
}

.detail-swiper {
    position: relative;
    width: 100%;
    height: auto;
}

.detail-swiper .uk-slider-items {
    height: 100%;
    margin-left: -18px;
}

.detail-swiper .uk-slider-items li {
    padding-left: 18px;
}

.detail-swiper .thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

.gift-list-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.gift-list {
    display: flex;
    flex-direction: column;
}

.gift-list .list {
    display: grid;
    grid-template-columns: repeat(3, 260px);
    grid-auto-rows: 288px;
    justify-content: space-between;
    row-gap: 30px;
}

.gift-list .list .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 25px 0 25px;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 1px solid #f4f6f7;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
}

.gift-list .list .item:hover {
    border: 1px solid #57cbfc;
}

.gift-list .list .item::before {
    content: '';
    position: absolute;
    top: -6px;
    z-index: -1;
    width: 276px;
    height: 161px;
    background-size: 100% 100%;
    background-image: url('../images/gift_list_item_background.png');
    transition: all 0.2s;
}

.gift-list .list .item:hover::before {
    background-image: url('../images/gift_list_item_background_active.png');
}

.gift-list .list .item .title {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.gift-list .list .item:hover .title {
    color: white;
}

.gift-list .list .item .time {
    margin-top: 20px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #888888;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.gift-list .list .item:hover .time {
    color: white;
}

.gift-list .list .item .icon {
    margin-top: 19px;
    width: 80px;
    height: 80px;
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
}

.gift-list .list .item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gift-list .list .item .surplus {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 12px;
    color: #999999;
}

.gift-list .list .item .surplus .progress-bar {
    width: 62px;
    height: 3px;
    background-color: #f0f0f0;
    border-radius: 1.5px;
    overflow: hidden;
    flex-shrink: 0;
}

.gift-list .list .item .surplus .progress-bar i {
    display: block;
    height: 100%;
    background-color: #F35627;
    border-radius: 1.5px;
}

.gift-list .list .item .receive-button {
    margin-top: 16px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 32px;
    border-radius: 6px;
    background-color: #eaf5ff;
    font-size: 14px;
    color: #F35627;
    line-height: 1;
    transition: all 0.2s;
}

.gift-list .list .item:hover .receive-button {
    background-color: #F35627;
    color: white;
}

.gift-detail-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.related-gift {
    display: flex;
    flex-direction: column;
}

.related-gift .section-title {
    margin-bottom: 0;
}

.related-gift table {
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
}

.related-gift table thead {
    background-color: #f7f7f7;
}

.related-gift table thead tr th {
    padding: 11px 15px;
    text-align: center;
    font-size: 14px;
    font-weight: initial;
    color: #888888;
    line-height: 1;
}

.related-gift table thead tr .name-th {
    padding-left: 52px;
    width: 330px;
    text-align: start;
}

.related-gift table thead tr .amount-th {
    width: 140px;
}

.related-gift table tbody tr {
    background-color: #fff;
}

.related-gift table tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

.related-gift table tbody tr td {
    padding: 8px 20px;
    text-align: center;
    font-size: 14px;
    color: #666666;
}

.related-gift table tbody tr .name-td {
    text-align: start;
}

.related-gift table tbody tr .name-td>div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.related-gift table tbody tr .name-td .icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.related-gift table tbody tr .name-td .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-gift table tbody tr .name-td .title {
    font-size: 14px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.related-gift table tbody tr .name-td .title:hover {
    color: #F35627;
}

.related-gift table tbody tr .content-td {
    text-align: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gift-modal>.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 118px 25px 21px 25px;
    width: 363px;
    height: 364px;
    background-size: 100% 100%;
    background-image: url('../images/gift_modal.png');
}

.gift-modal>.modal-content .title {
    font-size: 18px;
    font-weight: bold;
    color: #097cff;
}

.gift-modal>.modal-content .activation-code {
    margin-top: 40px;
    font-size: 14px;
    color: #666666;
}

.gift-modal>.modal-content .copy-button {
    cursor: pointer;
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 242px;
    height: 67px;
    border-radius: 28px;
    font-size: 18px;
    color: white;
    line-height: 1;
}

.album-list-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.album-list-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.album-list-tabs a {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 42px;
    border-radius: 4px;
    background-color: #f7f7f7;
    font-size: 16px;
    color: #333333;
    line-height: 1;
    transition: all 0.2s;
}

.album-list-tabs a:hover,
.album-list-tabs a.active {
    color: white;
    background-color: #F35627;
}

.album-list {
    display: flex;
    flex-direction: column;
}

.album-list .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 21px;
}

.album-list .list .item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 30px 27px 30px;
    min-width: 0;
    background-color: #f9fbfd;
}

.album-list .list .item .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.album-list .list .item .top .title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.album-list .list .item .top .title:hover {
    color: #F35627;
}

.album-list .list .item .top .time {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
    font-size: 14px;
    color: #999999;
    line-height: 1;
}

.album-list .list .item .top .time::before {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('../images/clock_icon_2.png');
}

.album-list .list .item .content {
    display: grid;
    grid-template-columns: 174px 1fr;
    align-items: flex-end;
    gap: 18px;
}

.album-list .list .item .content .left {
    display: flex;
    align-items: flex-end;
    min-width: 0;
    position: relative;
}

.album-list .list .item .content .left a {
    z-index: 3;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.album-list .list .item .content .left a:nth-child(2) {
    position: absolute;
    left: 47px;
    z-index: 2;
    width: 100px;
    height: 100px;
}

.album-list .list .item .content .left a:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
}

.album-list .list .item .content .left a:nth-child(3) {
    position: absolute;
    left: 94px;
    z-index: 1;
    width: 80px;
    height: 80px;
}

.album-list .list .item .content .left a:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
}

.album-list .list .item .content .left a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.album-list .list .item .content .right {
    display: grid;
    grid-template-columns: repeat(2, 160px);
    justify-content: space-between;
    gap: 17px;
    min-width: 0;
}

.album-list .list .item .content .right a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.album-list .list .item .content .right a::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('../images/game_icon_2.png');
    transition: all 0.2s;
}

.album-list .list .item .content .right a:hover::before {
    background-image: url('../images/game_icon_2_active.png');
}

.album-list .list .item .content .right a span {
    font-size: 14px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.album-list .list .item .content .right a:hover span {
    color: #F35627;
}

.album-detail-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.album-detail-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 22px;
    padding: 0 16px 15px 14px;
    width: 1200px;
    height: 283px;
    background-size: 100% 100%;
}

.album-detail-header.game {
    background-image: url('../images/game_album_detail_header_background.png');
}

.album-detail-header.app {
    background-image: url('../images/app_album_detail_header_background.png');
}

.album-detail-header .main {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    padding: 0 22px 0 30px;
    width: 100%;
    height: 193px;
}

.album-detail-header .main .left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.album-detail-header .main .left .title {
    margin-top: 27px;
    font-size: 24px;
    font-weight: bold;
    color: #222222;
}

.album-detail-header .main .left .description {
    display: flex;
    align-items: center;
    gap: 52px;
    margin-top: 29px;
    font-size: 14px;
    color: #888888;
    white-space: pre-wrap;
}

.album-detail-header .main .left .bottom {
    display: flex;
    align-items: center;
    margin-top: 32px;
}

.album-detail-header .main .left .bottom>span {
    flex-shrink: 0;
    font-size: 14px;
    color: #888888;
}

.album-detail-header .main .left .bottom .tags {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.album-detail-header .main .left .bottom .tags a {
    display: flex;
    align-items: center;
    padding: 0 14px;
    min-width: 0;
    height: 28px;
    border: 1px solid #eeeeee;
    transition: all 0.2s;
}

.album-detail-header .main .left .bottom .tags a:hover {
    border: 1px solid #F35627;
}

.album-detail-header .main .left .bottom .tags a span {
    font-size: 14px;
    color: #666666;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.album-detail-header .main .left .bottom .tags a:hover span {
    color: #F35627;
}

.album-detail-header .recommend {
    display: flex;
    align-items: center;
    align-self: center;
    padding: 27px 20px 26px 20px;
    width: 360px;
    border-radius: 6px;
    box-shadow: 0 0 10px 4px rgba(213, 213, 213, 0.42);
    position: relative;
}

.album-detail-header .recommend::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    width: 113px;
    height: 65px;
    background-size: 100% 100%;
    background-image: url('../images/hot_recommend_tag.png');
}

.album-detail-header .recommend .icon {
    width: 78px;
    height: 78px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.album-detail-header .recommend .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-detail-header .recommend .content {
    margin-left: 13px;
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 78px;
}

.album-detail-header .recommend .content .title {
    font-size: 16px;
    font-weight: bold;
    color: #F35627;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-detail-header .recommend .content .description {
    font-size: 12px;
    color: #888888;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-detail-header .recommend .download-button {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 18px;
    height: 28px;
    border-radius: 4px;
    background-color: #F35627;
    font-size: 14px;
    color: white;
    line-height: 1;
}

.album-detail-list {
    display: flex;
    flex-direction: column;
}

.album-detail-list .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 21px 20px;
}

.album-detail-list .list .item {
    padding: 19px 20px 17px 17px;
    min-width: 0;
    background-color: #f7f7f7;
    position: relative;
}

.album-detail-list .list .item .serial-number {
    position: absolute;
    top: 0;
    right: 17px;
    padding-top: 23px;
    padding-left: 5.5px;
    width: 38px;
    height: 50px;
    background-image: url('../images/medal_4.png');
    background-size: 100% 100%;
}

.album-detail-list .list .item:nth-child(1) .serial-number {
    background-image: url('../images/medal_1.png');
}

.album-detail-list .list .item:nth-child(2) .serial-number {
    background-image: url('../images/medal_2.png');
}

.album-detail-list .list .item:nth-child(3) .serial-number {
    background-image: url('../images/medal_3.png');
}

.album-detail-list .list .item .serial-number div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 17px;
    font-size: 16px;
    font-weight: bold;
    color: #6e8996;
    line-height: 1;
}

.album-detail-list .list .item:nth-child(-n+3) .serial-number div {
    display: none;
}

.album-detail-list .list .item .main {
    display: flex;
    gap: 13px;
}

.album-detail-list .list .item .main .icon {
    width: 86px;
    height: 86px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
}

.album-detail-list .list .item .main .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-detail-list .list .item .main .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    min-width: 0;
    height: 86px;
}

.album-detail-list .list .item .main .content .title {
    width: calc(100% - 45px);
    font-size: 16px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.album-detail-list .list .item .main .content .title:hover {
    color: #F35627;
}

.album-detail-list .list .item .main .content .bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.album-detail-list .list .item .main .content .bottom .description {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.album-detail-list .list .item .main .content .bottom .description span {
    font-size: 14px;
    color: #888888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-detail-list .list .item .main .content .bottom .download-button {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 13px;
    height: 30px;
    border: 1px solid #F35627;
    border-radius: 4px;
    font-size: 14px;
    color: #F35627;
    line-height: 1;
    transition: all 0.2s;
}

.album-detail-list .list .item .main .content .bottom .download-button:hover {
    background-color: #F35627;
    color: white;
}

.ranking-list-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
}

.ranking-list-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 310px;
    background-size: cover;
    background-image: url('../images/ranking_list_banner.png');
}

.ranking-list-banner .breadcrumbs {
    color: white;
}

.ranking-list-banner .breadcrumbs a {
    color: white !important;
}

.ranking-list-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 10px;
    width: 100%;
    margin: 21px 0;
}

.ranking-list-tabs a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    min-width: 173px;
    height: 48px;
    border-radius: 4px;
    background-color: #f7f7f7;
    font-size: 16px;
    color: #333333;
    line-height: 1;
    transition: all 0.2s;
}

.ranking-list-tabs a:hover,
.ranking-list-tabs a.active {
    color: white;
    background-color: #F35627;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.ranking-list .item {
    display: flex;
    align-items: center;
    padding: 0 21px 0 20px;
    height: 176px;
    background-color: #fafafa;
    transition: all 0.2s;
}

.ranking-list .item:nth-child(1) {
    background-color: #fdfaf3;
}

.ranking-list .item:nth-child(2) {
    background-color: #f6fbff;
}

.ranking-list .item:nth-child(3) {
    background-color: #fff9f4;
}

.ranking-list .item:hover {
    box-shadow: 0 0 10px 0 rgba(174, 174, 174, 0.4);
}

.ranking-list .item .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.ranking-list .item .icon img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border: 5px solid #dfdfdf;
    border-radius: 50%;
    transition: all 0.2s;
}

.ranking-list .item:nth-child(1) .icon img {
    border-color: #fddf8d;
}

.ranking-list .item:nth-child(2) .icon img {
    border-color: #cce7ff;
}

.ranking-list .item:nth-child(3) .icon img {
    border-color: #e9b685;
}

.ranking-list .item .icon:hover img {
    transform: rotate(-360deg);
}

.ranking-list .item .icon .serial-number {
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: -32px;
    padding-top: 12px;
    flex-shrink: 0;
    width: 149px;
    height: 59px;
    background-size: 100% 100%;
    background-image: url('../images/ranking_number_6.png');
}

.ranking-list .item:nth-child(1) .icon .serial-number {
    width: 147px;
    height: 59px;
    background-image: url('../images/ranking_number_1.png');
}

.ranking-list .item:nth-child(2) .icon .serial-number {
    width: 161px;
    height: 64px;
    background-image: url('../images/ranking_number_4.png');
}

.ranking-list .item:nth-child(3) .icon .serial-number {
    background-image: url('../images/ranking_number_5.png');
}

.ranking-list .item .icon .serial-number div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2px;
    width: 65px;
    height: 22px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 4px rgba(180, 180, 180, 0.75);
}

.ranking-list .item:nth-child(-n+3) .icon .serial-number div {
    display: none;
}

.ranking-list .item .content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-left: 19px;
    margin-right: 8px;
    min-width: 0;
}

.ranking-list .item .content .title {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.ranking-list .item .content .title:hover {
    color: #F35627;
}

.ranking-list .item .content .tags {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ranking-list .item .content .tags div {
    display: flex;
    align-items: center;
    padding: 0 11px;
    height: 32px;
    border: 1px solid #eeeeee;
    font-size: 14px;
    color: #666666;
}

.ranking-list .item .content .description {
    font-size: 14px;
    color: #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-list .item .download-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    width: 110px;
    height: 42px;
    background-color: #F35627;
    font-size: 16px;
    color: white;
}

.ranking-group-list-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
}

.ranking-group-list {
    display: grid;
    grid-template-columns: repeat(3, 380px);
    justify-content: space-between;
    row-gap: 29px;
}

.ranking-group-list .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 21px 0 21px 0;
    width: 100%;
    min-width: 0;
    border: 1px solid #eeeeee;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% auto;
    background-image: url('../images/ranking_group_item_background.png');
}

.ranking-group-list .item>.title {
    padding: 0 32px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.ranking-group-list .item>.title:hover {
    color: #F35627;
}

.ranking-group-list .item>.time {
    margin-top: 8px;
    font-size: 14px;
    color: #999999;
}

.ranking-group-list .item .top-list {
    display: grid;
    grid-template: "a b c"/ 101px 147px 101px;
    margin-top: 28px;
}

.ranking-group-list .item .top-list>div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}

.ranking-group-list .item .top-list>div:nth-child(1) {
    grid-area: b;
}

.ranking-group-list .item .top-list>div:nth-child(2) {
    grid-area: a;
}

.ranking-group-list .item .top-list>div:nth-child(3) {
    grid-area: c;
}

.ranking-group-list .item .top-list>div .icon {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    position: relative;
}

.ranking-group-list .item .top-list>div:nth-child(1) .icon {
    width: 110.43px;
    height: 110.43px;
}

.ranking-group-list .item .top-list>div .icon::after {
    content: '';
    position: absolute;
    top: 51px;
    width: 101px;
    height: 42px;
    background-size: 100% 100%;
}

.ranking-group-list .item .top-list>div:nth-child(1) .icon::after {
    top: 77px;
    width: 147px;
    height: 59px;
    background-image: url('../images/ranking_number_1.png');
}

.ranking-group-list .item .top-list>div:nth-child(2) .icon::after {
    background-image: url('../images/ranking_number_2.png');
}

.ranking-group-list .item .top-list>div:nth-child(3) .icon::after {
    background-image: url('../images/ranking_number_3.png');
}

.ranking-group-list .item .top-list>div .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.2s;
}

.ranking-group-list .item .top-list>div .icon:hover img {
    transform: rotate(-360deg);
}

.ranking-group-list .item .top-list>div:nth-child(1) .icon img {
    border: 6px solid #fddf8d;
}

.ranking-group-list .item .top-list>div:nth-child(2) .icon img {
    border: 4px solid #cce7ff;
}

.ranking-group-list .item .top-list>div:nth-child(3) .icon img {
    border: 4px solid #e9b685;
}

.ranking-group-list .item .top-list>div .title {
    margin-top: 56px;
    width: 80%;
    text-align: center;
    font-size: 14px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.ranking-group-list .item .top-list>div:nth-child(1) .title {
    margin-top: 34px;
}

.ranking-group-list .item .top-list>div .title:hover {
    color: #F35627;
}

.ranking-group-list .item .top-list>div .download-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 19px;
    width: 70px;
    height: 28px;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    color: #3cc9ff;
    line-height: 1;
    transition: all 0.2s;
}

.ranking-group-list .item .top-list>div .download-button:hover {
    background-color: #3cc9ff;
    color: white;
}

.ranking-group-list .item .list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 53px;
    padding: 0 20px;
    width: 100%;
}

.ranking-group-list .item .list>div {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px dashed #eeeeee;
}

.ranking-group-list .item .list>div:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.ranking-group-list .item .list>div .serial-number {
    flex-shrink: 0;
    width: 26px;
    font-size: 16px;
    font-weight: bold;
    color: #c0c0c0;
}

.ranking-group-list .item .list>div .icon {
    margin-left: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.ranking-group-list .item .list>div .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ranking-group-list .item .list>div:hover .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: swing 0.2s;
}

.ranking-group-list .item .list>div .title {
    margin-left: 15px;
    margin-right: 8px;
    font-size: 16px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.ranking-group-list .item .list>div .title:hover {
    color: #F35627;
}

.ranking-group-list .item .list>div .type {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 14px;
    color: #666666;
}

.ranking-group-list .item .list>div .type::before {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 12px;
    background-size: 100% 100%;
    background-image: url('../images/game_icon_3.png');
}

.ranking-detail-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
}

.ranking-detail-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
    height: 310px;
    background-size: cover;
    background-image: url('../images/ranking_detail_banner.png');
}

.ranking-detail-banner .breadcrumbs {
    color: white;
    margin-bottom: 33px;
}

.ranking-detail-banner .breadcrumbs a {
    color: white !important;
}

.ranking-detail-banner .title {
    display: flex;
    align-items: center;
    margin-left: 72px;
    padding: 0 92px 0 79px;
    width: fit-content;
    height: 88px;
    background: linear-gradient(to right, transparent, #37bbd0 40%, #37bbd0 60%, transparent);
    font-size: 36px;
    font-weight: bold;
    color: white;
    line-height: 1;
}

.ranking-detail-banner .time {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    margin-left: 185px;
}

.ranking-detail-banner .time::before,
.ranking-detail-banner .time::after {
    content: '';
    flex-shrink: 0;
    width: 64px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
}

.ranking-detail-banner .time div {
    display: flex;
    align-items: center;
    padding: 0 23px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
}

#aq-model {
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff url(/themes/default/404.png) no-repeat center;
}

.hide {
    display: none;
}

input,
textarea {
    outline: none;
    border: none;
}

button {
    background-color: #ffffff;
    border: none;
}

.mw1300 {
    width: 1200px;
    margin: 0 auto;
}

.nav {
    width: 100%;
    font-size: 14px;
    min-width: 1300px;
    box-shadow: 0px 5px 10px 0px rgba(233, 233, 233, 1);
}

.nav .n-top {
    padding: 6px 0px 0;
    overflow: hidden;
}

.seLog {
    margin-top: 10px;
}

.seLog {
    float: left;
    width: 230px;
    height: 82px;
    margin-right: 32px;
    margin-top: 27px;
}

.seLog a {
    display: block;
}

.seLog img {
    /*width: 218px;*/
}

.seMenu {
    padding: 2px 0 16px;
    margin-left: 100px;
    overflow: hidden;
}

.seMenu li {
    float: left;
    text-align: center;
    margin-left: 6px;
    margin-right: 15px;
}

.seMenu h3 {
    padding-top: 10px;
    font-weight: normal;
}

.seMenu li a {
    display: block;
    padding: 2px 18px 10px 18px;
    text-decoration: none;
    font-size: 16px;
    color: #737373;
}

.seMenu li a b {
    display: block;
    width: 28px;
    height: 26px;

    margin: 14px auto 0;
    margin-bottom: 11px;
    transition: transform 0.2s;
}

.seMenu li a:hover {
    transform: translateY(-5px);
    transition: transform 0.2s;
}

.seMenu li a b.icon1 {
    background: url(../img/h1.png) no-repeat;
    background-size: contain;

}

.seMenu li a b.icon2 {
    background: url(../img/h2.png) no-repeat;
    background-size: contain;

}

.seMenu li a b.icon3 {
    background: url(../img/h3.png) no-repeat;
    background-size: contain;
}

.seMenu li a b.icon4 {
    background: url(../img/h4.png) no-repeat;
    background-size: contain;
}

.seMenu li a b.icon5 {
    background-position: -427px -9px;
}

.seMenu li a b.icon6 {
    background-position: -528px -9px;
}

.seMenu li a b.icon7 {
    background-position: -620px -9px;
}

.seMenu li a.hover b.icon1 {
    background: url(../img/h1_on.png) no-repeat;
    background-size: contain;
}

.seMenu li a.hover b.icon2 {
    background: url(../img/h2_on.png) no-repeat;
    background-size: contain;
}

.seMenu li a.hover b.icon3 {
    background: url(../img/h3_on.png) no-repeat;
    background-size: contain;
}

.seMenu li a.hover b.icon4 {
    background: url(../img/h4_on.png) no-repeat;
    background-size: contain;
}

.seMenu li a.hover b.icon5 {
    background-position: -427px -142px;
}

.seMenu li a.hover b.icon6 {
    background-position: -528px -142px;
}

.seMenu li a.hover b.icon7 {
    background-position: -620px -142px;
}

.seMenu li a.hover b.iconHj {
    background-position: -680px -142px;
}

.seMenu li a.hover {
    background: linear-gradient(129deg, #FE7342 0%, #F35627 100%);
    color: #FFFFFF;
    border-radius: 8px;
    font-weight: bold;
}

.seMenu li:first-child a.hover {
    padding-left: 28px;
    padding-right: 28px;
}

.searth_box {
    height: 66px;
    overflow: hidden;
    margin-top: 20px;
    display: none;
}

.n-top .searth {
    width: 260px;
    height: 36px;
    overflow: hidden;
    padding: 0px;
    border: 2px solid #F35627;
    background-color: #fff;
    border-radius: 25px;
    margin-bottom: 6px;
    margin-top: 1px;
}

.n-top .searth .inp {
    margin-left: 10px;
    float: left;
    margin-top: 5px;
    line-height: 26px;
    height: 26px;
    width: 210px;
}

.n-top .searth #but {
    background-color: #ffffff;
    background: url("../img/nav.png") no-repeat -508px -76px;
    width: 32px;
    height: 28px;
    position: absolute;
    padding: 0px;
    margin-top: 4px;
    cursor: pointer;
}

.searth_box p {
    width: 260px;
    color: #999999;
    height: 18px;
    line-height: 18px;
    font-size: 13px;
    overflow: hidden;
    margin-top: 9px;
}

.searth_box p a {
    color: #666;
}

.searth_box p a.red {
    color: #fF3562700;
}

.searth_tips {
    width: 280px;
    display: none;
    position: absolute;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #F35627;
    top: 122px;
    z-index: 99999;
}

.searth_tips p {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 3px 12px;
    overflow: hidden;
    height: 28px;
    margin-top: 0;
    line-height: 22px;
    text-decoration: none;
}

.searth_tips p em {
    font-weight: 700;
    color: red;
}

.searth_tips p a {
    display: block;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searth_tips p:hover {
    background-color: #f1f1f1;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.m-margin15 {
    margin-top: 15px;
}

.g-w320 {
    width: 320px;
}

.g-white {
    background-color: #fff;
}

.f-fl,
.f-lifl li,
.f-dlfl dt,
.f-dlfl dd {
    float: left;
    display: inline;
}

.g-listTj {
    overflow: hidden;
}

.g-title-right {
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.m-title {
    height: 25px;
    line-height: 25px;
    font-size: 22px;
    /* font-weight: bold; */
    border-left: 3px solid #ff6600;
    padding-left: 8px;
    margin: 18px 19px 18px 19px;
    float: left;
}

.m-title strong {
    color: #ff6600;
    /* font-weight: bold; */
}

.g-title-right strong {
    color: #ff6600;
    font-weight: normal;
}

.f-clickNew {
    font-size: 15px;
    color: #333;
    float: right;
    line-height: 25px;
    width: 70px;
    height: 25px;
    border-radius: 4px;
    text-align: center;
    margin: 20px 15px 0 0;
    cursor: pointer;
}

.f-fr {
    float: right;
    display: inline;
}

.g-listTj ul {
    overflow: hidden;
    margin: 4px 15px 4px 20px;
    display: none;
}

.g-listTj ul li {
    overflow: hidden;
    border-bottom: 1px dotted #ebebeb;
}

.g-listTj ul a {
    height: 119px;
    margin: 0px 0px 0px 0px;
    padding: 15px 0px 15px 105px;
    position: relative;
    display: block;
    position: relative;
}

.g-listTj ul i {
    position: absolute;
    left: 0px;
    top: 15px;
    width: 90px;
    height: 90px;
    display: block;
}

.g-listTj ul i img {
    width: 90px;
    height: 90px;
    border-radius: 14px;
}

.indexListTj ul li a strong {
    width: 112px;
}

.g-listTj ul strong {
    display: block;
    width: 183px;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: normal;
}

.g-listTj ul span {
    color: #666;
    font-size: 12px;
    height: 23px;
    line-height: 23px;
    display: block;
    margin: 5px 0px;
}

.g-listTj ul span {
    color: #666;
    font-size: 12px;
    height: 23px;
    line-height: 23px;
    display: block;
    margin: 5px 0px;
}

.g-listTj ul a em {
    position: absolute;
    top: 47px;
    right: 0;
    background: #f5f5f5;
    color: #666666;
    text-align: center;
    height: 25px;
    line-height: 25px;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
    width: 70px;
}

.g-banimg {
    overflow: hidden;
    width: 860px;
    height: 430px;
    position: relative;
}

.g-banimg {
    overflow: hidden;
    position: relative;
}

.g-banimg-ico {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 99;
    background: url(../images/hdslide-nav.png) repeat-y;
    /*width: 210px;*/
    width: 114px;
}

.g-banimg-ico ul li {
    overflow: hidden;
    height: 107.5px;
    padding: 0px 0;
    opacity: 0.7
}

.g-banimg-ico ul li a {
    display: block;
    height: 80px;
    padding: 0 15px;
    overflow: hidden;
    margin-top: 13.5px;
}

.g-banimg-ico ul li a img {
    border-radius: 12px;
    height: 80px;
    width: 80px;
    margin-right: 15px;
    float: left;
}

.g-banimg-ico ul li a em {
    display: block;
    height: 26px;
    line-height: 26px;
    font-size: 15px;
    /*font-weight: bold;*/
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.g-banimg-ico ul li a span {
    margin-top: 4px;
    display: block;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.g-banimg-ico ul li.on {
    background: url(../images/rgba50.png);
    opacity: 1;
    filter: alpha(opacity=100);
    border-right: 4px solid #f60;
}

.g-banimg-list {
    width: 860px;
    height: 430px;
    overflow: hidden;
}

.g-banimg-list ul li {
    position: relative;
    overflow: hidden;
    width: 860px;
    height: 430px;
}

.g-banimg-list ul li p {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    /*background: url(../images/des_bg.png);*/
}

.g-banimg-list ul li p strong {
    color: #fff;
    font-weight: normal;
    padding-left: 20px;
    width: 390px;
    display: block;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.g-banimg-list ul li img {
    width: 860px;
    height: 430px;
}

em,
i {
    font-style: normal;
}

.section-title>div.hot2::before {
    content: '';
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    background-size: 100% 100%;
    background-image: url(../images/hot2.png);
}

.section-title>div.hot3::before {
    content: '';
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    background-size: 100% 100%;
    background-image: url(../images/hot3.png);
}

.section-title>div.hot4::before {
    content: '';
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    background-size: 100% 100%;
    background-image: url(../images/hot4.png);
}

.g-dinfo {
    overflow: hidden;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px !important;
}

.g-box-1200 {
    width: 1200px;
    height: auto;
    margin: auto;
    display: block;
    overflow: hidden;
}

.g-dinfo h1 {
    font-size: 30px;
    color: #333333;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}

.g-dinfo-cont {
    overflow: hidden;
    margin-top: 15px;
}

.g-dinfo-list {
    overflow: hidden;
    width: 845px;
}

.f-fl,
.f-lifl li,
.f-dlfl dt,
.f-dlfl dd {
    float: left;
    display: inline;
}

.g-dinfo-list i {
    height: 120px;
    width: 120px;
    display: block;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    position: relative;
}

.g-dinfo-list i img {
    border-radius: 14px;
    height: 120px;
    width: 120px;
}

.g-dinfo-list ul {
    float: right;
    overflow: hidden;
    width: 700px;
}

.g-dinfo-list ul li {
    float: left;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    color: #808080;
    width: 233px;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.g-dinfo-list ul li.li1{
    width: 100%;
}
.g-dinfo-list ul li em {
    display: inline-block;
    height: 14px;
    margin-top: 9px;
}

.g-dinfo-list ul li em img {
    height: 14px;
    display: block;
    padding-top: 1px;
}

.g-dinfo-list ul li.u-url a {
    color: #808080;
}

.g-dinfo-list ul li.tags {
    width: 700px;
    margin-left: 0px;
}

.g-dinfo-list ul li.tags a:nth-child(2) {
    color: #8dbb00;
}

.g-dinfo-list ul li.tags a:nth-child(3) {
    color: #ff46cf;
}
.g-dinfo-list ul li.tags a {
    display: inline-block;
    height: 20px;
    background: #edeff5;
    color: #525252;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    border-radius: 11px;
    margin: 0px 6px 0px 0px;
    padding: 0 12px;
    border: 0px;
}
.pf {
    margin-top: 20px;
    width: 350px;
    height: 90px;
    overflow: hidden;
}

.pf p.pf_L {
    float: left;
    width: 56px;
    height: 24px;
    font-size: 15px;
    color: #9e9e9e;
    text-align: center;
    line-height: 26px;
}

.pf .pf_m {
    width: 90px;
    height: 90px;
    float: left;
}

.pf .pf_m .processingbar {
    text-align: center;
    position: relative;
    width: 82px;
}

.pf .pf_m .processingbar font {
    color: #F35627;
    display: block;
    width: 82px;
    height: 82px;
    line-height: 82px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    left: -5px;
    top: 0;
}

.pf .pf_m .processingbar i {
    color: #F35627;
    font-style: normal;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    left: 56px;
    top: 34px;
}

.pf .pf_r {
    float: right;
    width: 180px;
    height: 90px;
}

.pf .pf_r .up,
.pf .pf_r .downl {
    width: 180px;
    height: 36px;
    background: #f0f1f7;
    border-radius: 18px;
    margin-bottom: 10px;
    cursor: pointer;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.pf .pf_r .up i,
.pf .pf_r .downl i {
    background: url(../images/ico-img3.png) no-repeat;
    display: block;
    float: left;
    margin: 8px 20px;
    height: 18px;
    width: 18px;
}

.pf .pf_r .up i {
    background-position: 0 -109px;
}

.pf .pf_r .up p,
.pf .pf_r .downl p {
    float: left;
    width: 100px;
    height: 36px;
    padding: 0 10px;
    line-height: 36px;
    border-left: 1px solid #e4e5eb;
    font-size: 14px;
    color: #9e9e9e;
}

.pf .pf_r .up p span,
.pf .pf_r .downl p span {
    color: #525252;
}

.g-dbtn li {
    position: relative;
    display: none;
    width: 133px;
    height: 40px;
    line-height: 40px;
    margin: 0px 30px 25px 0px;
    background: url(../images/azspr.png) 0 0 no-repeat;
    padding-left: 42px;
    z-index: 9;
    border-radius: 4px;
    float: left;
}

.g-dbtn li i {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 40px;
    display: block;
}

.g-dbtn li p {
    display: none;
}

.g-dbtn li p img {
    width: 122px;
    height: 122px;
    margin: 17px auto 0 auto;
    display: block;
}

.iostishi {
    display: block;
    font-size: 12px;
    color: #999;
    text-align: left;
    position: absolute;
    width: 200px;
    left: 0px;
    bottom: -25px;
    height: 20px;
    line-height: 20px;
}

.g-dbtn li.iosbtn {
    background-position: 0 -53px;
}

.g-dbtn li.pcbtn {
    background-position: 0 -106px;
}

.g-dbtn li b {
    position: absolute;
    top: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    width: 130px;
    display: block;
}

.pf .pf_r .downl i {
    margin-top: 10px;
    background-position: 0 -91px;
}

b,
strong {
    font-weight: inherit;
}

.g-xgbanben {
    overflow: hidden;
}

.u-listtit {
    overflow: hidden;
    /* border-bottom: 1px solid #ebebeb; */
}

.u-listtit span {
    height: 24px;
    font-size: 18px;
    display: block;
    line-height: 22px;
    color: #333;
    text-indent: 15px;
    font-family: "microsoft yahei";
    float: left;
}

.u-listtit span i {
    width: 5px;
    height: 24px;
    background: #F35627;
    float: left;
}

.g-xgbanben ul {
    padding: 15px 0px 8px 0px;
    overflow: hidden;
}

.g-xgbanben ul li {
    height: auto;
    overflow: hidden;
    background: #fafafa;
    border-radius: 2px;
    margin-bottom: 6px;
    padding: 6px 8px;
}

.g-xgbanben ul li i {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
}

.g-xgbanben ul li i img {
    width: 100%;
    border-radius: 6px;
}

.g-xgbanben ul li p {
    height: 30px;
    float: left;
    line-height: 30px;
    width: 420px;
    margin: 0px 15px;
    overflow: hidden;
}

.g-xgbanben ul li span {
    float: left;
    height: 30px;
    display: block;
}

.g-xgbanben ul li span img {
    height: 14px;
    display: block;
    margin-top: 8px;
}

.g-xgbanben ul li font {
    display: block;
    float: left;
    color: #666;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    padding-left: 45px;
}

.g-xgbanben ul li strong {
    display: block;
    float: right;
    height: 30px;
    line-height: 30px;
    width: 68px;
    text-align: center;
    border-radius: 4px;
    background: #F35627;
    color: #fff;
}

.collection_list .list li:nth-child(odd) {
    float: left;
}

.collection_list .list li:nth-child(even) {
    float: right;
}

.pink8 {
    padding-top: 50px;
    margin-bottom: 20px;
    /*background: url(../img/irankbg.png) no-repeat;*/
    background-size: 100% auto;
    width: 100%;
}

.pink8 .ico {
    background: url(../img/icon1.png) no-repeat;
    background-size: 1000px 1000px;
}

.pink8 .phTit {
    width: 1200px;
    margin: auto;
}

.pkRank {
    width: 1230px;
    margin: 0 auto;
    overflow: hidden;
    *zoom: 1;
}

.pkRList {
    float: left;
    position: relative;
    width: 400px;
    padding-bottom: 220px;
}

.pkRank .pkRList {
    background: url(../img/irankbg1.png) no-repeat;
    background-size: 100% auto;
}

.pkRank .pkRList:nth-of-type(1) {
    background: url(../img/irankbg1.png) no-repeat;
    background-size: 100% auto;
}

.pkRank .pkRList:nth-of-type(2) {
    background: url(../img/irankbg2.png) no-repeat;
    background-size: 100% auto;
    margin: 0 15px;
}

.pkRank .pkRList:nth-of-type(3) {
    background: url(../img/irankbg3.png) no-repeat;
    background-size: 100% auto;
}

.pkRList>a:nth-of-type(1) {
    display: block;
    margin-bottom: 12px;
    width: 379px;
    height: 87px;
    line-height: 82px;
    font-size: 28px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    background: linear-gradient(0deg, #FFD76C 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
}

.pkRList>a:nth-of-type(1) strong {
    position: relative;
    display: block;
    width: 100%;
    font-size: 28px;
    color: #fff;
    line-height: 82px;
    font-weight: bold;
}

.pkRank .pkRList:nth-of-type(1)>a strong {
    background: linear-gradient(0deg, #FFD76C 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: none;
}

.pkRank .pkRList:nth-of-type(2)>a strong {
    background: linear-gradient(0deg, #FFD76C 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: none;
}

.pkRank .pkRList:nth-of-type(3)>a strong {
    background: linear-gradient(0deg, #67D2FF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: none;
}

.pkRList ol {
    position: relative;
    top: 134px;
    padding-top: 170px;
    padding-bottom: 10px;
    width: 379px;
    margin: auto;
}

.pkRList ol li {
    position: relative;
    z-index: 1;
    height: 82px;
    margin: 2px 0;
}

.pkRList ol li a {
    position: relative;
    display: block;
    padding: 8.5px 0;
    overflow: hidden;
    *zoom: 1;
}

.pkRList ol li i {
    float: left;
    display: block;
    width: 75px;
    height: 65px;
    font-size: 22px;
    color: #C2C2D9;
    font-family: "Arial";
    font-style: italic;
    line-height: 65px;
    text-align: center;
}

.pkRList ol li img {
    float: left;
    width: 65px;
    height: 65px;
    border-radius: 10px;
    margin-right: 15px;
}

.pkRList ol li div {
    float: left;
    width: 210px;
    height: 69px;
    overflow: hidden;
}

.pkRList ol li div p {
    display: block;
    font-size: 16px;
    color: #000;
    line-height: 26px;
    margin-top: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pkRList ol li div span {
    display: block;
    font-size: 12px;
    color: #9A9A9A;
}

.pkRList ol li a>span {
    display: none;
}

.pkRList ol li:nth-of-type(-n+3) {
    position: absolute;
    top: -148px;
    width: 114px;
    height: 226px;
    margin: 0;
    background: transparent !important;
}

.pkRList ol li:nth-of-type(1) {
    left: 129px;
    width: 120px;
}

.pkRList ol li:nth-of-type(2) {
    left: 15px;
    top: -130px;
}

.pkRList ol li:nth-of-type(3) {
    left: 250px;
    top: -130px;
}

.pkRList ol li:nth-of-type(-n+3) a {
    padding: 0;
}

.pkRList ol li:nth-of-type(-n+3) a i {
    font-size: 0;
    position: absolute;
    top: 23px;
    left: 0;
    right: 0;
    ;
    width: 93px;
    height: 98px;
    display: block;
    margin: auto;
    /*background: url(../img/hrkbg.png) no-repeat;*/
    background-size: 100% 100%;
}

.pkRList ol li:nth-of-type(1) a i {
    top: 7px;
}

.pkRList ol li:nth-of-type(-n+3) img {
    float: inherit;
    display: block;
    width: 68px;
    height: 68px;
    border-radius: 30px;
    margin: auto;
}

.pkRList ol li:nth-of-type(1) img {
    margin-bottom: 6px;
    margin-top: 19px;
}

.pkRList ol li:nth-of-type(2) img {
    margin-top: 35px;
}

.pkRList ol li:nth-of-type(3) img {
    margin-top: 35px;
}

.pkRList ol li:nth-of-type(-n+3) div {
    float: inherit;
    width: 100%;
    height: auto;
}

.pkRList ol li:nth-of-type(-n+3) div p {
    text-align: center;
    font-size: 14px;
    color: #000;
    line-height: 22px;
    margin-top: 55px;
}

.pkRList ol li:nth-of-type(-n+3) div span {
    text-align: center;
    line-height: 16px;
}

.pkRList ol li:nth-of-type(-n+3) a>span {
    display: block;
    width: 68px;
    height: 24px;
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    text-align: center;
    margin: 8px auto 0;
    border-radius: 2px;
    background: linear-gradient( 270deg, #FD7040 0%, #F35627 100%);
}

.pkRList ol li:nth-of-type(1) a>span {
    margin-top: 15px;
}

.pkRank .pkRList:nth-of-type(1) ol li:nth-of-type(2n+1) {
    background: #FFF9F7;
}

.pkRank .pkRList:nth-of-type(2) ol li:nth-of-type(2n+1) {
    background: #FFF9F1;
}

.pkRank .pkRList:nth-of-type(3) ol li:nth-of-type(2n+1) {
    background: #FCF8FF;
}

.pkRList .rMore {
    position: absolute;
    bottom: 36px;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    text-align: center;
    font-size: 16px;
    color: #FE813E;
    width: 349px;
    height: 45px;
    line-height: 45px;
    background: rgba(204, 102, 204, 0);
    border: 1px solid rgba(255, 128, 61, 0.5);
    border-radius: 23px;
    ;
}

.pkRank .pkRList:nth-of-type(1) .rMore {
    color: #F35627;
    border: 1px solid #F35627;
}

.pkRank .pkRList:nth-of-type(2) .rMore {
    color: #FF9900;
    border: 1px solid #FF9900;
}

.pkRank .pkRList:nth-of-type(3) .rMore {
    color: #8F52E0;
    border: 1px solid #8F52E0;
}

.pkRList ol li a:hover p {
    color: #F35627;
    font-weight: bold;
}

.phTit a {
    position: relative;
    top: 42px;
    z-index: 1;
    float: right;
    display: block;
    font-size: 14px;
    color: #999;
    height: 36px;
    line-height: 36px;
}

.phTit p {
    position: absolute;
    top: 44.5px;
    left: 90px;
    font-size: 14px;
    color: #999;
}

.phTit h2 {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    flex-shrink: 0;
}

.phTit {
    position: relative;
    overflow: hidden;
    height: 40px;
}

.phTit i.ph {
    width: 18px;
    height: 18px;
    background: url(../img/ph.png) no-repeat;
    background-size:100%;
}

.phTit i {
    float: left;
    position: relative;
    top: 4px;
    margin-right: 10px;
    display: inline-block;
    width: 80px;
    height: 80px;
}

.phTit a:after {
    content: "";
    position: relative;
    top: 1px;
    margin-left: 4px;
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(../img/icon1.png) no-repeat;
    background-size: 1000px 1000px;
    background-position: -154px -6px;
}
.footer_a{
    display: inline-block;
    position: relative;
    padding-right: 25px;
    margin-right: 20px;
}
.footer_a::after{
    position: absolute;
    display: block;
    content: '';
    width: 2px;
    height: 65%;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background:#666
}
.footer_a:last-child::after{
    display: none;
}