*,
:after,
:before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	outline: 0 !important;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
time,
tt,
u,
ul,
var,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline
}

html {
	font-size: 5.4rem !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block
}

ol,
ul {
	list-style: none
}

blockquote,
q {
	quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
	content: ""
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

body {
	color: #3d4c63;
	background: #fff;
	font: 14px/1.5 CamphorProForXiaoMi-Regular, sans-serif;
	outline: 0
}

a {
	color: #333;
	text-decoration: none
}

a:hover {
	color: inherit
}

img {
	max-width: 100%;
	border: none
}

em,
i {
	font-style: normal
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

input,
select,
textarea {
	font-size: 12px;
	color: #444;
	font-family: CamphorProForXiaoMi-Regular, sans-serif;
	outline: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box
}

button,
input[type=button],
input[type=reset],
input[type=submit],
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
	cursor: pointer
}

input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:focus {
	background: #fff;
	border: 1px solid #bbb
}

.false:focus {
	border: 2px solid #ff1531;
	background: #fff
}

::-webkit-input-placeholder {
	color: #999
}

::-moz-placeholder {
	color: #999
}

:-ms-input-placeholder {
	color: #999
}

::-ms-clear,
::-ms-reveal {
	display: none
}

.fix {
	*zoom: 1
}

.fix:after,
.fix:before {
	display: block;
	content: "";
	height: 0;
	clear: both
}

.c {
	clear: both
}

.col-l,
.l {
	float: left
}

.col-r,
.r {
	float: right
}

.ani {
	-ms-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s
}

.unselect {
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none
}

.wp {
	width: 100%;
	max-width: 1258px;
	margin: 0 auto
}

.h50 {
	height: 50px;
	clear: both;
	overflow: hidden
}

.h100 {
	height: 100px;
	clear: both;
	overflow: hidden
}

@font-face {
	font-family: CamphorProForXiaoMi-Medium;
	/* src: url(../fonts/CamphorProForXiaoMi-Medium.otf) */
	src: url('https://oss.v-dk.com/img/202209152141179.otf')
}

@font-face {
	font-family: CamphorProForXiaoMi-Heavy;
	/* src: url(../fonts/CamphorProForXiaoMi-Heavy.otf) */
	src: url('https://oss.v-dk.com/img/202209152141506.otf')
}

@font-face {
	font-family: CamphorProForXiaoMi-Regular;
	/* src: url(../fonts/CamphorProForXiaoMi-Regular.otf) */
	src: url('https://oss.v-dk.com/img/202209152140434.otf')
}

@font-face {
	font-family: CamphorProForXiaoMi-Bold;
	/* src: url(../fonts/CamphorProForXiaoMi-Bold.otf) */
	src: url('https://oss.v-dk.com/img/202209152104883.otf')
}

@font-face {
	font-family: CamphorProForXiaoMi-Light;
	src: url('https://oss.v-dk.com/img/202210191653285.otf')
}

body {
	background-color: #000;
	color: #fff
}

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

html {
	font-size: 100px
}

.header {
	padding:5px 74px 30px 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 20
}

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

.mi-logo {
	display: block;
	height: .54rem
}

.mi-logo img {
	display: block;
	height: 100%
}

.hd-r {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end
}
/* 
.xc-logo {
	height: .45rem;
	margin-left: .6rem
} */
.boximg{
	margin-left: 60px;
	height: 106.83px;
  }

.xc-logo img {
	display: block;
	width: 150px;
	padding-top: 20px;
	box-sizing: border-box;
}
.nav {
	display: flex;
	align-items: center;
	justify-content: flex-end
}

.nav-item {
	position: relative
}

.nav-item+.nav-item {
	margin-left: .2rem
}

.g-btn {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 100vw;
	z-index: 2
}

.g-btn.disabled {
	pointer-events: none
}

.g-btn-content {
	position: relative;
	border: 1px solid #f0f0f0;
	border-radius: 100vw;
	/* padding: 0.12rem
 1.24rem
 0.08rem
; */
	padding: 8px 15px 10px;
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
}

.g-btn_text_wrapper {
	height: .16rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start
}

.g-btn_text {
	line-height: 1;
	font-size: .16rem;
	/* text-transform: capitalize; */
	transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
	transform-style: preserve-3d;
	will-change: trsform;
	color: #000;
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear
}

.g-btn_text.top {
	margin-bottom: .16rem;
	color: #fff
}

.g-btn:hover .g-btn_text {
	transform: translate3d(0, -.31rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
	transform-style: preserve-3d
}

.g-btn_bg {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 0%;
	height: 100%;
	border-radius: 100vw;
	background-color: #f8f8f8;
	will-change: width, height;
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
}

.g-btn:hover .g-btn_bg {
	width: 100%;
	height: 100%;
}

/* 在这里插入一个换行符或使用注释分隔 */

.sub-nav {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	text-align: left;
	pointer-events: none;
	z-index: 1;
}

.sub-nav .g-btn {
	opacity: 0;
	pointer-events: none;
	margin-top: .16rem;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s
}

.nav-item:hover .sub-nav {
	pointer-events: auto
}

.nav-item:hover .sub-nav .g-btn {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0)
}

.footer {
	/* position: fixed; */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999
}


.fd-media {
	display: flex;
	align-items: center
}

.fd-media a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: .16rem;
	height: .16rem;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s
}

.fd-media a:hover {
	opacity: .8
}

.fd-media a+a {
	margin-left: .42rem
}

.fd-media a img {
	display: block;
	max-height: 100%
}

.copyright {
	color: #fff;
	font-size: .16rem
}

.fd-link {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	font-size: .2rem;
	font-family: CamphorProForXiaoMi-Medium;
	color: #fff;
	display: flex;
	align-items: center
}

.fd-link i {
	display: block;
	width: .2rem;
	height: .2rem;
	background: url("../images/vc-r-w.svg") no-repeat center center / contain;
	margin-left: .2rem;
	position: relative;
	top: -.01rem;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out
}

.fd-link:hover i {
	-webkit-transform: translateX(.2rem);
	-moz-transform: translateX(.2rem);
	-ms-transform: translateX(.2rem);
	-o-transform: translateX(.2rem);
	transform: translateX(.2rem)
}

.full-page {
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.full-page.vc {
	overflow: hidden;
}

.full-page .header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999
}

.full-page .footer {
	/* position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999 */
}

.index-page {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1
}

.index-page video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	z-index: 1
}

.index-page:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/video-mask.png) no-repeat center center/100% 100%;
	z-index: 2
}

.index-page .txt {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	z-index: 3
}

.index-page .txt h3 {
	-webkit-text-stroke: 1px #fff;
	text-stroke: 1px #fff;
	color: rgba(97, 97, 97, 0);
	font-size: .9rem;
	font-weight: 800;
	text-align: center;
	white-space: pre-line;
	line-height: 1;
	text-transform: capitalize;
	font-family: CamphorProForXiaoMi-Heavy
}

.index-page .txt p {
	font-size: .8rem;
	color: #fff
}

.wp1 {
	max-width: 1492px;
	margin: 0 auto
}

.wp2 {
	max-width: 1742px;
	margin: 0 auto
}

.text-page {
	padding-top: 1.5rem;
	padding-bottom: 2.44rem;
	overflow: hidden;
	min-height: calc(100vh - .5rem);
}

.text-page-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1
}

.text-page-bg img {
	display: block;
	width: 100%
}

.text-page-tit {
	-webkit-text-stroke: 1px #fff;
	text-stroke: 1px #fff;
	color: rgba(97, 97, 97, 0);
	font-size: 1.84rem;
	font-weight: 800;
	line-height: 1;
	text-transform: capitalize;
	font-family: CamphorProForXiaoMi-Heavy;
	margin-bottom: 1.2rem;
	position: relative;
	z-index: 2
}

.text-page-content {
	padding-left: 1.24rem;
	display: flex;
	position: relative;
	z-index: 2
}

.text-page-content .circle {
	flex: 0 0 4.61rem;
	margin-right: 1.44rem
}

.text-page-content .circle img {
	display: block;
	width: 100%
}

.text-page-content .text {
	flex: 1;
	font-size: .24rem;
	line-height: .4rem;
	color: #a4a4a4
}

.text-page-content .text h3 {
	color: #ffffff;
	font-size: .28rem;
	font-weight: bold;
	margin-bottom: .2rem;
}

.text-page-content .text p {
	margin-bottom: .4rem
}

.apply-now {
	flex: 0 0 4.61rem;
	margin-right: 1.44rem
}

.apply-now p {
	font-family: CamphorProForXiaoMi-Bold;
	font-size: .32rem;
	color: #fff;
	font-style: italic;
	margin-bottom: .45rem
}

.apply-btn {
	width: 4.05rem
}

.apply-btn .g-btn-content {
	padding: .33rem 0 .33rem
}

.apply-btn .g-btn_text {
	font-size: .26rem;
	text-align: center;
	font-family: CamphorProForXiaoMi-Bold
}

.apply-btn .g-btn_text_wrapper {
	height: .26rem;
	
}

.apply-btn .g-btn_text.top {
	margin-bottom: .26rem
}

.apply-btn.g-btn:hover .g-btn_text {
	transform: translate3d(0, -.52rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
	transform-style: preserve-3d
}

.apply-btn .g-btn_text {
	display: flex;
	align-items: center;
	justify-content: center
}

.apply-btn .g-btn_text i {
	background-image: url(../images/join-us.svg);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	display: block;
	width: .2rem;
	height: .2rem;
	margin-left: .1rem;
	position: relative;
	top: -.02rem
}

.apply-btn .g-btn_text.top i {
	background-image: url(../images/vc-r-b.svg);
}

.g-btn.white {
	background: #fff
}

.g-btn.white .g-btn_text {
	color: #fff
}

.g-btn.white .g-btn_text.top {
	color: #000
}

.g-btn.white .g-btn_bg {
	background-color: #000
}

.detail-page-wrap {
	padding-top: 1.5rem
}

.detail-page {
	padding: 0 .9rem;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	height: calc(100vh - 2.4rem);
	overflow-y: auto
}

.detail-page::-webkit-scrollbar {
	width: 0;
	height: 0
}

.detail-page::-webkit-scrollbar-track {
	background: #000
}

.detail-page::-webkit-scrollbar-thumb {
	background: #000
}

.detail-page::-webkit-scrollbar-thumb:window-inactive {
	background: #000
}

.creator-info {
	flex: 0 0 4.8rem;
	margin-right: 2.55rem;
	position: sticky;
	top: 0
}

.creator-info-con {
	width: 4.8rem
}

.creator-info .info {
	display: flex;
	align-items: center;
	margin-bottom: .5rem
}

.creator-info .info .face {
	width: 1.5rem;
	height: 1.83rem;
	border-radius: 100px;
	overflow: hidden;
	margin-right: .38rem
}

.creator-info .info .face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.creator-info .info .txt {
	flex: 1
}

/* .index-intro .txt{
	display: none;
	max-width: 1235px;
    font-size: 22px;
    color: #ffffff;
    line-height: 38px;
    opacity: 0.7;
    text-transform: capitalize;
    margin-bottom: 50px;
} */
.creator-info .info .txt .name {
	-webkit-text-stroke: 1px #fff;
	text-stroke: 1px #fff;
	color: rgba(97, 97, 97, 0);
	font-size: .64rem;
	font-weight: 800;
	white-space: pre-line;
	line-height: 1;
	text-transform: capitalize;
	font-family: CamphorProForXiaoMi-Heavy
}

.creator-info .info .txt span {
	font-size: .24rem;
	color: #fff;
	margin-top: .35rem
}

/* .btn-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .5rem
} */

.btn-group .g-btn {
	width: 2.26rem
}

.btn-group .g-btn .g-btn-content {
	padding: .2rem 0 .16rem;
	border: 1px solid rgba(255, 255, 255, .5)
}

.btn-group .g-btn .g-btn_text {
	font-size: 22px;
	text-align: center
}

.btn-group .g-btn_text_wrapper {
	height: .27rem;
	margin-top: -13px;
}

.btn-group .g-btn_text.top {
	margin-bottom: .22rem
}

.btn-group .g-btn:hover .g-btn_text {
	transform: translate3d(0, -.44rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
	transform-style: preserve-3d
}

.creator-info .desc {
	font-family: CamphorProForXiaoMi-Light;
	font-size: .18rem;
	line-height: .25rem;
	color: rgba(255, 255, 255, .8)
}

.creator-info .desc h3 {
	font-weight: 300;
	font-size: .22rem;
	color: #fff;
	margin-bottom: .4rem;
	text-transform: capitalize;
	line-height: 1
}

.creator-info .desc p {
	font-size: .18rem;
	line-height: .32rem;
	color: rgba(255, 255, 255, .6);
	font-weight: 600;
	width: 96%;


}

.creator-info .desc p+p {
	margin-top: .35rem
}

.gallery-list {
	flex: 1;
	margin: 0 -.45rem
}

.gallery-item {
	width: 4.4rem;
	margin: 0 .45rem .8rem
}

.gallery-item .pic {
	position: relative
}

.gallery-item .pic:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: .3;
	background: #000;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s
}

.gallery-item img {
	display: block;
	width: 100%
}

.gallery-item h3 {
	color: #666;
	font-size: .2rem;
	margin-bottom: .25rem;
	text-transform: capitalize;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s
}

.gallery-item:hover h3 {
	color: #fff
}

.gallery-item:hover .pic:after {
	opacity: 0
}

.vc-page-tit {
	-webkit-text-stroke: 1px #fff;
	text-stroke: 1px #fff;
	color: rgba(97, 97, 97, 0);
	font-size: .64rem;
	text-align: center;
	font-weight: 800;
	white-space: pre-line;
	line-height: 1;
	text-transform: capitalize;
	font-family: CamphorProForXiaoMi-Heavy;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

.vc-list-wrap {
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%
}

.list-btn {
	opacity: 1;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: .9rem;
	z-index: 10;
	background: 0 0;
	border-radius: 30px;
	padding: 0
}

.list-btn .g-btn-content {
	width: .75rem;
	height: .45rem;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.list-btn .g-btn_text_wrapper {
	height: .27rem;
	width: .27rem;
	flex-direction: row
}

.list-btn .g-btn_text {
	flex: 0 0 .27rem;
	height: .27rem;
	width: .27rem;
	margin-bottom: 0;
	margin-right: .27rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.list-btn .g-btn_text img {
	display: block;
	width: 100%
}

.list-btn.g-btn:hover .g-btn_text {
	transform: translate3d(-.54rem, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
	transform-style: preserve-3d
}

.list-btn.prev .g-btn_bg {
	left: auto;
	right: 0
}

.list-btn.next.g-btn .g-btn_text {
	transform: translate3d(-.54rem, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
	transform-style: preserve-3d
}

.list-btn.next.g-btn:hover .g-btn_text {
	transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
	transform-style: preserve-3d
}

.list-btn.show {
	opacity: 1
}

.list-btn.next {
	left: auto;
	right: .9rem
}

.list-btn.disabled {
	pointer-events: none
}

.vc-list {
	display: flex;
	align-items: center;
	width: 100%;

	position: absolute;
	top: 58%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.vc-item {
	flex: 0 0 3.45rem;
	width: 3.45rem;
	padding: 0 10px;
	will-change: transform;
	position: relative;
	visibility: hidden;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	background: #000
}

.vc-item:last-child {
	visibility: visible
}

.vc-item-con {
	padding-top: 134.78%;
	display: block;
	position: relative;
	overflow: hidden;
	background: #000
}

/* .vc-item.active {
	z-index: 20 !important
} */

.vc-item img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	height: 0;
	width: 100%;
	object-fit: cover
}

.vc-item img.op3 {
	opacity: .2
}

.vc-item.active img.op3 {
	opacity: 1
}

.center-card {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 3.45rem;
	z-index: 999;
	background: #000;
	opacity: 0;
	pointer-events: none;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.center-card-con {
	padding-top: 134.78%;
}

.vc-txt {
	opacity: 0;
	margin-top: .6rem;
	text-align: center;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	pointer-events: none
}

.vc-txt .name {
	font-size: .28rem;
	color: #fff;
	font-family: CamphorProForXiaoMi-Medium;
	margin-bottom: .1rem
}

.btn-group2 {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.btn-group2 .g-btn {
	width: 48%
}

.btn-group2 .g-btn-content {
	border-color: rgba(255, 255, 255, .3);
	padding-left: 0;
	padding-right: 0;
	text-align: center
}

.btn-group2 .g-btn_text_wrapper {
	height: auto
}

.btn-group2 .g-btn_text.top {
	margin-bottom: 0
}

.btn-group2 .g-btn_text {
	font-size: .14rem
}

.vc-item.active .vc-txt {
	opacity: 1;
	pointer-events: auto;
	-webkit-transition: all .3s .7s;
	-moz-transition: all .3s .7s;
	-ms-transition: all .3s .7s;
	-o-transition: all .3s .7s;
	transition: all .3s .7s
}

.m-banner {
	position: relative;
	height: 100vh;
	margin-bottom: .5rem;
}

.m-banner img {
	display: block;
	width: 100%
}

.m-banner h1 {
	-webkit-text-stroke: 1px #fff;
	text-stroke: 1px #fff;
	color: rgba(97, 97, 97, 0);
	font-size: 1.4rem;
	font-weight: 800;
	text-align: center;
	white-space: pre-line;
	line-height: 1;
	text-transform: capitalize;
	font-family: CamphorProForXiaoMi-Heavy;
	position: absolute;
	top: calc(50% - .5rem);
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	white-space: pre-line
}

.m-mod1 {
	margin-bottom: 1rem
}

.mod1-top {
	display: flex
}

.mod1-top .pic {
	flex: 0 0 48%;
	position: relative;
	margin-right: .9rem
}

.mod1-top .pic img {
	display: block;
	width: 100%;
	position: relative;
	z-index: 1
}

.mod1-top .pic:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	z-index: 1;
	opacity: .2
}

.mod1-top .txt {
	flex: 1;
	position: relative;
	z-index: 2;
	padding-top: .55rem
}

.mod1-top .txt h3 {
	font-size: .5rem;
	font-family: CamphorProForXiaoMi-Heavy;
	color: #fff;
	line-height: .74rem;
	margin-bottom: .6rem;
	position: relative;
	left: -2.1rem;
	width: 6rem
}

.mod1-top .txt .desc {
	width: 380px;
	font-size: .2rem;
	line-height: .32rem;
	color: rgba(255, 255, 255, .8);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 8;
	font-weight: 500;
	-webkit-box-orient: vertical
}

.mod1-top .txt .desc p+p {
	margin-top: .34rem
}

.mod1-bot {
	-webkit-text-stroke: 1px #666;
	text-stroke: 1px #666;
	color: rgba(97, 97, 97, 0);
	font-size: .6rem;
	font-weight: 800;
	text-align: center;
	line-height: 1;
	text-transform: capitalize;
	font-family: CamphorProForXiaoMi-Heavy;
	padding: 1rem 0 0
}

/* 隐藏页面 */
.m-mod2 {

	margin-bottom: 1.5rem
}

.mod2-top {
	display: flex;
	position: relative;
	z-index: 2;
	margin-bottom: .6rem;
}

.mod2-top .txt {
	flex: 0 0 50%;
	padding-right: 2.4rem;
	padding-top: .5rem;
	padding-bottom: 5px;
	border-right: 1px solid #f8f8f8
}

.mod2-top .txt h3 {
	font-size: .44rem;
	color: #fff;
	font-family: CamphorProForXiaoMi-Bold;
	margin-bottom: .45rem;
	width: 200%;
}

.mod2-top .txt .desc {
	font-size: .18rem;
	color: rgba(255, 255, 255, .6);
	line-height: .32rem;
	overflow: hidden;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical
}

.mod2-top .creator {
	padding-left: 1.07rem;
	padding-right: 1.18rem;
	flex: 1;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mod2-top .creator .face {
	flex: 0 0 1.6rem;
	overflow: hidden;
}

.mod2-top .creator .face img {
	display: block;
	width: 100%;
	height: 100%;
}

.mod2-top .creator:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background-image: url(../images/border-rt.png);
	background-image: -webkit-image-set(url(../images/border-rt.png) 1x, url(../images/border-rt@2x.png) 2x);
	width: 3.48rem;
	height: 4.2rem;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	pointer-events: none
}

.mod2-top .creator .name {
	font-size: .32rem;
	line-height: .4rem;
	color: #fff;
	font-family: CamphorProForXiaoMi-Bold;
	margin-bottom: .5rem;
	white-space: pre-line;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-left: .4rem;
}

.mod2-video .video {
	height: 6.75rem;
	position: relative;
	overflow: hidden;
}

.mod2-video .video video {
	display: block;
	width: 100%;
	height: 100%;
	/* object-fit: cover; */
	z-index: 1
}

.mod2-video .video .play-btn {
	cursor: pointer;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-image: url(../images/btn-play.png);
	background-image: -webkit-image-set(url(../images/btn-play.png) 1x, url(../images/btn-play@2x.png) 2x);
	width: 1.2rem;
	height: 1.2rem;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	z-index: 2
}

.mod2-video .name {
	font-size: .32rem;
	line-height: .4rem;
	margin: .3rem 0;
	color: #fff;
	font-family: CamphorProForXiaoMi-Bold;
}

.faq-list {
	display: flex;
	margin: 0 -.15rem
}

.faq-item {
	cursor: pointer;
	flex: 0 0 calc(33.3% - .3rem);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 .3rem;
	height: 1.72rem;
	border: 1px solid rgba(255, 255, 255, .15);
	margin: 0 .15rem;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
	overflow: hidden;
	position: relative
}

.faq-item:hover {
	border-color: #fff
}

.faq-item:hover .title {
	color: #fff
}

.faq-item .title {
	font-size: .22rem;
	color: #545454;
	font-family: CamphorProForXiaoMi-Bold
}

.faq-item .con {
	font-family: CamphorProForXiaoMi-Bold;
	color: #fff;
	-webkit-transition: all .3s .3s;
	-moz-transition: all .3s .3s;
	-ms-transition: all .3s .3s;
	-o-transition: all .3s .3s;
	transition: all .3s .3s
}

.faq-item.active {
	cursor: default;
	justify-content: flex-start;
	border-color: #fff
}

.faq-item .title {
	display: none
}

.faq-item .con {
	position: static;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.faq-item .con h2 {
	font-size: .22rem;
	color: #555555;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.faq-item .con h3 {
	font-size: .24rem;
	color: #555555;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	font-family: CamphorProForXiaoMi-Regular;
	font-weight: normal;
}

.faq-item .con .tag {
	color: #555;
	font-size: .2rem;
}

.faq-item.active .con h2,
.faq-item.active .con h3 {
	color: #ffffff;
	font-family: CamphorProForXiaoMi-Bold;
}

.m-mod3 {
	overflow: hidden;
	position: relative;
	margin-bottom: .78rem
}

.mod3-txt {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10;
	pointer-events: none;
	font-size: .9rem;
	font-family: CamphorProForXiaoMi-Heavy;
	font-weight: 800;
	color: rgba(255, 255, 255, 0);
	line-height: .38rem;
	-webkit-text-stroke: 1px #fff;
	text-stroke: 1px #fff
}

/* 隐藏页面 */
.pic-list {

	height: 8.4rem;
	position: relative;
	cursor: grab;
	user-select: none;
	will-change: transform
}


.pic-list:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: .2;
	pointer-events: none;
	z-index: 10
}

.pic-list:active {
	cursor: grabbing
}

.pic-item {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.pic-item.disabled {
	pointer-events: none
}

.pic-item img {
	display: block;
	width: 100%;
	pointer-events: none;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s
}

.pic-con {
	opacity: 0;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s
}

.pic-con.show {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1)
}

.fancybox__thumbs {
	display: none
}

.fancybox__content {
	max-height: 70vh
}

.fancybox__toolbar {
	top: auto;
	bottom: 0;
	background: 0 0;
	justify-content: center
}

.fancybox__toolbar__items--right {
	display: none
}

.fancybox__toolbar__items--left {
	flex: 1;
	display: flex;
	justify-content: center
}

.fancybox__counter {
	font-family: CamphorProForXiaoMi-Light;
	font-size: .36rem;
	color: rgba(255, 255, 255, .4)
}

.fancybox__counter span:first-child {
	font-size: .7rem;
	color: #fff;
	font-family: CamphorProForXiaoMi-Medium
}

.carousel__button.is-next .g-btn {
	right: .6rem
}

.carousel__button.is-prev .g-btn {
	left: .6rem
}

.m-mod4 {
	padding-top: 1rem;
}

.m-mod4 .title {
	font-size: .44rem;
	color: #fff
}

.creators-list {
	margin: 0 -.25rem 1.86rem;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 1.26rem
}

.creators-item {
	display: block;
	flex: 0 0 calc(33.3% - .5rem);
	margin: 0 .25rem .5rem;
	border: 1px solid rgba(255, 255, 255, .2);
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	border-radius: .5rem
}

.creators-item .top {
	padding: .45rem .35rem .2rem;
	font-family: CamphorProForXiaoMi-Bold;
	font-size: .28rem;
	line-height: 1;
}

.creators-item .top .tag {
	color: #545454;
	margin-bottom: .05rem;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s
}

.creators-item .top .name {
	color: #fff
}

.creators-item .bot {
	position: relative;
	padding: .4rem .4rem .3rem
}

.creators-item .bot .demo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s
}

.creators-item .bot .info {
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	background: #000;
	position: relative;
	z-index: 5
}

.creators-item .bot .info .face {
	width: 1.39rem;
	height: 1.69rem;
	margin: 0 auto .4rem;
	overflow: hidden;
	position: relative;
	border-radius: .7rem
}

.creators-item .bot .info .face:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: .2;
	z-index: 2
}

.creators-item .bot .info .face img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: 100%;
	height: 100%;
	z-index: 1
}

.creators-item .bot .info .type {
	font-size: .22rem;
	color: #666
}

.creators-item .bot .demo .pic {
	display: flex;
	padding: .2rem;
	height: 100%
}

.creators-item .bot .demo .pic img {
	cursor: pointer
}

.creators-item .bot .demo .pic1 {
	padding-top: .6rem;
	align-items: center
}

.creators-item .bot .demo .pic1 .img1 {
	flex: 0 0 1.92rem;
	width: 1.92rem;
	height: 1.49rem;
	object-fit: cover;
	position: relative;
	z-index: 2
}

.creators-item .bot .demo .pic1 .img2 {
	flex: 0 0 2.03rem;
	width: 2.03rem;
	height: 2.42rem;
	object-fit: cover;
	position: relative;
	z-index: 1;
	left: -.45rem;
	top: -.1rem
}

.creators-item .bot .demo .pic2 {
	align-items: flex-end
}

.creators-item .bot .demo .pic2 .img1,
.creators-item .bot .demo .pic2 .video1 {
	flex: 0 0 2.01rem;
	width: 2.01rem;
	height: 1.59rem;
	object-fit: cover;
	position: relative;
	top: -1.2rem;
	z-index: 2
}

.creators-item .bot .demo .pic2 .img2,
.creators-item .bot .demo .pic2 .video2 {
	flex: 0 0 2.01rem;
	width: 2.01rem;
	height: 1.59rem;
	object-fit: cover;
	position: relative;
	z-index: 1;
	left: -.55rem;
	top: -.1rem;
}

.creators-item .bot .demo .pic3 {
	align-items: flex-end
}

.creators-item .bot .demo .pic3 .img1 {
	flex: 0 0 2.03rem;
	width: 2.03rem;
	height: 2.42rem;
	object-fit: cover;
	position: relative;
	z-index: 2;
	top: -.52rem
}

.creators-item .bot .demo .pic3 .img2 {
	flex: 0 0 2.03rem;
	width: 2.03rem;
	height: 2.42rem;
	object-fit: cover;
	position: relative;
	z-index: 1;
	left: -.6rem;
	top: -.1rem
}

.creators-item .bot .demo .video video {
	cursor: pointer;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.creators-item:nth-child(3n+1) {
	position: relative;
	top: 1.26rem
}

.creators-item:nth-child(3n+2) {
	position: relative;
	top: -.82rem
}

.creators-item:nth-child(3n+3) {
	position: relative;
	top: .24rem
}

.creators-item:hover {
	border-color: #fff
}

.creators-item:hover .top .tag {
	color: #fff
}

.creators-item:hover .bot .info {
	opacity: 0;
	pointer-events: none
}

.creators-item:hover .bot .demo {
	opacity: 1
}

.video-pop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 999999;
	overflow: hidden;
	-webkit-transition: all .5s ease-in-out .5s;
	-moz-transition: all .5s ease-in-out .5s;
	-ms-transition: all .5s ease-in-out .5s;
	-o-transition: all .5s ease-in-out .5s;
	transition: all .5s ease-in-out .5s
}

.video-pop.show {
	height: 100%;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out
}

.video-pop.show .video1 {
	opacity: 1;
	-webkit-transition: all .5s linear .5s;
	-moz-transition: all .5s linear .5s;
	-ms-transition: all .5s linear .5s;
	-o-transition: all .5s linear .5s;
	transition: all .5s linear .5s
}

.pop-mask {
	display: block;
	width: 100%;
	height: 100%;
	background: #000
}

.video-pop .video1 {
	opacity: 0;
	width: 12.6rem;
	height: 6.08rem;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: #000;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s
}

.video-pop video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover
}

.pop-close {
	cursor: pointer;
	position: absolute;
	right: 0;
	bottom: calc(100% + .5rem);
	display: flex;
	align-items: center;
	font-size: .38rem;
	color: #fff
}

.pop-close i {
	display: block;
	background-image: url(../images/close.png);
	background-image: -webkit-image-set(url(../images/close.png) 1x, url(../images/close@2x.png) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: .24rem auto;
	background-size: .24rem auto;
	margin-right: .15rem;
	width: .23rem;
	height: .23rem;
	position: relative;
	top: -.03rem
}

@media only screen and (min-height:1230px) {
	.footer.text_footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%
	}
}

@media only screen and (max-width:1900px) {
	.wp {
		padding: 0 30px;
	}

	.wp1,
	.wp2 {
		padding: 0 160px;
		max-width: none;
	}
}

@media only screen and (max-width:1600px) {}

@media only screen and (min-width:2000px) {

	.vc-list {
		/*top: .3rem;*/
	}

	.vc-txt {
		margin-top: .75rem;
	}

	.gallery-list {
		width: 16rem;
		position: relative;
		right: -1.8rem;
	}

	.vc-page-tit {
		top: -2%;
	}

}
/* Swiper Pagination Styles */
.swiper-pagination {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
  }
  .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #fff;
	opacity: 0.5;
	margin: 0 10px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
  }
  .swiper-pagination-bullet-active {
	width: 14px;
	height: 14px;
	background-color: #fff;
	opacity: 1;
  }
  
  /* Swiper Navigation Styles */
  .swiper-button-prev,
  .swiper-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 69.11px;
	height: 39.22px;
	/* border-radius: 50%; */
	/* background-color: rgba(255, 255, 255, 0.7); */
	color: #000;
	font-size: 20px;
	line-height: 38px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
  }
  .swiper-button-prev:hover,
  .swiper-button-next:hover {
	background-color: #fff;
	width: 69.11px;
	height: 39.22px;
  }
  .swiper-button-prev {
	left: 20px;
	z-index: 999;
  }
  .swiper-button-next {
	right: 20px;
	z-index: 999;
  }
  .swiper-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 1;
}
.swiper-container {
	width: 100%;
	height: 100%;
  }
  
  .swiper-slide {
	position: relative;
	height: 100%;
  }
  
  .swiper-slide video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  .swiper-slide-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
  }
  .swiper-wrapper {
    width: 100%;
    height: 100%;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev{
	right: var(--swiper-navigation-sides-offset,0%) !important;
    left: auto;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset,0%) !important;
    right: auto;
}
.swiper-button-next, .swiper-button-prev{
	top: var(--swiper-navigation-top-offset,90%) !important;
	width: calc(var(--swiper-navigation-size)/ 125 * 208) !important;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content:none !important;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
	content:none !important;
}
 .swiper-btn {
    position: relative;
    bottom: 50%;
  
}
.g-btn-content1{
	position: relative;
    border: 1px solid #f0f0f0;
    border-radius: 100vw;
    padding: 10px 22px 10px;;
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
}
/*.swiper-btn a{
    width: 80px;
  }
.swiper-btn .g-btn+.g-btn {
    margin-left: .43rem
}

.swiper-btn .g-btn {
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s
}

.swiper-btn .g-btn .g-btn-content {
    border: 1px solid #fff;
    padding: 0;
    height: .42rem;
    width: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .26rem
} */

.swiper-btn .g-btn .g-btn_text i {
    display: block;
    background: url(https://event.c.mi.com/global/xiaomiImagery/wp-content/themes/xiaomi-imagery/assets/pc/images/vc-r-b.svg) no-repeat center center/contain;
    width: .32rem;
    height: .21rem
}

.swiper-btn .g-btn .g-btn_text.top i {
    background-image: url(https://event.c.mi.com/global/xiaomiImagery/wp-content/themes/xiaomi-imagery/assets/pc/images/vc-r-w.svg)
}

.swiper-btn .g-btn .g-btn_text_wrapper {
    /* height: .25rem;
    width: .33rem; */
    display: flex;
    align-items: center;
    flex-direction: row
}

.swiper-btn .g-btn .g-btn_text.top {
    margin-bottom: 0;
    margin-right: .33rem
}

.swiper-btn .g-btn:hover .g-btn_text {
    transform: translate3d(-.66rem, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
    transform-style: preserve-3d
}

.swiper-btn .swiper-button-prev.g-btn .g-btn_text i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.swiper-btn .swiper-button-next.g-btn .g-btn_bg {
    left: auto;
    right: 0
}

.swiper-btn .swiper-button-next.g-btn .g-btn_text.top {
    margin-right: 0;
    margin-left: .33rem
}

.swiper-btn .swiper-button-next.g-btn .g-btn_text {
    transform: translate3d(-.66rem, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
    transform-style: preserve-3d
}

.swiper-btn .swiper-button-next.g-btn:hover .g-btn_text {
    transform: translate3d(0rem, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
    transform-style: preserve-3d
}

.swiper-btn .g-btn.swiper-button-disabled {
    opacity: .43;
    pointer-events: none
}
.g-btn_bg1{
	position: absolute;
    left: 0;
    z-index: 1;
    width: 0%;
    height: 36.28px;
    border-radius: 26rem;
    background-color: #f8f8f8;
    will-change: width, height;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    transition: all .4s linear;
}
.swiper-btn .g-btn+.g-btn {
    margin-left: 0.43rem;
    margin-right: 60px;
	z-index: 99999;
}
.swiper-btn .g-btn.swiper-button-disabled {
    opacity: .43;
    pointer-events: none;
    margin-left: 60px;
	z-index: 99999;
}
a.g-btn.swiper-button-prev {
    margin-left: 60px;
	z-index: 99999;
}
.swiper-btn .g-btn .g-btn-content{
	z-index: 99999;
}
.content-separator {
    border: 1px solid rgb(255, 255, 255); 
    margin: 20px 0; 
}
.g-btn-content1:hover{
	z-index: 1;
    background-color: #fff;
    height: auto;
	/* transform: translate3d(0, -50%, 1px) translateY(-24px) */
	opacity: 1;
	pointer-events: auto;
	-webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    transition: all .4s linear;
}