@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[data-v-8dbfa197] {
	position: relative;
	width: 706px;
	height: 100%;
	z-index: 3;
	margin: 0 auto
}

.main-role-switch .role-swiper[data-v-8dbfa197] {
	width: 100%
}

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

.main-role-switch .indicator img[data-v-8dbfa197] {
	width: 100%
}

.main-role-switch .indicator.pre[data-v-8dbfa197] {
	left: .84rem
}

.main-role-switch .indicator.next[data-v-8dbfa197] {
	right: .84rem
}

.main-role-switch .indicator.next img[data-v-8dbfa197] {
	transform: rotate(180deg)
}

.main-role-switch .role[data-v-8dbfa197] {
	position: relative;
	width: 100%;
	height: 100%
}

.main-role-switch .role img[data-v-8dbfa197] {
	width: 100%
}

.main-role-switch .role .role-bg[data-v-8dbfa197] {
	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
}

.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%;
	font-size: 0
}

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

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

.full-screen.main {
	height: 900px
}

.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: 500px;
	width: 100%;
	z-index: 7
}

.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 {
	min-height: 100vh;
	background: #000
}

.body-wrapper {
	position: relative;
	width: 100%;
	max-width: 1440px;
	min-width: 1280px;
	height: 100vh;
	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
}

.faq{
    padding: 0 100px;
    box-sizing: border-box;
    margin-bottom: 50px;
}

.faq h2{
    font-size: 54px;
    background: linear-gradient(to bottom, #D7B46A 0%, #8C6A2A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bolder;
}

.faq .faq-list{
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.faq .faq-list .faq-wrap{
    background: rgba(255, 217, 128, .13);
    border-radius: 12px;
    border: 1px solid rgba(255, 217, 128, .15);
}

.faq .faq-list .faq-wrap .faq-question{
    padding: 16px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.faq .faq-list .faq-wrap .faq-question p{
    font-size: 20px;
    font-weight: bold;
    color: #ffd980;
}

.faq .faq-list .faq-wrap .faq-question i{
    width: 10px;
    height: 10px;
    border: 2px solid #ffd980;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform .3s ease;
}

.faq .faq-list .faq-wrap .faq-answer{
    padding: 0 12px 0;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.5;
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease, padding .3s ease;
}

.faq .faq-list .faq-wrap.active .faq-answer{
    padding: 12px 12px 16px;
    max-height: 800px;
    border-top: 1px solid #ffd980;
}

.faq .faq-list .faq-wrap.active .faq-question i {
    transform: rotate(225deg); /* arrow flips down */
}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
  .p-home{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .c-header{
    max-width: 1200px;
    min-width: 1000px;
  }
  .body-wrapper{
    max-width: 1200px;
    min-width: 1000px;
  }
  .full-screen.main .bg.cards-wrapper img{
    width: 11.11%;
  }
  .full-screen.ai{
    height: 750px;
  }
}

@media screen and (min-width: 751px) and (max-width: 1199px) {
  .p-home{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .c-header{
    max-width: 750px;
    min-width: 320px;
  }
  .body-wrapper{
    max-width: 750px;
    min-width: 320px;
  }
  .full-screen.main .bg.cards-wrapper img{
    width: 11.11%;
  }
  .full-screen.ai{
    height: 520px;
  }
  .full-screen.chat .pop-1{
    width: 100px;
  }

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

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

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

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

.full-screen.chat{
    height: 560px;
}

}

@media (max-width: 750px) {
    body, html{
        font-size: 56.6667px;
    }
    .c-header .ugc-btn{display: none;}
    .c-header{
        position: fixed;
        top: 0;
        width: 100%;
        height: 1.2rem;
        max-width: 750px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        min-width: unset;
        padding-top: .16rem;
        padding-left: .32rem;
        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: 1.34rem;
    }
    .body-wrapper{
        max-width: 100%;
        min-width: 100%;
        top: 1.16rem;
    }
    .full-screen.main {
        min-height: 15.8rem;
        height: 100%;
    }
    .full-screen.main::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../images/home-bg-1-43c44c4e.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .full-screen.main::after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 48%;
        background-image: url(../images/home-bg-5-7ff55692.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .full-screen.main .bg.cards-wrapper{
        display: none;
    }
    .bg.layer-2{
        display: none;
    }
    .main-role-switch[data-v-8dbfa197]{
        width: 100%;
    }
    .full-screen.main .content-container .title{
        width: 5.56rem;
    }
    .main-role-switch .indicator img{
        display: none;
    }
    .main-role-switch .role img[data-v-8dbfa197]{
        width: 100%;
        transform: scale(1.5);
        transform-origin: center;
        position: relative;
        top: 1.5rem;
    }
    .full-screen.main .content-container .description{
        width: 100%;
        font-size: 0.28rem;
    }
    .btn-container.download{
        width: 100%;
        justify-content: center;
        column-gap: 10px;
    }
    .c-social-media{
        width: 7rem;
    }
    .c-social-media .media-wrapper img{
        width: .72rem;
    }
    .c-social-media .media-wrapper{
        justify-content: center;
        column-gap: 1rem;
    }
    .card-wrapper img{
        transform: scale(1.5);
        transform-origin: center;
        position: relative;
        top: 1.5rem;
    }
    .full-screen.ai{
        height: 10rem;
    }

    .card-switcher .indicator.pre{
        left: 0.25rem;
    }
    .card-switcher .indicator.next{
        right: 0.25rem;
    }
    .full-screen.ai .title {
        position: absolute;
        left: 50%;
        bottom: 3.5rem;
        width: 6rem;
        margin-left: 0;
        z-index: 3;
        transform: translateX(-50%);
    }
    .full-screen.ai .description {
        position: absolute;
        left: 50%;
        bottom: 1.5rem;
        width: 7rem;
        margin-left: 0;
        text-align: center;
        font-size: 0.3rem;
        box-sizing: border-box;
        z-index: 3;
        color: #acafb8;
        line-height: 30px;
        transform: translateX(-50%);
    }

    .full-screen.chat{
        height: 17rem;
    }

    .full-screen.chat .pop-1 {
        top: 0.5rem;
        right: 5rem;
        width: 1.5rem;
    }
    .full-screen.chat .pop-2 {
        top: 0.5rem;
        right: 3rem;
        width: 1.5rem;
    }
    .full-screen.chat .pop-3 {
        top: 0.5rem;
        right: 1rem;
        width: 1.5rem;
    }
    .full-screen.chat .pop-4 {
        top: 0.5rem;
        right: -1rem;
        width: 1.5rem;
    }
    .full-screen.chat .pop-5 {
        display: none;
    }

    .full-screen.chat > .bg.layer1{
        transform: scale(3);
        top: 5rem;
        transform-origin: center;
        left: -2rem;
    }
    .full-screen.chat .title {
        position: absolute;
        width: 6rem;
        top: 13rem;
        z-index: 8;
        right: 0.25rem;
        left: unset;
    }
    .full-screen.chat .description {
        position: absolute;
        width: 6rem;
        left: unset;
        top: 14rem;
        z-index: 8;
        right: 0.25rem;
        font-size: 0.4rem;
        line-height: 1.5;
        text-align: right;
    }

    .faq{
        padding: 0 0.25rem;
        margin-bottom: 0.85rem;
    }
    .faq h2{
        font-size: 0.7rem;
    }
    .faq .faq-list{
        margin-top: 0.5rem;
        row-gap: 0.25rem;
    }
    .faq .faq-list .faq-wrap .faq-question{
        padding: 0.25rem 0.3rem;
    }
    .faq .faq-list .faq-wrap .faq-question p{
        font-size: 0.3rem;
    }

    .faq .faq-list .faq-wrap .faq-question i{
        width: 0.15rem;
        height: 0.15rem;
        margin-top: -0.075rem;
    }

    .faq .faq-list .faq-wrap.active .faq-answer{
        padding: 0.25rem 0.3rem;
        max-width: 15rem;
    }

    .faq .faq-list .faq-wrap.active .faq-answer p{
        font-size: 0.25rem;
    }

    .full-screen.card .footer{
        padding: 0 0.25rem;
        display: flex;
        flex-direction: column;
        row-gap: 0.2rem;
        font-size: 0.25rem;
    }
    .full-screen.card .footer .left {
        font-size: 0.2rem;
        text-align: right;
        width: 80%;
        margin-left: auto;
        line-height: 2;
    }

}