@charset "UTF-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

i {
    font-style: normal;
}

@font-face {
    font-family: 'PROJECTDTYPECURVE';
    src: url("../fonts/PROJECTDTYPECURVE-BOLD.TTF");
}

@font-face {
    font-family: 'ProjectDType';
    src: url("../fonts/ProjectDType-Medium.ttf");
}

@font-face {
    font-family: 'NotoSans-Medium';
    src: url("../fonts/NotoSans-Medium.ttf");
}

@font-face {
    font-family: 'NotoSans-Bold';
    src: url("../fonts/NotoSans-Bold.ttf");
}


body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:focus,
input:focus,
p:focus,
div:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body,
html {
    width: 100%;
    background: #0a1010;
    -webkit-overflow-scrolling: touch;
    font-family: "NotoSans-Medium";
    height: 100%;
}

.lang-en {
    font-family: "ProjectDType";
}

.lang-en .bold {
    font-family: "PROJECTDTYPECURVE";
}

.bold {
    font-family: "NotoSans-Bold";
}

.lang-ar,
.lang-ar input,
.lang-ar select {
    direction: rtl;
}

main,
section,
nav,
footer {
    display: block;
    margin: 0;
    padding: 0;
}

.wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #0b0e0f url(../ossweb-img/bg.jpg) no-repeat center / cover;
}



.top-nav {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    transition: all .3s;
    height: 1.42rem;
}
.top-nav.nav2 {
    background: rgba(0, 0, 0, 1);
}
.top-nav::after {
    content: "";
    display: block;
    background: url(../ossweb-img/line.png) center center / 100% no-repeat;
    width: 100%;
    height: 0.2rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.logo {
    display: block;
    background: url(../ossweb-img/logo1.png) center center / 100% no-repeat;
    width: 3.45rem;
    height: 0.75rem;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.logo.l-logo {
    background: url(../ossweb-img/logo2.png) center center / 100% no-repeat;
}
.lang-ar .top-nav,
.lang-ur .top-nav {
    direction: ltr;
}

.login {
    position: absolute;
    top: 50%;
    right: 6.84rem;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    font-size: 0.3rem;
    color: #ffffff;
    line-height: 1;
    z-index: 10;
    transition: transform .5s;
    vertical-align: middle;
}

.login span {
    color: #ffffff;
    vertical-align: middle;
}
.login a {
    color: #e3e3e3;
    vertical-align: middle;
}
#logined a {
    display: flex;
    align-items: center;
}
.logout-icon {
    background: url(../ossweb-img/logout1.png) center center / 100% no-repeat;
    width: 0.17rem;
    height: 0.21rem;
    display: block;
    margin: 0 0.1rem;
    transform: scale(1.5);
}
#logined a:hover .logout-icon {
    background: url(../ossweb-img/logout2.png) center center / 100% no-repeat;
    width: 0.17rem;
    height: 0.2rem;
}
#logined a:hover span {
    color: #0ff796;
}

.language {
    width: 2.74rem;
    height: 0.75rem;
    z-index: 10;
    white-space: nowrap;
    text-align: center;
    font-size: .24rem;
    color: #a6a6a6;
    transition: width .5s;
    cursor: pointer;
    overflow: hidden;
    background-color: rgba(37, 37, 37, .45);
    border: .02rem rgba(255, 255, 255, .6) solid;
    border-radius: 1px;
    margin: 0 .74rem 0 0.4rem;

    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.language:hover {
    overflow: visible;
    width: 2.74rem;
    background-color: rgba(255, 255, 255, .45);
}

.language:before {
    display: block;
    content: "";
    width: .57rem;
    height: .57rem;
    position: relative;
    top: .08rem;
    left: .02rem;
    transition: left .5s;
    background: url(../ossweb-img/lang_icon.png) center center / 100% 100% no-repeat;
}

.language:after {
    content: "";
    position: absolute;
    width: .31rem;
    height: .22rem;
    top: .26rem;
    right: 0.1rem;
    opacity: 1;
    background: url(../ossweb-img/row_icon.png) center center / 100% 100% no-repeat;
}

.language p {
    width: 2.74rem;
    height: 0.75rem;
    line-height: 0.75rem;
    font-size: .24rem;
    color: rgba(255, 255, 255, .6);
    opacity: 1;
    position: absolute;
    top: 0;
}

.language ul {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding-top: .75rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 2s;
}

.language:hover ul {
    max-height: 999px;
}

.language li {
    width: 2.7rem;
    height: 0.75rem;
    line-height: .75rem;
    border-left: 1px #7a7773 solid;
    border-right: 1px #7a7773 solid;
    border-bottom: 1px #7a7773 solid;
    background-color: rgba(16, 16, 16, .77);
    box-sizing: border-box;
    font-size: .24rem;
    font-family: "NotoSans-Medium";
}

.language li.on,
.language li:hover {
    color: #0ff796;
    background-color: rgba(127, 135, 135, .6);
}

.main-swiper {
    width: 100%;
    height: 100%;
    position: relative;
}
.lang-ar .main-swiper {
    direction: ltr;
}
.lang-ar .swiper-slide {
    direction: rtl;
}
.slide1 {
    width: 100%;
    height: 100%;
    display: flex;
    /* transition: all .5s; */
}

.left-con {
    width: 71.3%;
    height: 100%;
    flex-shrink: 0;
    background-image: url(../ossweb-img/left_bg1.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: width .4s ease;
    position: relative;
}

.slide1[data-id="1"] .left-con {
    width: 28.7%;
    background-image: url(../ossweb-img/left_bg2.jpg);
    /* filter: grayscale(.88); */
}

.right-con {
    flex: 1;
    height: 100%;
    background-image: url(../ossweb-img/right_bg2.jpg);
    transition: width .4s ease;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* filter: grayscale(.88); */
    position: relative;
}

.slide1[data-id="1"] .right-con {
    background-image: url(../ossweb-img/right_bg1.jpg);
    /* filter: grayscale(0); */
}

.left-slogan {
    display: block;
    background: url(../ossweb-img/left-slogan1/en.png) center center / contain no-repeat;
    width: 19rem;
    height: 3rem;
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.lang-ar .left-slogan {
    background: url(../ossweb-img/left-slogan1/ar.png) center center / contain no-repeat;
}
.lang-en .left-slogan {
    background: url(../ossweb-img/left-slogan1/en.png) center center / contain no-repeat;
}
.lang-zh-cn .left-slogan {
    background: url(../ossweb-img/left-slogan1/zh.png) center center / contain no-repeat;
}
.lang-fr .left-slogan {
    background: url(../ossweb-img/left-slogan1/fr.png) center center / contain no-repeat;
}
.lang-es .left-slogan {
    background: url(../ossweb-img/left-slogan1/es.png) center center / contain no-repeat;
}
.lang-ru .left-slogan {
    background: url(../ossweb-img/left-slogan1/ru.png) center center / contain no-repeat;
}
.lang-de .left-slogan {
    background: url(../ossweb-img/left-slogan1/de.png) center center / contain no-repeat;
}
.lang-zh-tw .left-slogan {
    background: url(../ossweb-img/left-slogan1/tw.png) center center / contain no-repeat;
}
.lang-pt .left-slogan {
    background: url(../ossweb-img/left-slogan1/pt.png) center center / contain no-repeat;
}
.lang-ko .left-slogan {
    background: url(../ossweb-img/left-slogan1/ko.png) center center / contain no-repeat;
}
.lang-ja .left-slogan {
    background: url(../ossweb-img/left-slogan1/ja.png) center center / contain no-repeat;
}
.lang-tr .left-slogan {
    background: url(../ossweb-img/left-slogan1/tr.png) center center / contain no-repeat;
}

.slide1[data-id="1"] .left-slogan {
    transform: translateX(-50%) scale(0.5);
    -o-transform: translateX(-50%) scale(0.5);
    -ms-transform: translateX(-50%) scale(0.5);
    -moz-transform: translateX(-50%) scale(0.5);
    -webkit-transform: translateX(-50%) scale(0.5);
    bottom: 21.2%;
}

.btn-enter {
    background: url(../ossweb-img/btn1_bg.png) center center / 100% no-repeat;
    display: block;
    width: 7.43rem;
    height: 1.15rem;
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.btn-enter p {
    color: #20383f;
    font-size: 0.4rem;
    line-height: 1.15rem;
    text-align: center;
    font-weight: bold;
}

.slide1[data-id="1"] .left-enter {
    display: none;
}
.slide1[data-id="0"] .right-enter {
    display: none;
}

.right-slogan {
    display: block;
    background: url(../ossweb-img/right-slogan1/en.png) center center / contain no-repeat;
    width: 12.5rem;
    height: 3rem;
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%) scale(1.2);
    -o-transform: translateX(-50%) scale(1.2);
    -ms-transform: translateX(-50%) scale(1.2);
    -moz-transform: translateX(-50%) scale(1.2);
    -webkit-transform: translateX(-50%) scale(1.2);
}
.lang-en .right-slogan {
    background: url(../ossweb-img/right-slogan1/en.png) center center / contain no-repeat;
}
.lang-ar .right-slogan {
    background: url(../ossweb-img/right-slogan1/ar.png) center center / contain no-repeat;
}
.lang-zh-cn .right-slogan {
    background: url(../ossweb-img/right-slogan1/zh.png) center center / contain no-repeat;
}
.lang-fr .right-slogan {
    background: url(../ossweb-img/right-slogan1/fr.png) center center / contain no-repeat;
}
.lang-es .right-slogan {
    background: url(../ossweb-img/right-slogan1/es.png) center center / contain no-repeat;
}
.lang-ru .right-slogan {
    background: url(../ossweb-img/right-slogan1/ru.png) center center / contain no-repeat;
}
.lang-de .right-slogan {
    background: url(../ossweb-img/right-slogan1/de.png) center center / contain no-repeat;
}
.lang-zh-tw .right-slogan {
    background: url(../ossweb-img/right-slogan1/tw.png) center center / contain no-repeat;
}
.lang-pt .right-slogan {
    background: url(../ossweb-img/right-slogan1/pt.png) center center / contain no-repeat;
}
.lang-ko .right-slogan {
    background: url(../ossweb-img/right-slogan1/ko.png) center center / contain no-repeat;
}
.lang-ja .right-slogan {
    background: url(../ossweb-img/right-slogan1/ja.png) center center / contain no-repeat;
}
.lang-tr .right-slogan {
    background: url(../ossweb-img/right-slogan1/tr.png) center center / contain no-repeat;
}
.slide1[data-id="0"] .right-slogan {
    transform: translateX(-50%) scale(0.8);
    -o-transform: translateX(-50%) scale(0.8);
    -ms-transform: translateX(-50%) scale(0.8);
    -moz-transform: translateX(-50%) scale(0.8);
    -webkit-transform: translateX(-50%) scale(0.8);
    bottom: 21.2%;
}

.scroll-tip {
    position: absolute;
    background: url(../ossweb-img/scroll_icon.png) center center / 100% no-repeat;
    width: .45rem;
    height: .65rem;
    bottom: 1.2rem;
    left: 50%;
    margin-left: -.23rem;
    z-index: 10;
    pointer-events: none;
}
.scroll-tip i {
    position: absolute;
    width: .08rem;
    height: .08rem;
    border-bottom: 1px #FFF solid;
    border-left: 1px #FFF solid;
    left: 50%;
    top: 100%;
    margin-left: -.04rem;
    transform: rotate(-45deg);
    animation: an_opacity1 1.5s linear infinite;
}
.scroll-tip i:nth-child(1) {
    margin-top: .07rem;
    animation-delay: .5s;
}
.scroll-tip i:nth-child(2) {
    margin-top: .2rem;
    animation-delay: 1s;
}
.scroll-tip i:nth-child(3) {
    margin-top: .33rem;
    animation-delay: 1.5s;
}
.scroll-tip p {
    position: absolute;
    top: 1.3rem;
    left: 50%;
    font-size: .24rem;
    color: #fff;
    line-height: 1;
    transform: translate(-50%);
    white-space: nowrap;
}

/* s2 */
.slide2 {
    position: relative;
    background: url(../ossweb-img/bg2.jpg) center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.s2-content {
    position: absolute;
    margin-top: 2.6rem;
    width: 34.9rem;
    height: 15.52rem;
    display: flex;
    justify-content: space-between;
}
.lang-ar .s2-content,
.lang-ur .s2-content {
    direction: ltr;
}
.longwrapper1 .s2-content {
    transform: scale(.94);
}
.longwrapper2 .s2-content {
    transform: scale(.88);
}
.top-screen.longwrapper1 .s2-content {
    transform: scale(.76);
}
.top-screen.longwrapper2 .s2-content {
    transform: scale(.64);
}

.btn-back {
    background: url(../ossweb-img/btn_back.png) center center / 100% no-repeat;
    display: block;
    min-width: 6.63rem;
    width: auto;
    height: 1.05rem;
    position: absolute;
    top: -1.1rem;
}
.btn-back p {
    font-size: 0.4rem;
    color: #0ff796;
    line-height: 1.05rem;
    text-align: center;
}
.s2-back {
    right: 0;
}
.lang-ar .s2-back,
.lang-ur .s2-back {
    right: unset;
    left: 0.74rem;
}
.s2-back::after {
    content: "";
    position: absolute;
    width: .41rem;
    height: .22rem;
    top: 50%;
    right: .3rem;
    margin-top: -.11rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAWCAYAAABdTLWOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmRJREFUeNqkl02IjWEUx9+5c9OkNJOFmpJsZqFYUIpr6aPMTBkiY8GYBQsWykJoVmKwIyU2Y5CmIUUyvr8bY4RIMzejSJSw8JF8f/1O/W9dmrn3nNepX92677/zf55znvM+b0X15725JEk2QjN8SvyxAJZAK3wP6FbDZFgHvz2CDNyGD3AOqgPJLsBYOA5VAd0xmA4dUOk1+QNWwEO4AuOcyWzXm+AL9MAYp+4tzIUJcBRGeUxa/II12s1rMN6Z8BssgydwUTvriY9Qr508BaM9JguxCTrhBtQ5E/6EVdCrBdY6dV9hMbxR69R4TVrsFFdhijOhHYD16jdb4ESnzlptOdyHyyO1WmYE8T7YoBLOCByKLbBHRicFFrgWzsJ19epfkS0hPqJTbz2zVCv1xG54r0NofXfPqdsM79Qy8+Bx4Y/KqraGUsIhuAvd+v3ImdDK91S6fnjm1PWqV208XYJXHpOJktnquuA1PHAmzOvZbv0ecuruwEtVsg+eZ5xCG/htsD8wnizOwy5NjJqArkuH8LC1ZNYpmgXtsAheBJI16vXXqH7zhr1qF8IcmwAZp8ETeiudCRrs0Dv+VtDgVhnMlzvdBYMnNcsiBhuKDPb9j8FSc7J4B9MYPJDC4MrhDJYymUtZ4noZbEphcJsuHnnPMM+pxC0pDHbK4M2gwXbt4OBwD2RLGOwJGjyoEkcMtpQz+G+5CyWOGpyf0qC10vZyBotNzpTB1hQGD6U0uEM9OFjuYSv3NJXYDJ4OJJotg9EebNZV0HZwwCOo4EPMvmum6v4YiVpdq/qDujp9Mgx4BX8EGAC+BJ5ktRKzYgAAAABJRU5ErkJggg==);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: scrollX .8s linear infinite alternate;
}
.lang-ar .s2-back::after,
.lang-ur .s2-back::after {
    right: unset;
    left: .3rem;
    margin-top: -.11rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAWCAYAAABdTLWOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmRJREFUeNqkl02IjWEUx9+5c9OkNJOFmpJsZqFYUIpr6aPMTBkiY8GYBQsWykJoVmKwIyU2Y5CmIUUyvr8bY4RIMzejSJSw8JF8f/1O/W9dmrn3nNepX92677/zf55znvM+b0X15725JEk2QjN8SvyxAJZAK3wP6FbDZFgHvz2CDNyGD3AOqgPJLsBYOA5VAd0xmA4dUOk1+QNWwEO4AuOcyWzXm+AL9MAYp+4tzIUJcBRGeUxa/II12s1rMN6Z8BssgydwUTvriY9Qr508BaM9JguxCTrhBtQ5E/6EVdCrBdY6dV9hMbxR69R4TVrsFFdhijOhHYD16jdb4ESnzlptOdyHyyO1WmYE8T7YoBLOCByKLbBHRicFFrgWzsJ19epfkS0hPqJTbz2zVCv1xG54r0NofXfPqdsM79Qy8+Bx4Y/KqraGUsIhuAvd+v3ImdDK91S6fnjm1PWqV208XYJXHpOJktnquuA1PHAmzOvZbv0ecuruwEtVsg+eZ5xCG/htsD8wnizOwy5NjJqArkuH8LC1ZNYpmgXtsAheBJI16vXXqH7zhr1qF8IcmwAZp8ETeiudCRrs0Dv+VtDgVhnMlzvdBYMnNcsiBhuKDPb9j8FSc7J4B9MYPJDC4MrhDJYymUtZ4noZbEphcJsuHnnPMM+pxC0pDHbK4M2gwXbt4OBwD2RLGOwJGjyoEkcMtpQz+G+5CyWOGpyf0qC10vZyBotNzpTB1hQGD6U0uEM9OFjuYSv3NJXYDJ4OJJotg9EebNZV0HZwwCOo4EPMvmum6v4YiVpdq/qDujp9Mgx4BX8EGAC+BJ5ktRKzYgAAAABJRU5ErkJggg==);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: scrollX2 .8s linear infinite alternate;
}
.s2-box {
    position: relative;
}
.lang-ar .s2-box,
.lang-ur .s2-box {
    direction: rtl;
}
.s2-top-box {
    background-image: url(../ossweb-img/top_box_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 17.46rem;
    height: 6.43rem;
    margin: 0 auto;
    position: relative;
}
.lang-ar .s2-top-box,
.lang-ur .s2-top-box {
    background-image: url(../ossweb-img/ar_top_box_bg.png);
}

.s2-title1 {
    color: #ffffff;
    min-width: 6rem;
    font-size: 0.5rem;
    line-height: 1.2rem;
    padding: 0 0.4rem;
}

.select-track {
    width: 3.74rem;
    height: 0.63rem;
    border: 1px solid rgba(255, 255, 255, .3);
    background-color: transparent;
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    z-index: 9;
}
.lang-ar .select-track {
    right: unset;
    left: 0.8rem;
}
.select-track::after {
    content: "";
    background: url(../ossweb-img/select_icon.png) center center / 100% no-repeat;
    width: 0.31rem;
    height: 0.22rem;
    position: absolute;
    right: 0.12rem;
    top: 0.16rem;
}
.lang-ar .select-track::after,
.lang-ur .select-track::after {
    right: unset;
    left: 0.12rem;
}
.select-track p {
    padding-right: 0.5rem;
    padding-left: 0.1rem;
    line-height: 0.59rem;
    font-size: 0.2rem;
    color: #a6a6a6;
    text-align: center;
}
.select-track ul {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding-top: 0.63rem;
    max-height: 0;
    overflow: hidden;
    color: #a6a6a6;
}
.select-track:hover ul {
    max-height: 999px;
}
.select-track li {
    width: 3.68rem;
    height: 0.63rem;
    line-height: 0.59rem;
    border-left: 1px #7a7773 solid;
    border-right: 1px #7a7773 solid;
    border-bottom: 1px #7a7773 solid;
    background-color: rgba(16, 16, 16, .77);
    box-sizing: border-box;
    font-size: .24rem;
    text-align: center;
}
.select-track li.on,
.select-track li:hover {
    color: #0ff796;
    background-color: rgba(127, 135, 135, .6);
}

.rewards-con {
    display: flex;
    align-items: center;
    justify-content: space-around;
    align-items: center;
    padding: 0 2.2rem;
    margin-top: .4rem;
}
.rewards-con .top1 {
    position: relative;
    flex: 1;
}
.s3-box1 .rewards-con {
    padding: 0 0.4rem;
}
.rewards-con .top-rewards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
}
.s2-box .rewards-con .top1-rewards {
    position: absolute;
    top: 0.7rem;
    left: 4.2rem;
    width: 4rem;
}
.lang-ar .s2-box .rewards-con .top1-rewards {
    left: unset;
    right: 4.2rem;
}
.s2-box .rewards-con .top2 {
    width: 4rem;
}
.s3-box .rewards-con .top2 {
    width: 8rem;
}
.s3-box1 .top2 .top2-rewards {
    justify-content: center;
    align-items: center;
    flex-flow: wrap-reverse;
}
.rewards-con .top-name {
    font-size: 0.34rem;
    color: #ffffff;
    line-height: 0.44rem;
    text-align: center;
    margin-bottom: 0.22rem;
}
.rewards-con .top-name b {
    color: #f4cf67;
}
.rewards-con .rewards-box {
    background: url(../ossweb-img/reward_bg.png) center center / 100% no-repeat;
    width: 1.62rem;
    height: 1.38rem;
    flex-shrink: 0;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin: 0.15rem;
    position: relative;
}
.rewards-con .rewards-box.rewards-box-first {
    background: url(../ossweb-img/reward_first_bg.png) center center / 100% no-repeat;
    width: 3.59rem;
    height: 3.06rem;
    z-index: 9;
    margin-top: 0.4rem;
}
.s2-box .reward-box-first-pop {
    display: none;
    background: url(../ossweb-img/reward_pop_bg1.png) center center / 100% no-repeat;
    width: 9.99rem;
    height: 5.32rem;
    position: absolute;
    top: -1.6rem;
    left: 4.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    z-index: 999;
    /* transform: scale(1.2); */
    transform: scale(1.6);
    top: -1rem;
    left: 6.4rem;
}
.lang-ar .s2-box .reward-box-first-pop {
    left: unset;
    right: 4.5rem;
}
.s2-box .reward-box-first-pop.act {
    display: flex;
}
.s3-box .reward-box-first-pop {
    display: none;
    background: url(../ossweb-img/reward_pop_bg1.png) center center / 100% no-repeat;
    width: 9.99rem;
    height: 5.32rem;
    position: absolute;
    /* top: -2rem;
    left: 1.9rem; */
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    z-index: 999;
    transform: scale(1.5);
    top: -1rem;
    left: 4.5rem;
}
.lang-ar .s3-box .reward-box-first-pop {
    left: unset;
    right: 3.8rem;
}
.s3-box .reward-box-first-pop.act {
    display: flex;
}
.reward-box-pop.reward-box-pop-1 {
    margin: 0 0.4rem;
}
.reward-box-pop-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0.2rem;
    height: 5.2rem;
    flex-direction: column;
    justify-content: center;
}
.reward-box-pop-list .reward-box-pop {
    margin: 0.1rem 0.2rem;
}
.reward-box-first-pop .reward-box-pop-img {
    background: url(../ossweb-img/reward_pop_box2.png) center center / 100% no-repeat;
    width: 1.76rem;
    height: 1.51rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.reward-box-first-pop .reward-box-pop-img.reward-box-pop-img1 {
    background: url(../ossweb-img/reward_pop_box1.png) center center / 100% no-repeat;
    width: 2.74rem;
    height: 2.34rem;
}
.rewards-con .rewards-box .prize-num {
    font-size: 0.29rem;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    position: absolute;
    bottom: 0.04rem;
    right: 0.1rem;
}
.reward-box-first-pop .reward-box-pop .reward-box-pop-name {
    font-size: 0.2rem;
    line-height: 0.3rem;
    text-align: center;
    color: #ffffff;
    margin-bottom: 0.1rem;
}
.reward-box-first-pop .reward-box-pop .reward-box-pop-1-name {
    font-size: 0.3rem;
    line-height: 0.4rem;
    color: #ffffff;
    text-align: center;
    margin-bottom: 0.1rem;
}
.s3-box1 .rewards-con .rewards-box {
    background: url(../ossweb-img/reward_bg2.png) center center / 100% no-repeat;
    width: 1.58rem;
    height: 1.25rem;
    margin: 0.46rem 0.12rem 0;
}
.s3-box1 .rewards-con .rewards-box.rewards-box-first {
    background: url(../ossweb-img/reward_first_bg2.png) center center / 100% no-repeat;
    width: 1.91rem;
    height: 1.51rem;
    transform: scale(1.2);
    position: relative;
    left: -0.1rem;
}
.lang-ar .s3-box1 .rewards-con .rewards-box.rewards-box-first {
    left: unset;
    right: -0.1rem;
}
.rewards-box .prize {
    width: 0.95rem;
    height: 0.95rem;
    object-fit: contain;
}
.rewards-box.rewards-box-first .prize {
    width: 2.24rem;
    height: 2.4rem;
    object-fit: contain;
} 
.prize {
    width: 0.95rem;
    height: 0.95rem;
    object-fit: contain;
}

.reward-box-first-pop .reward-box-pop-img .prize {
    /* width: 0.87rem; */
    width: 1.04rem;
    /* height: 0.93rem; */
    height: 1.11rem;
    object-fit: contain;
}
.reward-box-first-pop .reward-box-pop-img.reward-box-pop-img1 .prize {
    /* width: 1.33rem; */
    width: 1.59rem;
    /* height: 1.42rem; */
    height: 1.7rem;
}
.reward-box-first-pop .reward-box-pop-img .prize-name {
    font-size: 0.2rem;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    position: absolute;
    right: 0.1rem;
    bottom: 0.1rem;
}
.reward-box-first-pop .reward-box-pop-img.reward-box-pop-img1 .prize-name {
    font-size: 0.3rem;
}
.s3-box1 .rewards-box .prize {
    width: 0.85rem;
    height: 0.94rem;
}
.s3-box1 .rewards-box.rewards-box-first .prize {
    width: 1.2rem;
    height: 1.28rem;
}
.s3-box1 .reward-box-first-pop .reward-box-pop-img .prize {
    /* width: 0.87rem; */
    width: 1.04rem;
    /* height: 0.93rem; */
    height: 1.11rem;
    object-fit: contain;
}
.s3-box1 .reward-box-first-pop .reward-box-pop-img.reward-box-pop-img1 .prize {
    /* width: 1.33rem; */
    width: 1.59rem;
    /* height: 1.42rem; */
    height: 1.7rem;
}
.rewards-box .reward-name {
    width: 1.82rem;
    height: 0.54rem;
    font-size: 0.16rem;
    color: #ffffff;
    line-height: 0.18rem;
    margin-bottom: 0.02rem;
    padding: 0 0.06rem;
    text-align: center;
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis; */
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: rgba(7, 40, 34, 0.6);
    overflow: hidden;
}
.rewards-box .reward-name span {
    display: block;
}
.rewards-box .reward-name span b {
    color: #f4cf67;
}
.reward-line {
    width: 0.02rem;
    height: 4rem;
    background: url(../ossweb-img/reward_line.png) center center / 100% 100% no-repeat;
    margin: 0 0.5rem;
    position: relative;
    top: 0.3rem;
}
.s2-bottom-box {
    background-image: url(../ossweb-img/bottom_box_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 18.89rem;
    height: 9.96rem;
    position: relative;
    top: -1rem;
    left: -0.1rem;
    padding: 2rem 1.4rem 0 1.6rem;
}
.box-top-con {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0.2rem 0 0.5rem;
}
.box-top-con::after {
    content: "";
    display: block;
    background: url(../ossweb-img/box_line.png) center center / 100% no-repeat;
    width: 15.91rem;
    height: 0.02rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.s2-title2 {
    font-size: 0.5rem;
    color: #ffffff;
    line-height: 0.6rem;
    width: 8rem;
}
.btn-twitch {
    display: block;
    background: url(../ossweb-img/btn_twitch.png) center center / 100% no-repeat;
    width: 5.94rem;
    height: 1.04rem;
}
.btn-twitch p {
    text-align: center;
    line-height: 1.04rem;
    font-size: 0.4rem;
    color: #20383f;
    font-weight: bold;
}

.s2-title3 {
    color: #ffffff;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    line-height: 0.8rem;
    font-weight: bold;
}

.faq-text {
    margin-top: 0.1rem;
    overflow-x: hidden;
    overflow-y: auto;
    height: 4.3rem;
}
.faq-text p {
    margin: 0.4rem 0;
    padding: 0 0.2rem;
}
.faq-text p .faq-content {
    display: block;
}
.faq-text .faq-title {
    color: #ffffff;
    line-height: 0.44rem;
    font-size: 0.34rem;
    margin-bottom: 0.2rem;
    position: relative;
}
.faq-text .faq-title::before {
    content: "";
    background-color: #0ff796;
    width: .12rem;
    height: .12rem;
    position: absolute;
    top: 0.16rem;
    left: -0.2rem;
}
.faq-content.faq-content-url a {
    text-decoration-line: underline;
    color: #0ff796;
}
.lang-ar .faq-text .faq-title::before,
.lang-ur .faq-text .faq-title::before {
    left: unset;
    right: -0.2rem;
}
.faq-content {
    color: #e5e5e5;
    line-height: 0.5rem;
    font-size: 0.34rem;
}

.s2-box2 {
    background-image: url(../ossweb-img/rank_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 16.45rem;
    height: 15.49rem;
}
.lang-ar .s2-box2,
.lang-ur .s2-box2 {
    background-image: url(../ossweb-img/ar_rank_bg.png);
}
.s2-title4 {
    font-size: 0.5rem;
    color: #ffffff;
    line-height: 1.2rem;
    padding: 0 0.4rem;
}
.s2-title4 span {
    color: #a9bec5;
}
.s2-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.74rem;
}
.s2-tab .tab {
    background: url(../ossweb-img/tab1.png) center center / 100% no-repeat;
    width: 6.75rem;
    height: 1.07rem;
    display: block;
}
.s2-tab .tab.act {
    background: url(../ossweb-img/tab1_act.png) center center / 100% no-repeat;
}
.s2-tab .tab p {
    color: #9e8f66;
    font-size: 0.4rem;
    line-height: 1.07rem;
    text-align: center;
}
.s2-tab .tab.act p {
    color: #20383f;
}
.s2-show {
    display: none;
    flex-flow: column;
}
.s2-show.act {
    display: flex;
}
#s2 .rank-head {
    background: url(../ossweb-img/rank_head_bg.png) center center / 100% no-repeat;
    width: 13.54rem;
    height: 0.78rem;
    padding: 0 0.2rem;
    margin: 0 auto 0.1rem;
    display: flex;
}
#s2 .rank-head .td {
    font-size: 0.24rem;
    color: #c7c7c7;
    line-height: 0.34rem;
    flex-shrink: 0;
    height: 0.78rem;
    display: flex;
    align-items: center;
}

#s2 .rank-head .td:nth-child(1) {
    width: 30%;
}
#s2 .rank-head .td:nth-child(2) {
    width: 50%;
}
#s2 .rank-head .td:nth-child(3) {
    width: 20%;
    text-align: center;
    justify-content: center;
}
#s2 .rank-table {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 13.54rem;
    margin: 0 auto;
    height: 9rem;
    overflow: hidden;
}
#s2 .rank-table li {
    width: 13.54rem;
    height: 0.8rem;
    line-height: 0.8rem;
    display: flex;
    margin: 0.04rem 0;
}
/* 单数 */
#s2 .rank-table li:nth-child(2n + 1) {
    background: #293233;
}
#s2 .rank-table li.rank1 {
    background: url(../ossweb-img/rank1_bg.png) center center / 100% no-repeat;
}
#s2 .rank-table li .td {
    flex-shrink: 0;
}
#s2 .rank-table li .td:nth-child(1) {
    width: 30%;
    padding: 0 0.2rem;
}
#s2 .rank-table li .td:nth-child(2) {
    width: 50%;
}
#s2 .rank-table li .td:nth-child(3) {
    width: 20%;
    text-align: center;
    padding: 0 0.2rem;
}
#s2 .rank-table li .td:nth-child(1) {
    color: #b5b5b5;
    font-size: 0.24rem;
    line-height: 0.78rem;
}
#s2 .rank-table li.rank1 .td:nth-child(1) {
    background: url(../ossweb-img/rank1_icon.png) left center / 1.28rem 0.78rem no-repeat;
    color: #000000;
}
.lang-ar #s2 .rank-table li.rank1 .td:nth-child(1),
.lang-ur #s2 .rank-table li.rank1 .td:nth-child(1) {
    background: url(../ossweb-img/ar_rank1_icon.png) right center / 1.28rem 0.78rem no-repeat;
}
#s2 .rank-table li.rank2 .td:nth-child(1) {
    background: url(../ossweb-img/rank2_icon.png) left center / 1.28rem 0.78rem no-repeat;
    color: #000000;
}
.lang-ar #s2 .rank-table li.rank2 .td:nth-child(1),
.lang-ur #s2 .rank-table li.rank2 .td:nth-child(1) {
    background: url(../ossweb-img/ar_rank2_icon.png) right center / 1.28rem 0.78rem no-repeat;
}
#s2 .rank-table li.rank3 .td:nth-child(1) {
    background: url(../ossweb-img/rank3_icon.png) left center / 1.28rem 0.78rem no-repeat;
    color: #000000;
}
.lang-ar #s2 .rank-table li.rank3 .td:nth-child(1),
.lang-ur #s2 .rank-table li.rank3 .td:nth-child(1) {
    background: url(../ossweb-img/ar_rank3_icon.png) right center / 1.28rem 0.78rem no-repeat;
}
.rank-table li .td {
    position: relative;
}
.rank-table li.rank-up .td:nth-child(1)::after {
    content: "";
    background: url(../ossweb-img/rank_up.png) center center / 100% no-repeat;
    width: 0.15rem;
    height: 0.24rem;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.rank-table li.rank-down .td:nth-child(1)::after {
    content: "";
    background: url(../ossweb-img/rank_down.png) center center / 100% no-repeat;
    width: 0.15rem;
    height: 0.24rem;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
/* .rank-table li.rank-online .td:nth-child(2)::before {
    content: "";
    background: #6fffba;
    border-radius: 50%;
    width: 0.12rem;
    height: 0.12rem;
    position: absolute;
    left: -0.32rem;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.lang-ar .rank-table li.rank-online .td:nth-child(2)::before,
.lang-ur .rank-table li.rank-online .td:nth-child(2)::before {
    left: unset;
    right: -0.32rem;
} */
.member-name {
    position: relative;
}
.rank-table li.rank-new .td:nth-child(2) .member-name::after {
    content: "";
    background: url(../ossweb-img/rank_new_icon.png) center center / 100% no-repeat;
    width: 0.92rem;
    height: 0.23rem;
    position: absolute;
    right: -1.2rem;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.lang-ar .rank-table li.rank-new .td:nth-child(2) .member-name::after,
.lang-ur .rank-table li.rank-new .td:nth-child(2) .member-name::after {
    right: unset;
    left: -1.2rem;
}
#s2 .rank-table li .td:nth-child(2) {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 0.26rem;
}
#s2 .rank-table li .td:nth-child(2) img {
    width: 0.51rem;
    height: 0.51rem;
    object-fit: contain;
    border-radius: 50%;
}
#s2 .member-name {
    margin: 0 0.2rem;
}
#s2 .rank-table li .td:nth-child(3) {
    color: #ffffff;
    font-size: 0.24rem;
}
.s2-rank-perv {
    display: block;
    background: url(../ossweb-img/rank_left.png) center center / 100% no-repeat;
    width: 0.46rem;
    height: 0.58rem;
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    margin-left: -1rem;
}
.s2-rank-next {
    display: block;
    background: url(../ossweb-img/rank_right.png) center center / 100% no-repeat;
    width: 0.46rem;
    height: 0.58rem;
    position: absolute;
    bottom: 1.8rem;
    right: 50%;
    margin-right: -1rem;
}
.my-rank {
    width: 100%;
    height: 1.33rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #243b35;
    display: flex;
    align-items: center;
    padding: 0 1.42rem;
}
.my-rank .rank-title {
    width: 40%;
    flex-shrink: 0;
    color: #b5b5b5;
    font-size: 0.24rem;
    line-height: 0.34rem;
}
.my-rank .member-box {
    width: 35%;
    flex-shrink: 0;
    display: flex;
}
.my-rank .member-box img {
    width: 0.51rem;
    height: 0.51rem;
}
.my-rank .member-box .member-name {
    color: #ffffff;
    font-size: 0.26rem;
}
.my-rank .rank-time {
    width: 25%;
    flex-shrink: 0;
    color: #ffffff;
    font-size: 0.24rem;
}

#no-rank1,
#no-rank2 {
    display: none;
    align-items: center;
    justify-content: center;
}
#no-rank1.act,
#no-rank2.act {
    display: flex;
}
#no-rank1 p,
#no-rank2 p {
    text-align: center;
    font-size: .24rem;
    line-height: .34rem;
    color: #e2e2e2;
}

.login-tip {
    width: 100%;
    height: 1.33rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #243b35;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.42rem;
}
.login-tip p {
    text-align: center;
    font-size: .24rem;
    line-height: .34rem;
    color: #e2e2e2;
}
.login-tip a {
    color: #0ff796;
}

/* s3 */
.slide3 {
    position: relative;
    background: url(../ossweb-img/bg3.jpg) center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.s3-content {
    position: absolute;
    margin-top: 2.6rem;
    width: 34.9rem;
    height: 15.52rem;
    display: flex;
    justify-content: space-between;
}
.lang-ar .s3-content,
.lang-ur .s3-content {
    direction: ltr;
}
.longwrapper1 .s3-content {
    transform: scale(.94);
}
.longwrapper2 .s3-content {
    transform: scale(.88);
}
.top-screen.longwrapper1 .s3-content {
    transform: scale(.76);
}
.top-screen.longwrapper2 .s3-content {
    transform: scale(.64);
}
.s3-back {
    left: 0.74rem;
    top: -1.16rem;
}
.lang-ar .s3-back,
.lang-ur .s3-back {
    left: unset;
    right: 0;
}
.s3-back::after {
    content: "";
    position: absolute;
    width: .41rem;
    height: .22rem;
    top: 50%;
    left: .3rem;
    margin-top: -.11rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAWCAYAAABdTLWOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmRJREFUeNqkl02IjWEUx9+5c9OkNJOFmpJsZqFYUIpr6aPMTBkiY8GYBQsWykJoVmKwIyU2Y5CmIUUyvr8bY4RIMzejSJSw8JF8f/1O/W9dmrn3nNepX92677/zf55znvM+b0X15725JEk2QjN8SvyxAJZAK3wP6FbDZFgHvz2CDNyGD3AOqgPJLsBYOA5VAd0xmA4dUOk1+QNWwEO4AuOcyWzXm+AL9MAYp+4tzIUJcBRGeUxa/II12s1rMN6Z8BssgydwUTvriY9Qr508BaM9JguxCTrhBtQ5E/6EVdCrBdY6dV9hMbxR69R4TVrsFFdhijOhHYD16jdb4ESnzlptOdyHyyO1WmYE8T7YoBLOCByKLbBHRicFFrgWzsJ19epfkS0hPqJTbz2zVCv1xG54r0NofXfPqdsM79Qy8+Bx4Y/KqraGUsIhuAvd+v3ImdDK91S6fnjm1PWqV208XYJXHpOJktnquuA1PHAmzOvZbv0ecuruwEtVsg+eZ5xCG/htsD8wnizOwy5NjJqArkuH8LC1ZNYpmgXtsAheBJI16vXXqH7zhr1qF8IcmwAZp8ETeiudCRrs0Dv+VtDgVhnMlzvdBYMnNcsiBhuKDPb9j8FSc7J4B9MYPJDC4MrhDJYymUtZ4noZbEphcJsuHnnPMM+pxC0pDHbK4M2gwXbt4OBwD2RLGOwJGjyoEkcMtpQz+G+5CyWOGpyf0qC10vZyBotNzpTB1hQGD6U0uEM9OFjuYSv3NJXYDJ4OJJotg9EebNZV0HZwwCOo4EPMvmum6v4YiVpdq/qDujp9Mgx4BX8EGAC+BJ5ktRKzYgAAAABJRU5ErkJggg==);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: scrollX2 .8s linear infinite alternate;
}
.lang-ar .s3-back::after,
.lang-ar .s3-back::after {
    left: unset;
    right: .3rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAWCAYAAABdTLWOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmRJREFUeNqkl02IjWEUx9+5c9OkNJOFmpJsZqFYUIpr6aPMTBkiY8GYBQsWykJoVmKwIyU2Y5CmIUUyvr8bY4RIMzejSJSw8JF8f/1O/W9dmrn3nNepX92677/zf55znvM+b0X15725JEk2QjN8SvyxAJZAK3wP6FbDZFgHvz2CDNyGD3AOqgPJLsBYOA5VAd0xmA4dUOk1+QNWwEO4AuOcyWzXm+AL9MAYp+4tzIUJcBRGeUxa/II12s1rMN6Z8BssgydwUTvriY9Qr508BaM9JguxCTrhBtQ5E/6EVdCrBdY6dV9hMbxR69R4TVrsFFdhijOhHYD16jdb4ESnzlptOdyHyyO1WmYE8T7YoBLOCByKLbBHRicFFrgWzsJ19epfkS0hPqJTbz2zVCv1xG54r0NofXfPqdsM79Qy8+Bx4Y/KqraGUsIhuAvd+v3ImdDK91S6fnjm1PWqV208XYJXHpOJktnquuA1PHAmzOvZbv0ecuruwEtVsg+eZ5xCG/htsD8wnizOwy5NjJqArkuH8LC1ZNYpmgXtsAheBJI16vXXqH7zhr1qF8IcmwAZp8ETeiudCRrs0Dv+VtDgVhnMlzvdBYMnNcsiBhuKDPb9j8FSc7J4B9MYPJDC4MrhDJYymUtZ4noZbEphcJsuHnnPMM+pxC0pDHbK4M2gwXbt4OBwD2RLGOwJGjyoEkcMtpQz+G+5CyWOGpyf0qC10vZyBotNzpTB1hQGD6U0uEM9OFjuYSv3NJXYDJ4OJJotg9EebNZV0HZwwCOo4EPMvmum6v4YiVpdq/qDujp9Mgx4BX8EGAC+BJ5ktRKzYgAAAABJRU5ErkJggg==);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: scrollX .8s linear infinite alternate;
}
.s3-box {
    position: relative;
}
.lang-ar .s3-box,
.lang-ur .s3-box {
    direction: rtl;
}
.s3-top-box {
    background-image: url(../ossweb-img/top_box_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 17.46rem;
    height: 6.43rem;
    margin: 0 auto;
    position: relative;
}
.lang-ar .s3-top-box,
.lang-ur .s3-top-box {
    background-image: url(../ossweb-img/ar_top_box_bg.png);
}
.s3-title1 {
    color: #ffffff;
    min-width: 6rem;
    font-size: 0.5rem;
    line-height: 1.2rem;
    padding: 0 0.4rem;
}
.s3-bottom-box {
    background-image: url(../ossweb-img/bottom_box_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 18.89rem;
    height: 9.96rem;
    position: relative;
    top: -1rem;
    left: -0.1rem;
    padding: 2rem 1.4rem 0 1.6rem;
}
.s3-title2 {
    font-size: 0.5rem;
    color: #ffffff;
    line-height: 0.6rem;
    width: 9.6rem;
}
.s3-title3 {
    color: #ffffff;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    line-height: 0.8rem;
    font-weight: bold;
}
.s3-box2 {
    background-image: url(../ossweb-img/rank_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 16.45rem;
    height: 15.49rem;
}
.lang-ar .s3-box2,
.lang-ur .s3-box2 {
    background-image: url(../ossweb-img/ar_rank_bg.png);
}
.s3-tab1 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.6rem;
}
.s3-tab1 a {
    display: block;
    background: url(../ossweb-img/tab2.png) center center / 100% no-repeat;
    width: 6.75rem;
    height: 1.07rem;
}
.s3-tab1 a.act {
    background: url(../ossweb-img/tab2_act.png) center center / 100% no-repeat;
}
.s3-tab1 a p {
    color: #4c866a;
    font-size: 0.4rem;
    line-height: 1.07rem;
    text-align: center;
}
.s3-tab1 a.act p {
    color: #20383f;
}
.s3-tab2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.4rem;
}
.s3-tab2 a {
    display: block;
    background: url(../ossweb-img/tab1.png) center center / 100% no-repeat;
    width: 6.75rem;
    height: 1.07rem;
}
.s3-tab2 a.act {
    background: url(../ossweb-img/tab1_act.png) center center / 100% no-repeat;
}
.s3-tab2 .tab p {
    color: #9e8f66;
    font-size: 0.4rem;
    line-height: 1.07rem;
    text-align: center;
}
.s3-tab2 .tab.act p {
    color: #20383f;
}
.s3-show {
    display: none;
}
.s3-show.act {
    display: block;
}
#s3 .rank-head {
    background: url(../ossweb-img/rank_head_bg.png) center center / 100% no-repeat;
    width: 13.54rem;
    height: 0.78rem;
    padding: 0 0.2rem;
    margin: 0 auto 0.1rem;
    display: flex;
}
#s3 .rank-head .td {
    font-size: 0.24rem;
    color: #c7c7c7;
    line-height: 0.34rem;
    flex-shrink: 0;
    height: 0.78rem;
    display: flex;
    align-items: center;
}
#s3 .rank-head .td:nth-child(1) {
    width: 30%;
}
#s3 .rank-head .td:nth-child(2) {
    width: 50%;
}
#s3 .rank-head .td:nth-child(3) {
    width: 20%;
    justify-content: center;
    text-align: center;
}
#s3 .rank-table {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 13.54rem;
    margin: 0 auto;
    height: 9rem;
    overflow: hidden;
}
#s3 .rank-table li {
    width: 13.54rem;
    height: 0.8rem;
    line-height: 0.8rem;
    display: flex;
    margin: 0.04rem 0;
}
/* 单数 */
#s3 .rank-table li:nth-child(2n + 1) {
    background: #293233;
}
#s3 .rank-table li.rank1 {
    background: url(../ossweb-img/rank1_bg.png) center center / 100% no-repeat;
}
#s3 .rank-table li .td {
    flex-shrink: 0;
}
#s3 .rank-table li .td:nth-child(1) {
    width: 30%;
    padding: 0 0.2rem;
}
#s3 .rank-table li .td:nth-child(2) {
    width: 50%;
}
#s3 .rank-table li .td:nth-child(3) {
    width: 20%;
    text-align: center;
    padding: 0 0.2rem;
}
#s3 .rank-table li .td:nth-child(1) {
    color: #b5b5b5;
    font-size: 0.24rem;
    line-height: 0.78rem;
}
#s3 .rank-table li.rank1 .td:nth-child(1) {
    background: url(../ossweb-img/rank1_icon.png) left center / 1.28rem 0.78rem no-repeat;
    color: #000000;
}
.lang-ar #s3 .rank-table li.rank1 .td:nth-child(1),
.lang-ur #s3 .rank-table li.rank1 .td:nth-child(1) {
    background: url(../ossweb-img/ar_rank1_icon.png) right center / 1.28rem 0.78rem no-repeat;
}
#s3 .rank-table li.rank2 .td:nth-child(1) {
    background: url(../ossweb-img/rank2_icon.png) left center / 1.28rem 0.78rem no-repeat;
    color: #000000;
}
.lang-ar #s3 .rank-table li.rank2 .td:nth-child(1),
.lang-ur #s3 .rank-table li.rank2 .td:nth-child(1) {
    background: url(../ossweb-img/ar_rank2_icon.png) right center / 1.28rem 0.78rem no-repeat;
}
#s3 .rank-table li.rank3 .td:nth-child(1) {
    background: url(../ossweb-img/rank3_icon.png) left center / 1.28rem 0.78rem no-repeat;
    color: #000000;
}
.lang-ar #s3 .rank-table li.rank3 .td:nth-child(1),
.lang-ur #s3 .rank-table li.rank3 .td:nth-child(1) {
    background: url(../ossweb-img/ar_rank3_icon.png) right center / 1.28rem 0.78rem no-repeat;
}
#s3 .rank-table li .td:nth-child(2) {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 0.26rem;
}
#s3 .rank-table li .td:nth-child(2) img {
    width: 0.51rem;
    height: 0.51rem;
    object-fit: contain;
    border-radius: 50%;
}
#s3 .member-name {
    margin: 0 0.2rem;
}
#s3 .rank-table li .td:nth-child(3) {
    color: #ffffff;
    font-size: 0.24rem;
}
.s3-rank-perv {
    display: block;
    background: url(../ossweb-img/rank_left.png) center center / 100% no-repeat;
    width: 0.46rem;
    height: 0.58rem;
    position: absolute;
    bottom: .5rem;
    left: 50%;
    margin-left: -1rem;
}
.s3-rank-next {
    display: block;
    background: url(../ossweb-img/rank_right.png) center center / 100% no-repeat;
    width: 0.46rem;
    height: 0.58rem;
    position: absolute;
    bottom: .5rem;
    right: 50%;
    margin-right: -1rem;
}
/* footer */
.footer {
    display: none;
    height: 1.68rem;
    text-align: center;
    background: #000;
}

.teams {
    font-size: .36rem;
    color: rgba(235, 235, 235, .3);
    line-height: 1.68rem;
}

.teams a {
    color: rgba(235, 235, 235, .3);
}

/* 滚动条调整 */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-thumb {
    border-radius: 0%;
    background-color: #767676;
}

::-webkit-scrollbar-track-piece {
    background-color: #767676;
    border: 1px solid #1b1f21;
}

.wrapper::-webkit-scrollbar {
    width: 0px;
}

#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr .ot-cat-header{
    margin: 0 .5em !important;
}
#ot-sdk-btn.ot-sdk-show-settings,
#ot-sdk-btn.optanon-show-settings {
  color: inherit !important;
  border: none !important;
  font: inherit !important;
  padding: 0 !important;
  line-height: inherit !important;
}
#ot-sdk-btn.ot-sdk-show-settings:hover,
#ot-sdk-btn.optanon-show-settings:hover {
  color: inherit !important;
  background: none !important;
}

@supports (-webkit-appearance: none) {
    #onetrust-banner-sdk #onetrust-button-group {
        display: flex !important;
        justify-content: center;
    }
}

@keyframes an_opacity1 {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes  scrollX {
    0% {
        transform: translate(0.2rem);
    }
    100% {
        transform: translate(0.1rem);
    }
}

@keyframes scrollX2 {
    0% {
        transform: rotate(180deg) translate(.2rem);
    }
    100% {
        transform: rotate(180deg) translate(.1rem);
    }
}

/* 移动端横屏 */
@media (orientation: landscape) and (max-height: 768px) {
    .language:hover ul {
        max-height: 0;
    }
    .language.max-height ul {
        max-height: 999px;
    }
    .select-track:hover ul {
        max-height: 0;
    }
    .select-track.max-height ul {
        max-height: 999px;
    }
    .select-track {
        transform: scale(1.2);
        right: 0.8rem;
    }
}