[v-cloak] {
    display: none !important;
}

[flex-center] {
    display: flex;
    align-items: center;
    justify-content: center;
}

[flex-between] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body,
html {
    margin: 0 auto;
    background: #000000;
}

a {
    text-decoration: none;
    display: block;
}

* {
    box-sizing: border-box;
}

li {
    list-style: none;
}

.textLine1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.textLine2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.textLine3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.news_img {
    object-fit: cover;
}

.app-version .main {
    min-height: calc(100vh - 5.3125rem);
}

.app-version header {
    padding: .9375rem .9375rem 0 .5938rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-version header .menu-back,
.app-version header a {
    width: 1.125rem;
    height: 1.125rem;
}

.app-version .search {
    width: 19.2188rem;
    height: 2.25rem;
    position: relative;
}

.app-version .search input {
    width: 100%;
    height: 100%;
    border-radius: 6.5rem;
    background: #242424;
    padding: .5625rem .625rem .5625rem 1.625rem;
    line-height: 100%;
    vertical-align: middle;
    color: #999999;
    font-family: 'Noto Sans 500', sans-serif;
    font-size: .75rem;
    outline: none;
    border: none;
}

.app-version .search input::placeholder {
    color: #999999;
    font-family: 'Noto Sans 500', sans-serif;
    font-size: .75rem;
}

.app-version .search img {
    width: 1.125rem;
    height: 1.125rem;
    position: absolute;
    left: .5rem;
    top: 50%;
    transform: translateY(-50%);
}

.app-version .tips {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.9688rem .7188rem 1.25rem .9375rem;
    color: #FFFFFF;
    font-family: 'Noto Sans 600', sans-serif;
    text-transform: uppercase;
    line-height: 100%;
    font-size: .875rem;
    letter-spacing: 0.08rem;
    margin: 0 auto;
}

.app-version .tips>img {
    width: 1.0625rem;
    height: 1.0313rem;
}

.app-version .history {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 .9375rem;
    gap: .9375rem;
    flex-wrap: wrap;
}

.app-version .history>div {
    width: auto;
    height: 1.875rem;
    white-space: nowrap;
    padding: 0 1.5rem 0 .625rem;
    border-radius: 7.4375rem;
    background: #242424;
    color: #999999;
    font-size: .8125rem;
    line-height: 100%;
    letter-spacing: 0px;
    font-family: 'Poppins 400', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-width: 4.375rem;
    position: relative;
}

.app-version .history>div>img {
    width: .7813rem;
    height: .7813rem;
    position: absolute;
    right: .625rem;
    top: 50%;
    transform: translateY(-50%);
}

.app-version .trend-pannel {
    gap: .9375rem;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    justify-content: space-between;
    margin: 0 0 0 .9375rem;
    padding-right: .9375rem;
}

.app-version .trend-pannel .news_div {
    width: 15.3125rem;
    height: 21.4063rem;
    padding: 1.6875rem .9375rem;
    border-radius: .3125rem;
    flex-shrink: 0;
}

.app-version .trend-pannel .news_div:nth-child(1) {
    background: url(../resource/img/trend-pannel-1.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.app-version .trend-pannel .news_div:nth-child(2) {
    background: url(../resource/img/trend-pannel-2.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.app-version .trend-pannel .trend-title {
    width: 12.2188rem;
    height: 1.4688rem;
    background-image: url(../resource/img/trendTitle.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans 700', sans-serif;
    font-size: 1.125rem;
    line-height: 100%;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    color: #FFFFFF;
    margin: 0 auto 1.2813rem;
    text-align: center;
}

.app-version .trend-pannel .trend-img {
    width: 12.1563rem;
    height: 7.4375rem;
    border-radius: .3125rem;
    margin: 0 auto 1.6563rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.app-version .trend-pannel .news_img:nth-child(1),
.app-version .trend-pannel .news_img:nth-child(3) {
    width: 3.75rem;
    height: 5.25rem;
    border-radius: .3125rem;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 0;
}

.app-version .trend-pannel .news_img:nth-child(1) {
    left: 0;
}

.app-version .trend-pannel .news_img:nth-child(3) {
    right: 0;
}

.app-version .trend-pannel .news_img:nth-child(2) {
    width: 5.3125rem;
    height: 7.4375rem;
    border-radius: .3125rem;
    position: relative;
    z-index: 2;
}

.app-version .trend-pannel .trend-list {
    display: flex;
    flex-direction: column;
    gap: 1.1875rem;
}

.app-version .trend-pannel .trend-list .trend-item {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: .625rem;
    color: #FFFFFF;
    letter-spacing: 0.015em;
    text-transform: capitalize;
    line-height: 100%;
    font-size: 1rem;
    font-family: 'Noto Sans 500', sans-serif;
    line-height: 110%;
}

.app-version .trend-pannel .trend-list .rank {
    font-size: 1.25rem;
    font-weight: 900;
    font-family: 'DIN Black 900', sans-serif;
    color: #F7AE5F;
    line-height: 110%;
}

.app-version .trend-pannel .trend-list .trend-item:nth-child(1) .rank {
    color: #F7615F;
}

.app-version .trend-pannel .trend-list .trend-item:nth-child(2) .rank {
    color: #F7945F;
}

.app-version .app-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .9375rem;
}

.app-version .app-container .news_div {
    width: 20.625rem;
    height: 9.125rem;
    margin: 0 auto;
    background: #171717;
    border-radius: .3125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
    padding: .625rem;

}

.app-version .app-container .news_div .news_img {
    width: 5.625rem;
    height: 7.875rem;
    flex-shrink: 0;
    border-radius: .3125rem;
}

.app-version .app-container .news_div .news_type {
    font-family: 'Noto Sans 500', sans-serif;
    font-size: .75rem;
    line-height: 140%;
    text-transform: capitalize;
    letter-spacing: 0.015em;
    color: #EDECFF;
    margin-bottom: .4375rem;
}

.app-version .app-container .news_div .news_introduce {
    font-size: .625rem;
    color: #6B708E;
    line-height: 140%;
    text-transform: capitalize;
    letter-spacing: 0.015em;
    font-family: 'Alike Angular 400', sans-serif;
    margin-bottom: .8125rem;
}

.app-version .app-container .news_div .go {
    width: 4.5625rem;
    height: 1.625rem;
    border-radius: .3125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #484D59;
    text-transform: capitalize;
    letter-spacing: 0.015em;
    font-size: .75rem;
    font-family: 'Noto Sans 700', sans-serif;
    color: #FFFFFF;
}

.app-version .app-container .news_div .go:hover {
    background: #E11413;
}

.app-version .app-container .news_div .view {
    width: 4.375rem;
    height: 2.0625rem;
    float: right;
}

.unFound {
    width: 100%;
    padding-top: 2.6811rem;
}

.unFound>div:nth-child(1) {
    font-family: 'Albert Sans 700';
    text-align: center;
    color: #FFFFFF;
    margin-bottom: .736rem;
    line-height: 120%;
}

.unFound>div:nth-child(2) {
    font-family: 'Albert Sans 500';
    color: #FFFFFF;
    text-align: center;
    line-height: 140%;
}

.app-footer {
    height: 4.625rem;
    padding: 1.25rem 0 .9375rem;
    margin-top: .75rem;
    text-align: center;
    font-size: .75rem;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 0.3);
    vertical-align: middle;
}

.app-footer a {
    color: #FFFFFF;
}

.app-footer span {
    margin: 0 .625rem;
}

.app-footer> :last-child {
    font-size: .625rem;
    font-weight: normal;
    color: #FFFFFF;
    margin-top: .75rem;
    opacity: 0.6;
}

/* cookie */
.cookie-pannel {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    min-height: 8.0313rem;
    padding: .9375rem;
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    line-height: 1.4712rem;
    font-size: 1rem;
    font-family: 'Noto Sans 400', sans-serif;
    z-index: 10;
}

.cookie-pannel-tips {
    margin-bottom: .9375rem;
}

.button {
    width: 10.9375rem;
    height: 2.25rem;
    border-radius: .1875rem;
    background: #E11413;
    color: #ffffff;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: 'Alike Angular 400', sans-serif;
    margin: 0 auto;
}

.LearnMore {
    display: none;
}

@media screen and (min-width: 600px) {
    .web-version {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        min-height: calc(100vh - 29.6842rem);
    }

    .web-version header {
        width: 100%;
        height: 6.3158rem;
        position: fixed;
        top: 0;
        transform: translateX(-50%);
        left: 50%;
        padding: 1.4737rem 6.3158rem 2.6316rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 11;
        background: linear-gradient(179deg, #000000 5%, rgba(83, 83, 83, 0) 89%);
        max-width: 1440px;
    }

    .web-version header .logo,
    .web-version header>a {
        width: 2.4211rem;
        height: 2.4211rem;
    }

    .web-version header>ul {
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3.1579rem;
        font-family: 'Noto Sans 600', sans-serif;
        font-size: 1.375rem;
        text-transform: uppercase;
        letter-spacing: 0em;
        height: 4.875rem;
    }

    .web-version .drop-down-wrapper {
        display: none;
        position: absolute;
        background: rgba(34, 30, 17, 0.72);
        border-radius: .625rem;
        padding: .75rem;
        white-space: nowrap;
        left: 50%;
        transform: translateX(-50%);
        top: 100%;
        flex-direction: column;
        gap: 2rem;
    }

    .web-version .drop-down-wrapper>li>a {
        color: #FFFFFF;
        text-transform: capitalize;
        letter-spacing: 0em;
        font-family: 'Noto Sans 400', sans-serif;
        font-size: 1.1579rem;
    }

    .web-version header>ul>li {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 1.1579rem;
        font-family: 'Noto Sans 500', sans-serif;
        cursor: pointer;
    }

    .web-version header>ul>li:hover .drop-down-wrapper {
        display: flex;
    }

    .web-version .header-tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 5.7895rem;
        gap: 1.3684rem;
    }

    .web-version .header-tools img,
    .web-version .header-tools>div,
    .web-version .header-tools>a {
        width: 2.2105rem;
        height: 2.2105rem;
    }

    .web-version .header-tools div {
        position: relative;
    }

    /* language button */
    .van-radio-group {
        min-width: 10.625rem;
        position: absolute;
        background: rgba(34, 30, 17, 0.72);
        border-radius: .625rem;
        padding: 1.25rem;
        white-space: nowrap;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        flex-direction: column;
        gap: 1.5rem;
        display: none;
    }

    .van-radio {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1.1579rem;
        text-transform: capitalize;
        letter-spacing: 0em;
        font-family: 'Noto Sans 400', sans-serif;
    }

    .van-radio__label {
        color: #FFFFFF !important;
        line-height: 120%;
    }

    .web-version .header-tools div:hover .van-radio-group {
        display: flex;
    }

    /* search */
    .web-version .search {
        width: 63.1579rem;
        height: 3.6842rem;
        position: relative;
        margin: 6.3158rem auto 6.3158rem;
    }

    .web-version .search input {
        width: 100%;
        height: 100%;
        border-radius: 12.1579rem;
        background: #222222;
        padding: 1.0526rem 2.4211rem;
        line-height: normal;
        vertical-align: middle;
        color: #666666;
        font-family: 'Noto Sans 500', sans-serif;
        font-size: .9474rem;
        outline: none;
        border: none;
    }

    .web-version .search input::placeholder {
        color: #666666;
        font-family: 'Noto Sans 500', sans-serif;
        font-size: .9474rem;
    }

    .web-version .search img {
        width: .8421rem;
        height: .8421rem;
        position: absolute;
        left: 1.2632rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .web-version .tips {
        color: #FFFFFF;
        font-family: 'Noto Sans 700', sans-serif;
        font-size: 1.4737rem;
        line-height: 1.2632rem;
        text-transform: uppercase;
        letter-spacing: 0em;
        padding: 0 6.3158rem;
        margin-bottom: 2.1053rem;
    }

    .web-version .web-content {
        width: 100%;
        padding: 0 6.3158rem;
    }

    .web-version .news_div {
        width: 100%;
        background: #171717;
        border-radius: .5263rem;
        padding: 1.0526rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1.0526rem;
    }

    .web-version .news_div .news_img {
        width: 8.4211rem;
        height: 11.7895rem;
        border-radius: .4679rem;
        flex-shrink: 0;
    }

    .web-version .news_div .news_title {
        color: #EDECFF;
        font-family: 'Noto Sans 500', sans-serif;
        font-size: 1.2632rem;
        line-height: 140%;
        text-transform: capitalize;
        letter-spacing: 0.03em;
        margin-bottom: 1.0526rem;
    }

    .web-version .news_div .news_desc {
        color: #BABABA;
        font-family: 'Alike Angular 400';
        font-size: 1.0526rem;
        line-height: 140%;
        text-transform: capitalize;
        letter-spacing: 0.03em;
        margin-bottom: 1.2632rem;
    }

    .web-version .news_div .go {
        width: 6.9474rem;
        height: 2.4211rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-family: 'Noto Sans 700', sans-serif;
        font-size: 1.2632rem;
        line-height: 140%;
        text-transform: capitalize;
        letter-spacing: 0.03em;
        background: #484D59;
        border-radius: .4211rem;
    }

    .web-version .news_div .go:hover {
        background: #E11413;
    }

    /* pagination */
    .pagination-container {
        width: 33.3684rem;
        height: 2.7663rem;
        margin: 6.3158rem auto 3.8947rem;
        font-family: 'Poppins 400', sans-serif;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1.0374rem;
        line-height: 1.7289rem;
        color: #FFFFFF;
    }

    :root {
        --van-border-color: transparent !important;
        --van-border-width: 0px !important;
    }

    .van-pagination .van-pagination__item {
        --van-pagination-item-width: 2.7663rem;
        --van-pagination-height: 2.7568rem;
        padding: 0;
        border-radius: .3458rem;
        background: #000000;
    }

    .van-pagination__item button {
        color: #FFFFFF;
        font-size: 1.0374rem;
        border-radius: .3458rem;
        /* overflow: hidden;
        --van-border-color: transparent !important;
        --van-border-width: 0 !important; */
    }

    .van-pagination__prev:hover,
    .van-pagination__next:hover {
        background: #212121;
    }

    .van-pagination__item--active button {
        color: #C8102E !important;
        width: 2.7663rem;
        height: 2.7568rem;
        background: #212121;
        border-radius: .3458rem;
        overflow: hidden;
    }

    .total {
        color: #FFFFFF;
        font-family: 'Poppins 400', sans-serif;
        font-size: 1.0374rem;
        line-height: 1.7289rem;
        width: 4.5337rem;
        height: 1.7674rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* web-footer */
    .web-footer {
        padding-top: 2.1053rem;
        margin-top: 2.9474rem;
        background: rgba(34, 34, 34, 0.51);
    }

    .web-footer-w {
        max-width: 1440px;
        margin: 0 auto;
    }

    .footer-menu {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        padding: 0 6.3158rem 4.2105rem;
        gap: 3.1542rem;
    }

    .footer-title {
        color: #999999;
        font-family: 'Poppins 700', sans-serif;
        font-size: 1.2632rem;
        margin-bottom: 1.5789rem;
        white-space: nowrap;
    }

    .footer-menu>li a {
        display: block;
        font-family: 'Poppins 500', sans-serif;
        font-size: .9474rem;
        color: #CECECE;
        line-height: 130%;
        margin-bottom: 2rem;
    }

    .web-footer-bottom {
        border-top: .1053rem solid rgba(216, 216, 216, 0.12);
        width: 100%;
        padding-bottom: 3.1579rem;
    }

    .web-privacy-info {
        color: rgba(255, 255, 255, 0.3);
        font-family: 'Noto Sans 500', sans-serif;
        font-size: .8421rem;
        line-height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4rem;
        padding: 2.1053rem 0 1.0526rem;
    }

    .web-privacy-info>a {
        color: #FFFFFF;
        font-family: 'Noto Sans 500', sans-serif;
        font-size: .8421rem;
        line-height: 2rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .web-footer-bottom>div:nth-child(2) {
        color: rgba(255, 255, 255, 0.8);
        font-size: .6316rem;
        line-height: 100%;
        text-transform: capitalize;
        letter-spacing: 0em;
        font-family: 'Plus Jakarta Sans 400', sans-serif;
        text-align: center;
        margin-top: 1.0526rem;
    }

    /* cookie pannel */
    .cookie-pannel {
        min-height: 9.2105rem;
        padding: 2.5rem 6.25rem;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 2.1053rem 6.3158rem;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.8421rem;
    }

    .cookie-pannel .web-button {
        gap: 1.7895rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cookie-pannel>div>div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.7895rem;
    }

    .cookie-pannel .cookie-pannel-tips {
        color: #FFFFFF;
        font-size: 1.0526rem;
        line-height: 2.4779rem;
        width: 43.3684rem;
    }

    .cookie-pannel .button {
        background: none;
        border-radius: .5263rem;
        color: #CECECE;
        font-size: 1.1579rem;
        min-width: 8rem;
        height: 3.3684rem;
        border: .1053rem solid #CECECE;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cookie-pannel .button:hover {
        background: #E11413;
        border: none;
        color: #FFFFFF;
    }
}