@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";
}

.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;
}

body {
    overflow-x: hidden;
}

.wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: url(../ossweb-img/bg1.jpg) center top / 100% no-repeat;
}
.wrapper[data-id="1"],
.wrapper[data-id="2"] {
    background: #f1f1f1 url(../ossweb-img/bg2.jpg) center top / 100% no-repeat;
}
/* ::-webkit-scrollbar {
    width: 0px;
} */

.top-content {
    height: 13.4rem;
}
.wrapper[data-id="1"] .top-content,
.wrapper[data-id="2"] .top-content {
    height: 12.3rem;
}
.top-nav {
    background: #000;
    width: 100%;
    height: 0.78rem;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    position: fixed;
    top: 0;
    z-index: 999;
}
.lang-ar .top-nav {
    direction: ltr;
}

.logo1 {
    display: block;
    background: url(../ossweb-img/logo1.png) center center / 100% no-repeat;
    width: 1.76rem;
    height: 0.38rem;
    margin-right: auto;
}
.line {
    display: block;
    background: #fff;
    height: 0.3rem;
    width: 0.01rem;
    margin: 0 0.16rem;
}
.logo2 {
    display: block;
    background: url(../ossweb-img/logo2.png) center center / 100% no-repeat;
    width: 1.01rem;
    height: 0.31rem;
    margin-right: auto;
}

.language {
    width: 1.38rem;
    height: 0.39rem;
    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: relative;
}

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

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

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

.language p {
    width: 1.38rem;
    height: 0.39rem;
    line-height: 0.37rem;
    font-size: .12rem;
    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: .39rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s;
}

.language:hover ul {
    max-height: 9.99rem;
}

.language li {
    width: 1.38rem;
    height: 0.39rem;
    line-height: .39rem;
    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: .12rem;
    font-family: "NotoSans-Medium";
}

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

.slogan {
    background: url(../ossweb-img/slogan/en.png) center center / 100% no-repeat;
    width: 15rem;
    height: 2.2rem;
    margin: 0 auto;
    position: relative;
    top: 6rem;
}
.lang-en .slogan {
    background: url(../ossweb-img/slogan/en.png) center center / 100% no-repeat;
}
.lang-de .slogan {
    background: url(../ossweb-img/slogan/de.png) center center / 100% no-repeat;
}
.lang-zh-cn .slogan {
    background: url(../ossweb-img/slogan/zh.png) center center / 100% no-repeat;
}
.lang-fr .slogan {
    background: url(../ossweb-img/slogan/fr.png) center center / 100% no-repeat;
}
.lang-es .slogan {
    background: url(../ossweb-img/slogan/es.png) center center / 100% no-repeat;
}
.lang-ru .slogan {
    background: url(../ossweb-img/slogan/ru.png) center center / 100% no-repeat;
}
.lang-ar .slogan {
    background: url(../ossweb-img/slogan/ar.png) center center / 100% no-repeat;
}
.lang-zh-tw .slogan {
    background: url(../ossweb-img/slogan/tw.png) center center / 100% no-repeat;
}
.lang-pt .slogan {
    background: url(../ossweb-img/slogan/pt.png) center center / 100% no-repeat;
}
.lang-ko .slogan {
    background: url(../ossweb-img/slogan/ko.png) center center / 100% no-repeat;
}
.lang-ja .slogan {
    background: url(../ossweb-img/slogan/ja.png) center center / 100% no-repeat;
}
.lang-tr .slogan {
    background: url(../ossweb-img/slogan/tr.png) center center / 100% no-repeat;
}
.next-icon {
    display: block;
    margin: 0 1rem 0 auto;
    /* background: url(../ossweb-img/next_icon.png) center center / 100% no-repeat; */
    /* animation: an_next 2s infinite linear; */
    /* width: 0.85rem;
    height: 0.63rem; */
    width: 1.21rem;
    height: auto;
    position: relative;
    top: 4.2rem;
}
.next-icon i {
    display: block;
    background: url(../ossweb-img/next_icon.png) center center / 100% no-repeat;
    width: 1.21rem;
    height: 0.86rem;
    position: absolute;
    left: 50%;
    top: 100%;
    animation: an_opacity1 1.8s linear infinite;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.next-icon i:nth-child(1) {
    margin-top: 0.25rem;
    width: 0.73rem;
    height: 0.57rem;
}
  
.next-icon i:nth-child(2) {
    margin-top: 0.5rem;
    animation-delay: 0.6s;
    width: 0.97rem;
    height: 0.72rem;
}
  
.next-icon i:nth-child(3) {
    margin-top: 0.8rem;
    animation-delay: 1.2s;
}
@keyframes an_opacity1 {
    0% {opacity: 0; filter: brightness(50%);}
    70% {opacity: 0.8; filter: brightness(80%);}
    80% {opacity: 1; filter: brightness(100%);}
    90% {opacity: 0.8; filter: brightness(80%);}
    100% {opacity: 0; filter: brightness(50%);}
}
/* @keyframes an_next {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0.1rem);
    }
    100% {
        transform: translateY(0);
    }
} */
.btn-join {
    display: block;
    background: url(../ossweb-img/btn_join.png) center center / 100% no-repeat;
    width: 5.61rem;
    height: 0.94rem;
    margin: 0 auto;
    position: relative;
    top: 5.8rem;
}
.btn-join p {
    color: #000000;
    font-size: 0.4rem;
    line-height: 0.94rem;
    text-align: center;
}
.discord-icon {
    display: block;
    background: url(../ossweb-img/discord_icon.png) center center / 100% no-repeat;
    width: 0.88rem;
    height: 0.88rem;
    position: absolute;
    right: 6rem;
    top: 8rem;
    animation: an_breathe 2s infinite linear;
}

@keyframes an_breathe {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}
.top-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 8.5rem;
}
.wrapper[data-id="1"] .top-tab,
.wrapper[data-id="2"] .top-tab {
    top: 8.1rem;
}
.top-tab .tab {
    display: block;
    background: url(../ossweb-img/tab1.png) center center / 100% no-repeat;
    width: 3.78rem;
    height: 0.72rem;
    margin: 0 0.4rem;
}
.top-tab .tab.act {
    background: url(../ossweb-img/tab1_act.png) center center / 100% no-repeat;
}

.top-tab .tab p {
    text-align: center;
    line-height: 0.72rem;
    font-size: 0.38rem;
    color: #79edbe;
    padding: 0 0.1rem;
}
.lang-fr .top-tab .tab p,
.lang-ru .top-tab .tab p,
.lang-ar .top-tab .tab p,
.lang-pt .top-tab .tab p {
    font-size: 0.3rem;
}
.lang-es .top-tab .tab p {
    font-size: 0.34rem;
}
.top-tab .tab.act p {
    color: #000000;
}

/* theme tab */
.theme-tab {
    display: none;
    justify-content: center;
    align-items: center;
}
.theme-tab.act {
    display: flex;
}
.theme-tab .tab {
    width: 3.78rem;
    margin: 0 0.4rem;
    position: relative;
}
.theme-tab .tab p {
    text-align: center;
    font-size: 0.25rem;
    line-height: 0.35rem;
    color: #6c62a4;
}
.theme-tab .tab.act p {
    color: #d9df01;
}
.theme-tab .tab.act::after {
    content: "";
    display: block;
    background: url(../ossweb-img/tab2_act.png) center center / 100% no-repeat;
    width: 2.81rem;
    height: 0.11rem;
    position: absolute;
    bottom: -0.1rem;
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.part-show {
    display: none;
}
.part-show.act {
    display: block;
}

/* s1 */
#s1 {
    height: 4.4rem;
}
.time-box {
    width: 14.72rem;
    margin: 0 auto;
    position: relative;
    top: 1.3rem;
}
.time-bg {
    display: block;
    background: url(../ossweb-img/time_bg.png) center center / 100% no-repeat;
    width: 14.72rem;
    height: 0.74rem;
}

.time-box li p {
    font-size: 0.32rem;
    line-height: 0.42rem;
}
.time-box li {
    width: 4.3rem;
    text-align: center;
    color: #8e8d8d;
}
.time-box li[data-id="0"] {
    position: absolute;
    top: -1rem;
    left: 1.6rem;
}
.time-box li[data-id="1"] {
    position: absolute;
    top: 0.8rem;
    left: 4.6rem;
}
.time-box li[data-id="2"] {
    position: absolute;
    top: -1rem;
    left: 7.6rem;
}
.time-box li[data-id="3"] {
    position: absolute;
    top: 0.8rem;
    left: 10.6rem;
}
.time-box.act-1 li[data-id="0"],
.time-box.act-2 li[data-id="0"],
.time-box.act-3 li[data-id="0"],
.time-box.act-4 li[data-id="0"] {
    background: url(../ossweb-img/time_act.png) center center / 1.88rem 1.25rem no-repeat;
    color: #151515;
}
.time-box.act-2 li[data-id="1"],
.time-box.act-3 li[data-id="1"],
.time-box.act-4 li[data-id="1"] {
    background: url(../ossweb-img/time_act.png) center center / 1.88rem 1.25rem no-repeat;
    color: #151515;
}
.time-box.act-3 li[data-id="2"],
.time-box.act-4 li[data-id="2"] {
    background: url(../ossweb-img/time_act.png) center center / 1.88rem 1.25rem no-repeat;
    color: #151515;
}
.time-box.act-4 li[data-id="3"] {
    background: url(../ossweb-img/time_act.png) center center / 1.88rem 1.25rem no-repeat;
    color: #151515;
}

/* title */
.s-title {
    position: relative;
}
.s-title p {
    position: relative;
    font-size: 0.48rem;
    top: 0.8rem;
    left: 0.6rem;
    text-align: left;
}

/* s2 */
#s2 {
    height: 10.8rem;
    padding: 1.4rem 2rem;
    position: relative;
}
.s2-title {
    height: 1.67rem;
}
.s2-title::before {
    content: "";
    display: block;
    background: url(../ossweb-img/title1.png) center center / 100% no-repeat;
    width: 7.14rem;
    height: 1.67rem;
    position: absolute;
    top: 0;
    left: 0;
}

.s2-tip {
    margin-top: 0.4rem;
    color: #000000;
    font-size: 0.86rem;
    position: relative;
    transform-style: preserve-3d;
}
.s2-tip::after {
    content: "";
    display: block;
    position: absolute;
    background: url(../ossweb-img/s2_tip_bg.png) center center / 100% no-repeat;
    width: 8.61rem;
    height: 0.69rem;
    left: -1.2rem;
    bottom: 0;
    transform: translate3d(0, 0, -0.1rem);
    -o-transform: translate3d(0, 0, -0.1rem);
    -ms-transform: translate3d(0, 0, -0.1rem);
    -moz-transform: translate3d(0, 0, -0.1rem);
    -webkit-transform: translate3d(0, 0, -0.1rem);
}
.s2-text-box {
    background: url(../ossweb-img/s2_text_bg.png) center center / 100% no-repeat;
    margin-top: 0.1rem;
    width: 8.71rem;
    height: 4.9rem;
    padding: 0.4rem 0.8rem;
    color: #000000;
    font-size: 0.24rem;
    line-height: 0.34rem;
    position: relative;
    left: -0.1rem;
    overflow: hidden;
}
.lang-ar .s2-text-box {
    left: unset;
    right: 6.6rem;
}
.s2-text {
    height: 4.1rem;
    overflow-x: hidden;
    overflow-y: auto;
}
.s2-text span {
    display: block;
}

.s2-btn1 {
    display: block;
    background: url(../ossweb-img/s2_btn.png) center center / 100% no-repeat;
    width: 5rem;
    height: 1.28rem;
    position: absolute;
    bottom: 1.6rem;
    left: 2rem;
}
.s2-btn1 p {
    line-height: 1rem;
    text-align: center;
    color: #000000;
    font-size: 0.38rem;
}

/* s3 */
#s3 {
    height: 11rem;
    position: relative;
}
.s3-title {
    top: 0.5rem;
    left: 2rem;
    height: 1.67rem;
}
.s3-title::before {
    content: "";
    display: block;
    background: url(../ossweb-img/title2.png) center center / 100% no-repeat;
    width: 7.14rem;
    height: 1.67rem;
    position: absolute;
    top: 0;
    left: 0;
}
.s3-title p {
    color: #ffffff;
}
.s3-tip {
    background: url(../ossweb-img/s3_tip_bg.png) center center / 100% no-repeat;
    width: 15.7rem;
    height: 1.58rem;
    margin: 0 auto;
    position: relative;
    top: 0.5rem;
    padding: 0.1rem 0.6rem;
    overflow: hidden;
}
.s3-text {
    font-size: 0.22rem;
    line-height: 0.32rem;
    color: #bfbfbf;
    overflow-x: hidden;
    overflow-y: auto;
    height: 1.38rem;
}
.s3-text span {
    display: block;
}
.s3-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0.7rem;
}
.s3-list li {
    display: flex;
    flex-flow: column;
    align-items: center;
}
.s3-list li .s3-theme {
    background: url(../ossweb-img/s3_img_bg.png) center center / 100% no-repeat;
    width: 5.19rem;
    height: 2.53rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.s3-list li .s3-theme img {
    width: 4.59rem;
    height: 2.34rem;
}

.s3-theme-name {
    background: url(../ossweb-img/s3_text_bg.png) center center / 100% no-repeat;
    width: 4.2rem;
    height: 0.77rem;
    text-align: center;
    font-size: 0.21rem;
    line-height: 0.31rem;
    color: #ffffff;
    padding: 0.1rem 0.4rem 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9;
}
.s3-theme-desc {
    background: url(../ossweb-img/s3_desc_bg.png) center center / 100% no-repeat;
    width: 5.01rem;
    height: 2.74rem;
    padding: 0.4rem 0.4rem 0.1rem;
    position: relative;
    top: -0.4rem;
    overflow: hidden;
}
.s3-theme-desc p {
    height: 2.04rem;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 0.18rem;
    color: #3d3d3d;
    line-height: 0.28rem;
}
.s3-theme-desc p span {
    display: block;
}
.btn-download {
    display: block;
    background: url(../ossweb-img/btn_download.png) center center / 100% 100% no-repeat;
    min-width: 2.97rem;
    width: max-content;
    padding: 0 0.1rem;
    height: 0.57rem;
    margin: 0.14rem auto 0;
}
.btn-download p {
    color: #2e1600;
    font-size: 0.3rem;
    line-height: 0.57rem;
    text-align: center;
}
.lang-fr .btn-download p,
.lang-ru .btn-download p,
.lang-de .btn-download p,
.lang-pt .btn-download p,
.lang-ja .btn-download p {
    font-size: 0.2rem;
}
.lang-es .btn-download p,
.lang-tr .btn-download p {
    font-size: 0.26rem;
}

/* s4 */
#s4 {
    height: 10.6rem;
}

.s4-title {
    top: 1rem;
    left: 2rem;
    height: 1.67rem;
}
.s4-title::before {
    content: "";
    display: block;
    background: url(../ossweb-img/title3.png) center center / 100% no-repeat;
    width: 7.14rem;
    height: 1.67rem;
    position: absolute;
    top: 0;
    left: 0;
}
.s4-tab-group {
    position: relative;
    left: 2rem;
    top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}
.lang-ar .s4-tab-group {
    justify-content: flex-end;
}
.s4-tab {
    display: block;
    background: url(../ossweb-img/s4_tab.png) center center / 100% no-repeat;
    width: 4.86rem;
    height: 0.51rem;
    margin: 0.1rem;
}
.s4-tab.act {
    background: url(../ossweb-img/s4_tab_act.png) center center / 100% no-repeat;
}
.s4-tab p {
    font-size: 0.18rem;
    color: #79edbe;
    line-height: 0.25rem;
    text-align: center;
    height: 0.51rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lang-zh-cn .s4-tab p,
.lang-zh-tw .s4-tab p {
    font-size: 0.27rem;
}
.lang-ru .s4-tab p,
.lang-pt .s4-tab p {
    font-size: 0.16rem;
}
.lang-es .s4-tab p {
    font-size: 0.17rem;
}
.s4-tab.act p {
    color: #2e1600;
}
.s4-list {
    flex-wrap: wrap;
    width: 15.2rem;
    position: relative;
    left: 2rem;
    top: 1rem;
    display: none;
    justify-content: center;
}
.lang-ar .s4-list {
    left: unset;
    right: 1.78rem;
}
.s4-list.act {
    display: flex;
}
.s4-list li {
    background: url(../ossweb-img/s4_item_bg.png) center center / 100% no-repeat;
    width: 3.62rem;
    height: 3.14rem;
    margin: 0.2rem 0.08rem;
    opacity: 0;
}
.s4-list li:nth-child(1) {
    animation: an_enter_bottom 0.8s ease-in-out forwards;
}
.s4-list li:nth-child(2) {
    animation: an_enter_bottom 0.8s ease-in-out 0.2s forwards;
}
.s4-list li:nth-child(3) {
    animation: an_enter_bottom 0.8s ease-in-out 0.4s forwards;
}
.s4-list li:nth-child(4) {
    animation: an_enter_bottom 0.8s ease-in-out 0.6s forwards;
}
.s4-list li .s4-prize-name {
    padding: 0 0.1rem;
    font-size: 0.16rem;
    color: #0b2f01;
    line-height: 0.2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.5rem;
}
.lang-zh-cn .s4-list li .s4-prize-name,
.lang-zh-tw .s4-list li .s4-prize-name {
    font-size: 0.22rem;
}
.s4-prize-img {
    width: 3rem;
    height: 2.28rem;
    display: block;
    margin: 0.2rem auto 0.2rem;
    object-fit: contain;
}
.s4-prize-desc {
    width: 3.6rem;
    text-align: center;
    margin-top: 0.1rem;
    color: #0b2f01;
    font-size: 0.24rem;
    line-height: 0.34rem;
    margin: 0 auto;
}
/* s5 */
#s5 {
    height: 12rem;
}
.s5-title {
    top: 0.5rem;
    left: 2rem;
    height: 1.67rem;
}
.s5-title::before {
    content: "";
    display: block;
    background: url(../ossweb-img/title4.png) center center / 100% no-repeat;
    width: 7.14rem;
    height: 1.67rem;
    position: absolute;
    top: 0;
    left: 0;
}
.s5-title p {
    color: #ffffff;
}

.s5-content {
    margin: 0 auto;
    width: 14rem;
    height: 6.6rem;
    position: relative;
    top: 0.6rem;
    overflow: hidden;
    padding: 0.8rem 0.4rem;
    margin-top: 0.2rem;
}
.s5-text {
    width: 100%;
    height: 100%;
    font-size: 0.24rem;
    line-height: 0.34rem;
    color: #000000;
    overflow-y: auto;
}
.s5-text span {
    display: block;
}

.event-rule {
    text-align: center;
    color: #f1f1f1;
    /* text-shadow: #f1f1f1 1px 1px 0; */
    font-size: 0.2rem;
    position: relative;
    top: 1.5rem;
    margin: 0 auto;
    text-decoration-line: underline;
}

/* s6 */
.s6-title {
    height: 1.67rem;
    text-align: center;
}
.s6-title::after {
    content: "";
    display: block;
    background: url(../ossweb-img/s_title.png) center center / 100% no-repeat;
    width: 10.66rem;
    height: 0.41rem;
    position: relative;
    bottom: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.s6-title p {
    left: 0;
    text-align: center;
}
.s6-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.8rem;
    /* min-height: 47rem; */
}
.theme-show,
.award-theme-show {
    display: none;
}
.theme-show.act,
.award-theme-show.act {
    display: block;
}
.s6-item {
    background: url(../ossweb-img/work_bg.png) center center / 100% no-repeat;
    width: 7.92rem;
    height: 4.56rem;
    margin: 0.1rem 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.s6-item img,
.s6-item video {
    width: 7.26rem;
    height: 4.22rem;
    object-fit: contain;
    position: relative;
    top: -0.06rem;
}
.open-img {
    position: absolute;
    display: block;
    background: url(../ossweb-img/show_work.png) center center / 100% no-repeat;
    width: 0.98rem;
    height: 0.85rem;
    top: 50%;
    left: 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%);
}

/* footer */
.footer {
    height: 1rem;
    text-align: center;
    display: flex;
    align-items: flex-end;
    position: relative;
}
.wrapper[data-id="1"] .footer,
.wrapper[data-id="2"] .footer {
    transform-style: preserve-3d;
    height: 8.5rem;
}

.wrapper[data-id="1"] .footer::before,
.wrapper[data-id="2"] .footer::before {
    content: "";
    display: block;
    background: url(../ossweb-img/footer.jpg) center center / 100% no-repeat;
    width: 100%;
    height: 7.52rem;
    position: absolute;
    top: 0.2rem;
    left: 0;
    transform: translate3d(0, 0, -0.1rem);
}

.teams {
    width: 100%;
    font-size: 0.18rem;
    color: rgba(235, 235, 235, .3);
    line-height: 1rem;
    background: #000;
}

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

/* dialog */
.dialog {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.8);
    display: none;
}
.pop1 {
    position: absolute;
    top: 50%;
    left: 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%);
}
.dialog2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.8);
    display: none;
}
.pop2 {
    position: absolute;
    top: 50%;
    left: 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%);
}
.big-img {
    min-height: 6rem;
    max-height: 9rem;
}
#pop_video {
 height: 7rem;
}
.btn-close {
    position: absolute;
    background: url(../ossweb-img/btn_close.png) center center / 100% no-repeat;
    width: 0.39rem;
    height: 0.39rem;
    top: 0.04rem;
    right: -0.44rem;
}

@keyframes an_enter_bottom {
    0% {
        opacity: 0;
        transform: translateY(50px);
        -o-transform: translateY(50px);
        -ms-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -webkit-transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

/* 滚动条样式 */
.wrapper ::-webkit-scrollbar {
    width: 0.06rem;
    height: 0.06rem;
    background-color: rgba(0, 0, 0, 0.1);
}
.wrapper ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
}
.wrapper ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1);
}

#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;
}
#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr .ot-cat-header{
    margin: 0 .5em !important;
}
@supports (-webkit-appearance: none) {
    #onetrust-banner-sdk #onetrust-button-group {
        display: flex !important;
        justify-content: center;
    }
}