@font-face {
    font-family: swiper-icons;
    src: url(data:application/font-woff;charset=utf-8;base64,\ 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);
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    overflow: clip;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    -webkit-margin-start: var(--swiper-centered-offset-before);
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    -webkit-margin-before: var(--swiper-centered-offset-before);
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.main-role-switch {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
    margin: 0 auto
}

.main-role-switch .role-swiper {
    width: 100%
}

.main-role-switch .indicator {
    width: 28px;
    position: absolute;
    display: flex;
    top: 386px;
    z-index: 2;
    cursor: pointer
}

.main-role-switch .indicator img {
    width: 100%
}

.main-role-switch .indicator.pre {
    left: .84rem
}

.main-role-switch .indicator.next {
    right: .84rem
}

.main-role-switch .indicator.next img {
    transform: rotate(180deg)
}

.main-role-switch .role {
    position: relative;
    width: 100%;
    height: 100%
}

.main-role-switch .role img {
    width: 100%
}

.main-role-switch .role .role-bg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1
}

.btn-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 376px;
    margin: 30px auto 0
}

.btn-container.download {
    width: 389px;
    justify-content: space-between;
    margin-top: 24px
}

.btn-container .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 206px;
    height: 52px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 100px;
    cursor: pointer
}

.btn-container .btn.download {
    width: 170px;
    height: 43px;
    color: #fddc92;
    background-color: transparent;
    border: 1px solid #fddc92;
    font-size: 14px
}

.btn-container .btn.download img {
    width: 20px;
    margin-right: 16px
}

.c-social-media-qrcode {
    position: absolute;
    top: -236px;
    left: -64px;
    width: 176px;
    height: 225px;
    padding: 4px;
    background-color: #282a2e;
    border-radius: 12px;
    box-sizing: border-box
}

.c-social-media-qrcode .inner-content {
    width: 100%;
    height: 100%;
    padding: 8px;
    border: .5px solid rgba(255, 217, 128, .1);
    border-radius: 10px;
    box-sizing: border-box
}

.c-social-media-qrcode img {
    display: block;
    width: 152px;
    margin-bottom: 8px;
    border-radius: 8px;
    background-color: #33353b
}

.c-social-media-qrcode .content-title {
    margin-bottom: 8px;
    font-size: 14px;
    text-align: center;
    color: rgba(255, 255, 255, .9)
}

.c-social-media-qrcode .content-sub-title {
    font-size: 12px;
    text-align: center;
    color: rgba(255, 255, 255, .6)
}

.c-social-media {
    width: 389px;
    margin: 48px auto 0;
    position: relative;
    z-index: 101;
}

.c-social-media .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.c-social-media .header img {
    width: 120px
}

.c-social-media .header img.reverse {
    transform: rotateY(180deg)
}

.c-social-media .media-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 148px !important;
    font-size: 0;
    flex-direction: row;
}

.c-social-media .media-wrapper .media-icon {
    position: relative;
    width: 48px !important;
    cursor: pointer
}

.c-social-media .media-wrapper img {
    width: 100%
}

.full-screen.main {
    min-height: 100vh;
    min-height: 100dvh;
}

.full-screen.main .bg.cards-wrapper {
    display: flex;
    /* top: 246px */
}

.full-screen.main .bg.cards-wrapper img {
    position: relative;
    width: 152px
}

.full-screen.main .bg.cards-wrapper .bounce-down {
    animation: bounce-down 3s linear infinite
}

.full-screen.main .bg.cards-wrapper .bounce-up {
    animation: bounce-up 3s linear infinite
}

.full-screen.main .bg.cards-wrapper .card-1,
.full-screen.main .bg.cards-wrapper .card-9 {
    top: 100px
}

.full-screen.main .bg.cards-wrapper .card-3,
.full-screen.main .bg.cards-wrapper .card-7 {
    top: 140px
}

.full-screen.main .bg.cards-wrapper .card-4,
.full-screen.main .bg.cards-wrapper .card-6 {
    top: 80px
}

.full-screen.main .content-container {
    position: absolute;
    top: 45vh;
    width: 100%;
    z-index: 100
}

.hero-content-wrapper .content-container {
    position: static;
    top: auto;
    z-index: auto;
}

.full-screen.main .content-container .title {
    display: block;
    width: 417px;
    margin: 0 auto
}

.full-screen.main .content-container .description {
    width: 500px;
    margin: 16px auto 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    color: #acafb8
}

.full-screen.main .content-container .description.small {
    width: 376px
}

.full-screen.main .media-container {
    margin-top: 20px
}

.full-screen.main .media-container .description {
    margin-bottom: 20px
}

.full-screen.main .down-arrow {
    margin-top: 70px;
    text-align: center
}

.full-screen.main .down-arrow img {
    width: 36px
}

@keyframes bounce-down {
    25% {
        transform: translateY(-10px)
    }

    50%,
    to {
        transform: translateY(0)
    }

    75% {
        transform: translateY(10px)
    }
}

@keyframes bounce-up {
    25% {
        transform: translateY(10px)
    }

    50%,
    to {
        transform: translateY(0)
    }

    75% {
        transform: translateY(-10px)
    }
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
    display: none !important
}

.swiper-button-prev svg,
.swiper-button-next svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    transform-origin: center
}

.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
    transform: rotate(180deg)
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: "next"
}

.card-switcher {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-bottom: .7rem
}

.card-switcher .bg {
    top: 0
}

.card-switcher .portrait {
    position: relative;
    width: 100%;
    z-index: 0
}

.card-switcher .settings {
    position: absolute;
    top: 3.2rem;
    left: .4rem;
    font-size: .12rem;
    z-index: 3
}

.card-switcher .indicator {
    width: 28px;
    position: absolute;
    display: flex;
    top: 50%;
    z-index: 2;
    cursor: pointer
}

.card-switcher .indicator img {
    width: 100%
}

.card-switcher .indicator.pre {
    left: 100px
}

.card-switcher .indicator.next {
    right: 100px
}

.card-switcher .indicator.next img {
    transform: rotate(180deg)
}

.card-swiper-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    z-index: 3
}

.card-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.card-wrapper img {
    width: 100%
}

.card-wrapper .set {
    position: absolute;
    width: 179px
}

.card-wrapper .set.role-1-set-1 {
    top: 148px;
    left: 30%
}

.card-wrapper .set.role-1-set-2 {
    top: 148px;
    left: 54%
}

.card-wrapper .set.role-2-set-1 {
    top: 148px;
    left: 30%
}

.card-wrapper .set.role-2-set-2 {
    top: 209px;
    left: 56%
}

.card-wrapper .set.role-3-set-1 {
    top: 175px;
    left: 27%
}

.card-wrapper .set.role-3-set-2 {
    top: 148px;
    left: 56%
}

.card-wrapper .set.role-3-set-3 {
    top: 192px;
    left: 56%
}

.card-wrapper .set.role-4-set-1 {
    top: 209px;
    left: 31%
}

.card-wrapper .set.role-4-set-2 {
    top: 209px;
    left: 55%
}

.card-wrapper .set.role-5-set-1 {
    top: 160px;
    left: 32%
}

.card-wrapper .set.role-5-set-2 {
    top: 204px;
    left: 32%
}

.card-wrapper .set.role-5-set-3 {
    top: 187px;
    left: 53%
}

.full-screen.ai {
    height: 850px;
    color: rgba(255, 255, 255, .8)
}

.full-screen.ai .title {
    position: absolute;
    left: 50%;
    bottom: 150px;
    width: 622px;
    margin-left: -311px;
    z-index: 3
}

.full-screen.ai .description {
    position: absolute;
    left: 50%;
    bottom: 60px;
    width: 1008px;
    margin-left: -496px;
    text-align: center;
    font-size: 20px;
    box-sizing: border-box;
    z-index: 3;
    color: #acafb8;
    line-height: 30px
}

.full-screen.ai .layer-2 {
    top: auto;
    bottom: 0
}

.full-screen.chat {
    height: 765px;
    font-size: 20px;
    line-height: 28px;
    color: #acafb8
}

.full-screen.chat .title {
    position: absolute;
    width: 40%;
    left: 100px;
    top: 260px;
    z-index: 8
}

.full-screen.chat .description {
    position: absolute;
    width: 40%;
    left: 100px;
    top: 380px;
    z-index: 8
}

.full-screen.chat .pop {
    position: absolute;
    z-index: 8
}

.full-screen.chat .pop-1 {
    top: 120px;
    right: 116px;
    width: 197px
}

.full-screen.chat .pop-2 {
    top: 288px;
    right: 21%;
    width: 82px
}

.full-screen.chat .pop-3 {
    top: 370px;
    right: 14%;
    width: 129px
}

.full-screen.chat .pop-4 {
    top: 540px;
    right: 16%;
    width: 54px
}

.full-screen.chat .pop-5 {
    top: 520px;
    right: 21%;
    width: 131px
}

.full-screen.chat .float {
    animation: float 7s ease-in-out infinite;
    -webkit-animation: float 7s ease-in-out infinite
}

.full-screen.chat .float-2 {
    animation: float-2 7s ease-in-out infinite;
    -webkit-animation: float-2 7s ease-in-out infinite
}

.full-screen.chat .float-3 {
    animation: float-3 7s ease-in-out infinite;
    -webkit-animation: float-3 7s ease-in-out infinite
}

@keyframes float {
    20% {
        transform: translate(-4px)
    }

    40% {
        transform: translate(0)
    }

    60% {
        transform: translate(4px)
    }

    80% {
        transform: translateY(4px)
    }

    to {
        transform: translate(0)
    }
}

@keyframes float-2 {
    20% {
        transform: translate(-4px)
    }

    40% {
        transform: translate(0)
    }

    60% {
        transform: translate(-4px)
    }

    80% {
        transform: translateY(-4px)
    }

    to {
        transform: translate(0)
    }
}

@keyframes float-3 {
    20% {
        transform: translateY(4px)
    }

    40% {
        transform: translateY(0)
    }

    60% {
        transform: translateY(-4px)
    }

    80% {
        transform: translate(-4px)
    }

    to {
        transform: translate(0)
    }
}

.full-screen.chat .chat-item {
    position: absolute;
    z-index: 4
}

.full-screen.chat .chat-item.item-1 {
    width: 4.66rem;
    bottom: 5.8rem;
    right: .6rem;
    padding: 0
}

.full-screen.chat .chat-item.item-2 {
    width: 4.66rem;
    bottom: 3.8rem;
    left: .4rem
}

.full-screen.chat .chat-item.item-3 {
    width: 4.3rem;
    bottom: 7.8rem;
    left: 50%;
    margin-left: -2.15rem
}

.full-screen.card {
    padding-bottom: 30px;
    font-size: 16px;
    line-height: 28px;
    color: rgba(255, 255, 255, .8)
}

.full-screen.card .footer {
    display: flex;
    justify-content: space-between;
    padding: 0 60px;
    font-size: 14px;
    text-align: right;
    box-sizing: border-box
}

.full-screen.card .footer .copyright {
    font-weight: 900
}

.full-screen.card .footer a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: rgba(255, 255, 255, .8)
}

.full-screen.card .footer .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 4px;
    text-align: left
}

.c-header {
    position: fixed;
    top: 0;
    height: 80px;
    max-width: 1440px;
    min-width: 1280px;
    width: 100%;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .696) 82.81%);
    z-index: 100
}

.c-header .logo {
    width: 116px
}

.c-header .ugc-btn {
    width: 184px;
    height: 44px;
    border-radius: 100px;
    border: .5px solid rgba(255, 217, 128, .15);
    background: rgba(255, 217, 128, .13);
    color: #ffd980;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.c-header .ugc-btn .ugc-icon {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    transform: translateY(-1px)
}

.c-header .ugc-btn .arrow {
    width: 12px;
    height: 12px;
    margin-left: 8px;
    transition: transform .2s ease-in-out
}

.c-header .ugc-btn:hover {
    border: .5px solid rgba(255, 217, 128, .6);
    background: rgba(255, 217, 128, .13);
    box-shadow: 4px 4px 20px rgba(255, 217, 128, .2)
}

.c-header .ugc-btn:hover .arrow {
    transform: translate(4px);
    transition: transform .2s ease-in-out
}

.c-header .icon {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1e1e1e;
    cursor: pointer
}

.c-header .icon.user {
    margin-right: .5rem
}

.c-header .icon.back {
    margin-left: .5rem
}

.c-header .icon.hidden {
    visibility: hidden
}

.c-header .icon img {
    width: 100%
}

.el-dialog.logout-pop {
    width: 554px;
    height: 319px;
    color: #fff;
    background: #292a2e;
    border-radius: 24px;
    text-align: center
}

.el-dialog.logout-pop .logo {
    width: 161px;
    margin-bottom: 28px
}

.el-dialog.logout-pop .title {
    font-size: 33px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 14px;
    text-align: center
}

.el-dialog.logout-pop .description {
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 30px;
    text-align: center
}

.el-dialog.logout-pop .action {
    width: 438px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto
}

.el-dialog.logout-pop .action .btn {
    width: 198px;
    height: 54px;
    border-radius: 26px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fddc8b;
    cursor: pointer
}

.el-dialog.logout-pop .action .btn.cancel {
    background-color: #fddc8b;
    color: #5d3b20
}

.el-dialog.logout-pop .action .btn.confirm {
    background-color: transparent;
    color: #fddc8b
}

@media screen and (min-width: 1440px) {
    .c-header {
        left: 50%;
        margin-left: -720px
    }
}

.p-home {
    padding-top: 80px;
    background: #000
}

.body-wrapper {
    position: relative;
    width: 100%;
    max-width: 1440px;
    min-width: 1280px;
    min-height: 80vh;
    margin: 0 auto;
    overflow-y: scroll
}

.full-screen {
    position: relative;
    width: 100%;
    background-color: #000;
    overflow: hidden
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.bg.layer-1 {
    z-index: 0
}

.bg.layer-2 {
    z-index: 1
}

.bg.layer-3 {
    z-index: 2
}

.bg.layer-4 {
    z-index: 3
}

.bg.layer-5 {
    z-index: 4
}

.bg.layer-6 {
    z-index: 5
}

.bg.bottom {
    top: auto;
    bottom: 0
}

::-webkit-scrollbar {
    display: none
}