.g--font-r {
	font-family: OPPOSans-Regular;
	font-weight: 400
}

.g--font-m {
	font-family: OPPOSans-Medium;
	font-weight: 400
}

.g--font-b {
	font-family: OPPOSans-Bold;
	font-weight: 400
}

.g--font-l {
	font-family: OPPOSans-Light;
	font-weight: 200
}

.g--container,.g--container-ls,.g--container-pt,.g--wrapper {
	margin: 0 auto
}

.g--container,.g--container-ls {
	width: 1312px
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--container,.g--container-ls {
		width: 1100px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--container,.g--container-ls {
		width: 896px
	}
}

@media(max-width:720px) {
	.g--container,.g--container-pt {
		width: calc(100vw - 40px)
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--container,.g--container-pt {
		width: calc(100vw - 80px)
	}
}

@media(min-width:1024px) {
	.g--gap-top-large {
		margin-top: 182px
	}
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--gap-top-large {
		margin-top: 153px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--gap-top-large {
		margin-top: 124px
	}
}

@media(max-width:1023px) {
	.g--gap-top-large {
		margin-top: 80px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--gap-top-large {
		margin-top: 160px
	}
}

@media(min-width:1024px) {
	.g--gap-bottom-large {
		margin-bottom: 182px
	}
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--gap-bottom-large {
		margin-bottom: 153px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--gap-bottom-large {
		margin-bottom: 124px
	}
}

@media(max-width:1023px) {
	.g--gap-bottom-large {
		margin-bottom: 80px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--gap-bottom-large {
		margin-bottom: 160px
	}
}

@media(min-width:1024px) {
	.g--gap-top-medium {
		margin-top: 128px
	}
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--gap-top-medium {
		margin-top: 107px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--gap-top-medium {
		margin-top: 87px
	}
}

@media(max-width:1023px) {
	.g--gap-top-medium {
		margin-top: 45px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--gap-top-medium {
		margin-top: 90px
	}
}

@media(min-width:1024px) {
	.g--gap-bottom-medium {
		margin-bottom: 128px
	}
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--gap-bottom-medium {
		margin-bottom: 107px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--gap-bottom-medium {
		margin-bottom: 87px
	}
}

@media(max-width:1023px) {
	.g--gap-bottom-medium {
		margin-bottom: 45px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--gap-bottom-medium {
		margin-bottom: 90px
	}
}

@media(min-width:1024px) {
	.g--gap-top-small {
		margin-top: 90px
	}
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--gap-top-small {
		margin-top: 75px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--gap-top-small {
		margin-top: 61px
	}
}

@media(max-width:1023px) {
	.g--gap-top-small {
		margin-top: 45px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--gap-top-small {
		margin-top: 90px
	}
}

@media(min-width:1024px) {
	.g--gap-bottom-small {
		margin-bottom: 90px
	}
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--gap-bottom-small {
		margin-bottom: 75px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--gap-bottom-small {
		margin-bottom: 61px
	}
}

@media(max-width:1023px) {
	.g--gap-bottom-small {
		margin-bottom: 45px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--gap-bottom-small {
		margin-bottom: 90px
	}
}

@media(min-width:1024px) {
	.g--wrapper {
		width: calc(100% - 64px)
	}
}

@media(max-width:1023px) {
	.g--pt-hidden {
		display: none!important
	}
}

@media(min-width:1024px) {
	.g--ls-hidden {
		display: none!important
	}
}

@media(max-width:720px) {
	.g--mb-hidden {
		display: none!important
	}
}

@media not screen and (max-width:720px) {
	.g--mb-show {
		display: none!important
	}
}

.g--text {
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: -.55px
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--text {
		font-size: 16.768px;
		letter-spacing: -.46112000000000003px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--text {
		font-size: 13.658px;
		letter-spacing: -.375595px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--text {
		line-height: 1.75;
		letter-spacing: -.3px;
		font-size: 32px;
		letter-spacing: -.6px
	}
}

@media(max-width:720px) {
	.g--text {
		line-height: 1.75;
		letter-spacing: -.3px;
		font-size: 16px;
		letter-spacing: -.3px
	}
}

.g--title {
	font-family: OPPOSans-Medium;
	font-weight: 400;
	font-size: 42px;
	line-height: 1.52;
	letter-spacing: -.75px
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--title {
		font-size: 35.2128px;
		letter-spacing: -.6288px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--title {
		font-size: 28.6818px;
		letter-spacing: -.5121749999999999px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--title {
		line-height: 1.57;
		letter-spacing: -.5px;
		font-size: 56px;
		letter-spacing: -1px
	}
}

@media(max-width:720px) {
	.g--title {
		line-height: 1.57;
		letter-spacing: -.5px;
		font-size: 28px;
		letter-spacing: -.5px
	}
}

.g--title.g--font-b {
	font-family: OPPOSans-Bold;
	font-weight: 400
}

.g--subtitle {
	font-family: OPPOSans-Bold;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.09;
	letter-spacing: -.09px
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--subtitle {
		font-size: 18.4448px;
		letter-spacing: -.075456px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--subtitle {
		font-size: 15.0238px;
		letter-spacing: -.061460999999999995px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--subtitle {
		line-height: 1.5;
		letter-spacing: -.35px;
		font-size: 32px;
		letter-spacing: -.7px
	}
}

@media(max-width:720px) {
	.g--subtitle {
		line-height: 1.5;
		letter-spacing: -.35px;
		font-size: 16px;
		letter-spacing: -.35px
	}
}

.g--text-2 {
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: 0
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--text-2 {
		font-size: 13.4144px;
		letter-spacing: 0
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--text-2 {
		font-size: 10.9264px;
		letter-spacing: 0
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--text-2 {
		line-height: 2;
		letter-spacing: 0;
		font-size: 24px;
		letter-spacing: 0
	}
}

@media(max-width:720px) {
	.g--text-2 {
		line-height: 2;
		letter-spacing: 0;
		font-size: 12px;
		letter-spacing: 0
	}
}

.g--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	align-self: center
}

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

.g--abs.g--center {
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

@media(max-width:1023px) {
	.g--center.g--pt-flow {
		text-align: initial
	}
}

.g--v-center {
	height: 100%;
	display: flex;
	align-items: center
}

.g--v-center>* {
	width: 100%
}

.g--h-center {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column
}

.g--h-center>* {
	height: 100%
}

.g--sticky-container,.sticky-container {
	position: relative
}

.g--sticky-item {
	position: -webkit-sticky;
	position: sticky;
	top: 0
}

.g--black {
	color: #000
}

.g--white {
	color: #fff
}

.g--grey {
	color: rgba(255,255,255,0.56)
}

.g--grey-light {
	color: rgba(255,255,255,0.2)
}

.g--gray {
	color: rgba(0,0,0,0.7)
}

.g--gray-light {
	color: rgba(0,0,0,0.32)
}

.g--bg-black {
	background-color: #000
}

.g--bg-white {
	background-color: #fff
}

.g--full {
	width: 100%;
	height: 100%
}

.g--full-w {
	width: 100%
}

.g--full-h {
	height: 100%
}

.g--full-screen {
	height: 100vh;
	height: calc(100 * var(--vh,1vh))
}

.g--full-screen-r-nav {
	height: calc(100vh - 140px);
	height: calc((100 * var(--vh,1vh)) - 140px)
}

@media(min-width:1024px) and (max-width:1399px) {
	.g--full-screen-r-nav {
		height: calc(100vh - 124px);
		height: calc((100 * var(--vh,1vh)) - 124px)
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--full-screen-r-nav {
		height: calc(100vh - 97px);
		height: calc((100 * var(--vh,1vh)) - 97px)
	}
}

@media(max-width:720px) {
	.g--full-screen-r-nav {
		height: calc(100vh - 97px);
		height: calc((100 * var(--vh,1vh)) - 97px)
	}
}

.g--flex {
	display: flex
}

.g--flex>.left,.g--flex>.right {
	flex: 1
}

@media(max-width:1023px) {
	.g--flex.g--pt-flow {
		display: initial
	}

	.g--flex.g--pt-flow>.left,.g--flex.g--pt-flow>.right {
		flex: initial
	}
}

@media(max-width:1023px) {
	.g--pt-full-w,.g--container.g--pt-full-w {
		width: 100%
	}
}

@media(max-width:1023px) {
	.g--pt-flex {
		display: flex
	}
}

.g--rel {
	position: relative
}

.g--abs {
	position: absolute
}

.g--abs-clip {
	position: absolute;
	top: 0;
	left: 0
}

.g--pointer {
	cursor: pointer
}

.g--cover {
	object-fit: cover
}

.g--border-gradient {
	position: relative;
	border-radius: 2px
}

.g--border-gradient::after {
	position: absolute;
	content: "";
	top: -1px;
	left: -1px;
	z-index: -1;
	width: calc(100%+2px);
	height: calc(100%+2px);
	border-radius: 3px;
	background: linear-gradient(60deg,#eddfcb,#865b9f,#4be2ef,#94a4ed);
	background-size: 300% 300%;
	background-position: 0 50%;
	-webkit-animation: moveGradient 4s alternate infinite;
	animation: moveGradient 4s alternate infinite
}

@-webkit-keyframes moveGradient {
	50% {
		background-position: 100% 50%
	}
}

@keyframes moveGradient {
	50% {
		background-position: 100% 50%
	}
}

@media(max-width:768px) {
	body #oc-header {
		overflow: hidden
	}
}

body #oc-wrapper {
	overflow: visible
}

body #footer {
	overflow-x: hidden
}

body.no-scroll {
	overflow-y: hidden
}

.zn--wrapper,.zn--navbar {
	font-size: 16px;
	font-family: OPPOSans-Regular,'PingFang SC','Hiragino Sans GB','STHeiti','Microsoft YaHei','WenQuanYi Micro Hei','Helvetica Neue','Helvetica','Arial',sans-serif
}

.zn--wrapper *,.zn--navbar * {
	box-sizing: border-box
}

.zn--wrapper a,.zn--navbar a {
	text-decoration: none
}

.zn--wrapper {
	background: #000;
	color: #fff
}

.zn--wrapper img {
	display: block;
	max-width: initial;
	opacity: 0
}

.zn--wrapper img.loaded {
	opacity: 1
}

.zn--wrapper canvas img {
	display: none
}

.zn--wrapper video {
	display: block;
	max-width: initial
}

.zn--wrapper br {
	font-family: 'Open Sans','-apple-system','BlinkMacSystemFont','Helvetica Neue','Helvetica','Roboto','Arial','PingFang SC','Hiragino Sans GB','Microsoft Yahei','Microsoft Jhenghei','sans-serif'
}

.zn--wrapper h1 {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	border: 0;
	margin: 0;
	padding: 0;
	clip: rect(1px,1px,1px,1px);
	-webkit-clip-path: inset(0 0 99.9%);
	clip-path: inset(0 0 99.9%)
}

@media(max-width:1023px) {
	.g--pt-hidden,.pt-hidden,.ls {
		display: none!important
	}
}

@media(min-width:1024px) {
	.g--ls-hidden,.ls-hidden,.pt {
		display: none!important
	}
}

@media(min-width:1400px) and (max-width:1799px) {
	.g--show-1024 {
		display: none
	}
}

@media(min-width:1800px) {
	.g--show-1024 {
		display: none
	}
}

@media(min-width:720px) and (max-width:1023px) {
	.g--show-1024 {
		display: none
	}
}

@media(max-width:720px) {
	.g--show-1024 {
		display: none
	}
}

.remark {
	opacity: .7
}

.remark .sup {
	opacity: .9;
	color: #fff
}

.details {
	margin-bottom: 5px
}

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

#parameter .container {
	width: 1312px;
	margin: 0 auto
}

@media(min-width:1024px) and (max-width:1399px) {
	#parameter .container {
		width: 896px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	#parameter .container {
		width: 720px
	}
}

@media(max-width:1023px) {
	#parameter .container {
		width: 88.88888888888889vw
	}
}

#parameter .container .overview {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	padding: 128px 0
}

@media(min-width:1024px) and (max-width:1399px) {
	#parameter .container .overview {
		padding: 97px 0 64px
	}
}

@media(max-width:1023px) {
	#parameter .container .overview {
		flex-direction: column;
		padding: 81px 0 64px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	#parameter .container .overview {
		flex-direction: column;
		padding: 97px 0 64px
	}
}

#parameter .container .overview .left {
	display: flex;
	flex-flow: column nowrap
}

@media(max-width:1023px) {
	#parameter .container .overview .left {
		width: 100%
	}
}

#parameter .container .overview .left .title-wrapper {
	margin-bottom: 28px
}

@media(min-width:1024px) and (max-width:1399px) {
	#parameter .container .overview .left .title-wrapper {
		margin-bottom: 32px
	}
}

@media(max-width:1023px) {
	#parameter .container .overview .left .title-wrapper {
		margin-bottom: 20px
	}
}

@media(max-width:1023px) {
	#parameter .container .overview .left .desc-wrapper {
		margin-bottom: 32px
	}
}

#parameter .container .overview .right {
	display: flex;
	flex-flow: column nowrap;
	width: 751px
}

@media(min-width:1024px) and (max-width:1399px) {
	#parameter .container .overview .right {
		width: 546px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	#parameter .container .overview .right {
		width: 376px
	}
}

@media(max-width:1023px) {
	#parameter .container .overview .right {
		width: 100%
	}
}

#parameter .container .overview .right .img-wrapper {
	position: relative;
	height: 415px;
	width: 526.46px
}

@media(min-width:1024px) and (max-width:1399px) {
	#parameter .container .overview .right .img-wrapper {
		height: 407px;
		width: 516.31px
	}
}

@media(max-width:720px) {
	#parameter .container .overview .right .img-wrapper {
		width: 100%;
		padding-bottom: 87.73%;
		height: 0
	}
}

@media(min-width:720px) and (max-width:1023px) {
	#parameter .container .overview .right .img-wrapper {
		width: 269px;
		height: 236px
	}
}

.lang-ar #parameter .container .overview .right .img-wrapper {
	margin-left: auto
}

#parameter .container .overview .right .img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

#parameter .container .overview .right .name-wrapper {
	margin: 20px 0 4px
}

@media(max-width:1023px) {
	#parameter .container .overview .right .name-wrapper {
		margin: 25px 0 4px
	}
}

#parameter .container .overview .right .remark {
	width: 563.84px
}

@media(min-width:1024px) and (max-width:1399px) {
	#parameter .container .overview .right .remark {
		width: 552.87px
	}
}

@media(max-width:720px) {
	#parameter .container .overview .right .remark {
		width: 100%
	}
}

@media(min-width:720px) and (max-width:1023px) {
	#parameter .container .overview .right .remark {
		width: 269px
	}
}

#parameter .container .remarkWrapper {
	flex-direction: column
}

.lang-ar #parameter .container .remarkWrapper .left {
	padding-right: 0
}

#parameter .container .remarkWrapper .title {
	margin-bottom: 32px
}

#parameter .container .remarkWrapper .right {
	width: 100%
}

#parameter .container .remarkWrapper .right .desc {
	font-family: OPPOSans-Regular;
	font-weight: 400;
	font-size: 12px;
	line-height: 24px;
	letter-spacing: -.05px
}

#parameter .container section {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding: 96px 0;
	display: flex;
	flex-flow: row nowrap
}

@media(max-width:1023px) {
	#parameter .container section {
		flex-direction: column;
		padding: 64px 0
	}
}

@media(min-width:720px) and (max-width:1023px) {
	#parameter .container section {
		flex-direction: column
	}
}

#parameter .container section .left {
	width: 300px;
	padding-right: 36px
}

@media(min-width:1024px) and (max-width:1399px) {
	#parameter .container section .left {
		width: 200px;
		padding-right: 32px
	}
}

@media(max-width:1023px) {
	#parameter .container section .left {
		width: 100%;
		padding-right: 0
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	.lang-ar #parameter .container section .left {
		width: 300px;
		padding-right: 32px
	}
}

@media(max-width:1023px) {
	.lang-ar #parameter .container section .left {
		width: 100%;
		padding-right: 0
	}
}

@media(max-width:1023px) {
	#parameter .container section .left .title {
		margin-bottom: 20px
	}
}

#parameter .container section .right {
	width: 976px;
	display: flex;
	flex-direction: column
}

@media(min-width:1024px) and (max-width:1399px) {
	#parameter .container section .right {
		width: 664px
	}
}

@media(max-width:1023px) {
	#parameter .container section .right {
		width: 100%
	}
}

@media(min-width:720px) and (max-width:1023px) {
	#parameter .container section .right {
		width: 100%
	}
}

#parameter .container section .right .wrapper {
	display: flex;
	flex-direction: column;
	margin-bottom: 32px
}

#parameter .container section .right .wrapper:last-child {
	margin-bottom: 0
}

#parameter .container section .right .remark {
	margin-top: 12px
}

#parameter .container section .right .desc.in,#parameter .container section .right .remark.in {
	display: initial
}

#parameter .container section .right .link {
	color: #2dc84d;
	cursor: pointer;
	border-bottom: 1px solid #2dc84d;
	white-space: nowrap
}

@media(max-width:1023px) {
	#parameter .container .size {
		padding-bottom: 64px
	}
}

#parameter .container .size .right {
	position: relative
}

#parameter .container .size .right .desc {
	position: relative;
	z-index: 2
}

#parameter .container .size .right .belowImg {
	z-index: 1
}

@media(min-width:1024px) {
	#parameter .container .size .right .belowImg {
		width: 674px;
		height: 356px;
		margin-top: 20px;
		margin-left: calc(40% - 300px)
	}
}

@media(max-width:1023px) {
	#parameter .container .size .right .belowImg {
		width: 100%;
		height: auto;
		top: 0;
		left: 0
	}
}

#parameter .container .size .right .remark {
	position: relative;
	z-index: 2
}

#parameter .container .memory .remark {
	margin-top: 12px
}

#parameter .container .display .aboveImg {
	width: 417px;
	height: 195px;
	margin-bottom: 64px
}

@media(max-width:1023px) {
	#parameter .container .display .aboveImg {
		width: 100%;
		height: auto;
		margin-bottom: 32px
	}
}

#parameter .container .network {
	word-break: break-all
}

#parameter .container .connectivity .right .descsection1 {
	margin-bottom: 0
}

#parameter .container .system .remark-wrapper {
	margin-top: 10px
}

#parameter .container .ncc .flex-wrapper {
	display: flex;
	align-items: center
}

@media(max-width:1023px) {
	#parameter .container .ncc .flex-wrapper {
		display: block
	}
}

#parameter .container .ncc .flex-wrapper .ncc-icon {
	width: 60px;
	height: 60px;
	margin-right: 32px
}

@media(max-width:1023px) {
	#parameter .container .ncc .flex-wrapper .ncc-icon {
		margin-right: 0;
		margin-bottom: 12px
	}
}

#parameter .overview-title {
	font-family: OPPOSans-Regular;
	font-weight: 400;
	font-size: 36px;
	line-height: 56px;
	letter-spacing: -.18px
}

@media(min-width:1024px) and (max-width:1399px) {
	#parameter .overview-title {
		font-size: 28px;
		line-height: 44px;
		letter-spacing: -.1px
	}
}

@media(max-width:1023px) {
	#parameter .overview-title {
		font-size: 28px;
		line-height: 44px;
		letter-spacing: -.1px
	}
}

#parameter .overview-desc {
	font-family: OPPOSans-Bold;
	font-weight: 400;
	font-size: 20px;
	line-height: 40px;
	letter-spacing: -.12px
}

@media(min-width:1024px) and (max-width:1399px) {
	#parameter .overview-desc {
		font-size: 16px;
		line-height: 36px;
		letter-spacing: -.1px
	}
}

@media(max-width:1023px) {
	#parameter .overview-desc {
		font-size: 16px;
		line-height: 36px;
		letter-spacing: -.1px
	}
}

#parameter .overview-color {
	font-family: OPPOSans-Regular;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0
}

@media(max-width:1023px) {
	#parameter .overview-color {
		font-size: 16px;
		line-height: 28px;
		letter-spacing: -.1px
	}
}

#parameter .remark {
	font-family: OPPOSans-Regular;
	font-weight: 400;
	font-size: 12px;
	line-height: 24px;
	letter-spacing: -.05px
}

#parameter .title {
	font-family: OPPOSans-Regular;
	font-weight: 400;
	font-size: 28px;
	line-height: 44px;
	letter-spacing: -.1px
}

#parameter .desc {
	font-family: OPPOSans-Regular;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: -.1px;
	padding: 5px 0
}

#parameter .desc-title {
	font-family: OPPOSans-Bold;
	font-weight: 400;
	font-size: 16px;
	line-height: 36px;
	letter-spacing: -.1px
}

#parameter .link {
	font-family: OPPOSans-Regular;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -.06px
}

#online-store {
	color: #000;
	position: fixed;
	z-index: 999;
	top: -999vh;
	top: calc(-999 * var(--vh,1vh));
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

#online-store .mask {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.65);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
	transition: opacity .5s ease
}

#online-store .store-container {
	position: relative;
	z-index: 2;
	background-color: #fff;
	width: 1312px;
	height: 720px;
	opacity: 0;
	-webkit-transform: translateY(25%);
	transform: translateY(25%);
	transition-delay: .25s;
	transition: opacity .5s ease,-webkit-transform .5s ease;
	transition: transform .5s ease,opacity .5s ease;
	transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

@media(min-width:1440px) and (max-width:1600px) {
	#online-store .store-container {
		width: 1312px;
		height: 625px
	}
}

@media(min-width:1024px) and (max-width:1439px) {
	#online-store .store-container {
		width: 896px;
		height: 580px
	}
}

@media(min-width:768px) and (max-width:1439px) {
	#online-store .store-container {
		width: 720px;
		height: 850px
	}
}

@media(max-width:767px) {
	#online-store .store-container {
		width: 320px;
		height: 620px
	}
}

@media(max-width:1023px) {
	#online-store .store-container {
		max-height: 100vh;
		max-height: calc(100 * var(--vh,1vh))
	}
}

#online-store .store-container .store-page {
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: scroll;
	scrollbar-width: 4px;
	scrollbar-color: #2ec84d
}

#online-store .store-container .store-page::-webkit-scrollbar {
	width: 4px
}

#online-store .store-container .store-page::-webkit-scrollbar-thumb {
	background-color: #2ec84d
}

#online-store .store-container .store-page .close-button {
	position: absolute;
	z-index: 3;
	top: 32px;
	right: 32px;
	width: 14px;
	height: 14px;
	cursor: pointer
}

#online-store .store-container .store-page .title-area {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: calc(100% - 4px);
	height: 146px;
	background-color: #fff;
	text-align: center;
	padding-top: 70px
}

#online-store .store-container .store-page .title-area p {
	font-size: 28px;
	line-height: 44px;
	letter-spacing: -.1;
	font-family: OPPOSans-Bold
}

#online-store .store-container .store-page .store-content {
	position: relative;
	z-index: 1;
	width: 100%;
	margin-top: 146px;
	margin-bottom: 28px
}

#online-store .store-container .store-page .store-content .store-list {
	width: 1088px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center
}

@media(min-width:1024px) and (max-width:1439px) {
	#online-store .store-container .store-page .store-content .store-list {
		width: 664px
	}
}

@media(min-width:768px) and (max-width:1439px) {
	#online-store .store-container .store-page .store-content .store-list {
		width: 532px
	}
}

@media(max-width:767px) {
	#online-store .store-container .store-page .store-content .store-list {
		width: 280px
	}
}

#online-store .store-container .store-page .store-content .store-list .store-title {
	flex: 100%;
	text-align: center;
	margin-bottom: 20px
}

#online-store .store-container .store-page .store-content .store-list .store {
	width: 192px;
	height: 144px;
	background-color: rgba(0,0,0,0.04);
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .3s ease;
	-webkit-clip-path: inset(0 round 50%);
	clip-path: inset(0 round 50%);
	overflow: hidden
}

.show#online-store .store-container .store-page .store-content .store-list .store {
	-webkit-clip-path: inset(0 round 0);
	clip-path: inset(0 round 0);
	transition: -webkit-clip-path .4s ease .4s;
	transition: clip-path .4s ease .4s;
	transition: clip-path .4s ease .4s,-webkit-clip-path .4s ease .4s
}

#online-store .store-container .store-page .store-content .store-list .store img {
	width: 118px;
	height: 80px;
	transition: -webkit-transform .3s ease;
	transition: transform .3s ease;
	transition: transform .3s ease,-webkit-transform .3s ease
}

@media(min-width:1440px) {
	#online-store .store-container .store-page .store-content .store-list .store:not(:nth-of-type(5n+1)) {
		margin-left: 32px
	}
}

@media(min-width:1024px) and (max-width:1439px) {
	#online-store .store-container .store-page .store-content .store-list .store {
		width: 200px;
		height: 150px
	}

	#online-store .store-container .store-page .store-content .store-list .store:not(:nth-of-type(3n+1)) {
		margin-left: 32px
	}

	#online-store .store-container .store-page .store-content .store-list .store img {
		width: 122px;
		height: 82px
	}
}

@media(min-width:768px) and (max-width:1439px) {
	#online-store .store-container .store-page .store-content .store-list .store {
		width: 155px;
		height: 116px
	}

	#online-store .store-container .store-page .store-content .store-list .store:not(:nth-of-type(3n+1)) {
		margin-left: 32px
	}

	#online-store .store-container .store-page .store-content .store-list .store img {
		width: 95px;
		height: 64px
	}
}

@media(max-width:767px) {
	#online-store .store-container .store-page .store-content .store-list .store {
		width: 132px;
		height: 96px
	}

	#online-store .store-container .store-page .store-content .store-list .store:not(:nth-of-type(2n+1)) {
		margin-left: 16px
	}

	#online-store .store-container .store-page .store-content .store-list .store img {
		width: 98px;
		height: 66px
	}
}

#online-store .store-container .store-page .store-content .store-list .store:hover,#online-store .store-container .store-page .store-content .store-list .store :active {
	background-color: rgba(0,0,0,0.01)
}

#online-store .store-container .store-page .store-content .store-list .store:hover img,#online-store .store-container .store-page .store-content .store-list .store :active img {
	-webkit-transform: scale(.9);
	transform: scale(.9)
}

#online-store .store-container .store-page .store-content .store-list:not(:first-child) {
	margin-top: 6px
}

#online-store.show {
	top: 0
}

#online-store.show .mask {
	opacity: 1
}

#online-store.show .store-container {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0)
}

#navbar {
	position: -webkit-sticky;
	position: sticky;
	top: -1px;
	background-color: #fff;
	color: #000;
	cursor: default;
	height: 60px;
	opacity: 1;
	width: 100%;
	z-index: 10;
	border: 1px solid rgba(0,0,0,0.1);
	border-left: none;
	border-right: 0
}

@media(max-width:1023px) {
	#navbar {
		height: 50px
	}
}

#navbar.no-border-btm {
	border-bottom: transparent
}

#navbar.sticked {
	transition: background-color .3s ease;
	background-color: #fff
}[data-active-selector]#navbar.sticked {
	transition: none
}[data-theme='dark']:not([data-active-selector])#navbar.sticked,[data-theme='dark'].colorful-selector#navbar.sticked {
	background-color: #000
}

#navbar.sticked .sub-container {
	transition: opacity .5s ease-in-out,background-color .3s ease
}[data-theme='dark']:not([data-active-selector])#navbar,[data-theme='dark'].colorful-selector#navbar {
	background-color: #000;
	border-color: rgba(255,255,255,0.1);
	color: #fff
}

#navbar ul,#navbar li {
	align-items: center;
	display: flex;
	justify-content: center
}

#navbar li {
	font-family: OPPOSans-Regular;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: .05px;
	line-height: 20px
}

@media(min-width:1024px) {
	#navbar li {
		font-size: 12px
	}
}

#navbar li .a {
	cursor: pointer;
	white-space: nowrap;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none
}

#navbar li .a:hover {
	opacity: 1
}

#navbar li .a,#navbar li span {
	align-items: center;
	color: inherit;
	display: flex;
	font-size: inherit;
	opacity: .8;
	transition: opacity .3s ease,color .3s ease
}

#navbar .container {
	display: flex;
	height: 100%;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 14.4rem;
	padding: 0 .6rem;
	position: relative;
	width: 100%
}

@media(min-width:1024px) and (max-width:1399px) {
	#navbar .container {
		padding: 0 .5rem
	}
}

@media(max-width:1023px) {
	#navbar .container {
		padding: 0 20px
	}
}

@media(max-width:1023px) and (min-width:720px) and (max-width:1023px) {
	#navbar .container {
		padding: 0 40px
	}
}

#navbar .sub-container {
	opacity: 0;
	pointer-events: none;
	position: relative;
	top: 1px;
	width: 100%;
	height: 40px;
	background-color: #fff;
	padding: 8px 0;
	pointer-events: none;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	transition: backround-color .3s ease;
	display: flex;
	justify-content: center
}[data-theme='dark']#navbar .sub-container {
	background-color: #000;
	border-color: rgba(255,255,255,0.1);
	color: #fff
}

#navbar .sub-container.visible {
	opacity: 1;
	pointer-events: auto
}

#navbar .sub-container .links-container {
	max-width: 100%;
	overflow-x: scroll;
	display: flex;
	justify-content: flex-start;
	scrollbar-width: none
}

#navbar .sub-container .links-container::-webkit-scrollbar {
	display: none
}

#navbar .sub-container .links-container .link {
	margin-right: 18px
}

#navbar .sub-container .links-container .link:first-child {
	padding-left: 20px
}

@media(min-width:720px) and (max-width:1023px) {
	#navbar .sub-container .links-container .link:first-child {
		padding-left: 40px
	}
}

#navbar .sub-container .links-container .link:last-child {
	margin: 0;
	padding-right: 20px
}

@media(min-width:720px) and (max-width:1023px) {
	#navbar .sub-container .links-container .link:last-child {
		padding-right: 40px
	}
}

#navbar .sub-container .links-container .link .active {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .sub-container .scroll-mask {
	position: absolute;
	top: 0;
	width: 20px;
	height: 100%;
	z-index: 2
}

@media(min-width:720px) and (max-width:1023px) {
	#navbar .sub-container .scroll-mask {
		width: 40px
	}
}

#navbar .sub-container .mask-left {
	left: 0
}

#navbar .sub-container .mask-right {
	right: 0
}

#navbar .sub-container .mask-light {
	opacity: 1;
	transition: opacity .3s ease .3s
}[data-theme='dark']#navbar .sub-container .mask-light {
	opacity: 0;
	transition: none
}

#navbar .sub-container .mask-light.mask-left {
	background: linear-gradient(to left,rgba(255,255,255,0),#fff)
}

#navbar .sub-container .mask-light.mask-right {
	background: linear-gradient(to right,rgba(255,255,255,0),#fff)
}

#navbar .sub-container .mask-dark {
	opacity: 0;
	transition: none
}[data-theme='dark']#navbar .sub-container .mask-dark {
	opacity: 1;
	transition: opacity .3s ease .3s
}

#navbar .sub-container .mask-dark.mask-left {
	background: linear-gradient(to left,rgba(0,0,0,0),#000)
}

#navbar .sub-container .mask-dark.mask-right {
	background: linear-gradient(to right,rgba(0,0,0,0),#000)
}

#navbar .sub-container[data-active="1"] .link:nth-child(1) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .sub-container[data-active="2"] {
	opacity: 1;
	pointer-events: auto
}

#navbar .sub-container[data-active="2"] .link:nth-child(2) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .sub-container[data-active="3"] {
	opacity: 1;
	pointer-events: auto
}

#navbar .sub-container[data-active="3"] .link:nth-child(3) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .sub-container[data-active="4"] {
	opacity: 1;
	pointer-events: auto
}

#navbar .sub-container[data-active="4"] .link:nth-child(4) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .sub-container[data-active="5"] {
	opacity: 1;
	pointer-events: auto
}

#navbar .sub-container[data-active="5"] .link:nth-child(5) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .sub-container[data-active="6"] {
	opacity: 1;
	pointer-events: auto
}

#navbar .sub-container[data-active="6"] .link:nth-child(6) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .sub-container[data-active="7"] {
	opacity: 1;
	pointer-events: auto
}

#navbar .sub-container[data-active="7"] .link:nth-child(7) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .sub-container[data-active="8"] {
	opacity: 1;
	pointer-events: auto
}

#navbar .sub-container[data-active="8"] .link:nth-child(8) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .sub-container[data-active="9"] {
	opacity: 1;
	pointer-events: auto
}

#navbar .sub-container[data-active="9"] .link:nth-child(9) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .mask {
	background-color: rgba(0,0,0,0.7);
	transition: background-color .3s ease
}

#navbar .indicator .arrow {
	fill: #000;
	transition: fill .3s ease
}
/*[data-theme='dark']:not([data-active-selector])#navbar .indicator .arrow,[data-theme='dark'].colorful-selector#navbar .indicator .arrow {
	fill: #fff
}*/

#navbar .products,#navbar .links,#navbar .buttons {
	align-items: center;
	min-width: 0
}

#navbar .link:not(:first-child),#navbar .button:not(:first-child) {
	margin-left: 18px
}

@media(min-width:1400px) and (max-width:1799px) {
	#navbar .link:not(:first-child),#navbar .button:not(:first-child) {
		margin-left: 15px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	#navbar .link:not(:first-child),#navbar .button:not(:first-child) {
		margin-left: 12px
	}
}

@media(max-width:1023px) {
	#navbar .link:not(:first-child),#navbar .button:not(:first-child) {
		margin-left: 0
	}
}

@media(max-width:1023px) {
	#navbar .link .a.default,#navbar .product .a.active {
		display: none
	}
}

@media(max-width:1023px) {
	#navbar .products,#navbar .links {
		align-items: stretch;
		flex-direction: column;
		left: 0;
		overflow: hidden;
		position: absolute;
		top: 100%;
		margin-top: 1px;
		width: 100%;
		visibility: hidden
	}

	#navbar .products>:last-child>:last-child,#navbar .links>:last-child>:last-child,#navbar .products>:last-child>:last-child>:last-child,#navbar .links>:last-child>:last-child>:last-child {
		border-bottom-color: transparent
	}

	#navbar .products li,#navbar .links li {
		background-color: #fff;
		justify-content: stretch;
		padding: 0 20px;
		position: relative;
		-webkit-transform: translateY(-400%);
		transform: translateY(-400%);
		-webkit-transform: translateY(calc(-100% * var(--links-n,4)));
		transform: translateY(calc(-100% * var(--links-n,4)));
		transition: -webkit-transform .3s ease;
		transition: transform .3s ease;
		transition: transform .3s ease,-webkit-transform .3s ease
	}[	data-theme='dark']:not([data-active-selector])#navbar .products li,[data-theme='dark']:not([data-active-selector])#navbar .links li,[data-theme='dark'].colorful-selector#navbar .products li,[data-theme='dark'].colorful-selector#navbar .links li {
		background-color: #000
	}

	#navbar .products .a,#navbar .links .a {
		border-bottom: 1px solid rgba(0,0,0,0);
		display: flex;
		justify-content: center;
		padding: 27px 0;
		text-align: center;
		width: 100%
	}[	data-theme='dark']:not([data-active-selector])#navbar .products .a,[data-theme='dark']:not([data-active-selector])#navbar .links .a,[data-theme='dark'].colorful-selector#navbar .products .a,[data-theme='dark'].colorful-selector#navbar .links .a {
		background-color: #000;
		border-bottom: 1px solid rgba(255,255,255,0.1)
	}
}

@media(min-width:720px) and (max-width:1023px) {
	#navbar .products li,#navbar .links li {
		padding: 0 40px
	}
}

#navbar .products {
	flex: 1 1 0;
	justify-content: flex-start
}

@media(max-width:1023px) {
	#navbar .products {
		z-index: 3
	}
}

#navbar .products .active {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .products .divider {
	margin: 0 18px
}

@media(min-width:1400px) and (max-width:1799px) {
	#navbar .products .divider {
		margin: 0 15px
	}
}

@media(min-width:1024px) and (max-width:1399px) {
	#navbar .products .divider {
		margin: 0 12px
	}
}

@media(max-width:1023px) {
	#navbar .products .divider {
		display: none
	}
}

#navbar .products .divider .a {
	cursor: default
}

#navbar .links {
	flex: 3 3 0;
	justify-content: center
}

@media(min-width:1024px) {
	#navbar .links {
		opacity: 0
	}
}

@media(max-width:1023px) {
	#navbar .links {
		z-index: 4
	}
}

#navbar .links .default {
	pointer-events: none
}

#navbar .buttons {
	flex: 1 1 0;
	justify-content: flex-end
}

#navbar .buttons .button {
	overflow: hidden;
	position: relative;
	border-radius: 2px
}

#navbar .buttons .button .a {
	font-family: OPPOSans-Bold;
	font-weight: 400;
	background-color: #2dc84d;
	color: #fff;
	font-size: 12px;
	height: 30px;
	letter-spacing: 0;
	line-height: 1;
	opacity: 1;
	padding: 0 18px
}

@media(max-width:1023px) {
	#navbar .buttons .button .a {
		height: 32px;
		padding: 0 12px;
		font-size: 12px;
		min-width: 64px
	}
}

#navbar .links[data-active=''] .default,#navbar .links:not([data-active]) .default {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .links[data-active="1"]>li:nth-child(1) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .links[data-active="2"]>li:nth-child(2) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .links[data-active="3"]>li:nth-child(3) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .links[data-active="4"]>li:nth-child(4) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .links[data-active="5"]>li:nth-child(5) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .links[data-active="6"]>li:nth-child(6) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .links[data-active="7"]>li:nth-child(7) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .links[data-active="8"]>li:nth-child(8) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .links[data-active="9"]>li:nth-child(9) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

#navbar .links[data-active="10"]>li:nth-child(10) .a {
	opacity: 1;
	pointer-events: none;
	font-family: OPPOSans-Bold;
	font-weight: 400
}

@media(max-width:1023px) {
	#navbar .mask {
		height: 100vh;
		height: calc(100 * var(--vh,1vh));
		left: 0;
		position: absolute;
		top: 7vh;
		width: 100%;
		z-index: 0;
		display: none
	}

	#navbar .indicator {
		height: 24px;
		margin-left: 5px
	}

	#navbar .indicator .arrow {
		width: 14px;
		height: 14px;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		transition: -webkit-transform .3s ease;
		transition: transform .3s ease;
		transition: transform .3s ease,-webkit-transform .3s ease
	}

	#navbar .selector {
		align-items: center;
		display: flex;
		justify-content: flex-start
	}

	#navbar .selector li * {
		opacity: 1;
		font-family: OPPOSans-Bold;
		font-weight: 400
	}

	#navbar .selector[disabled] .indicator {
		display: none
	}[	data-active-selector]#navbar .mask {
		display: block
	}[	data-active-selector='product']#navbar .product-selector .indicator .arrow {
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg)
	}[	data-active-selector='product']#navbar .products {
		visibility: visible
	}[	data-active-selector='product']#navbar .products>li {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}[	data-active-selector='link']#navbar .link-selector .indicator .arrow {
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg)
	}[	data-active-selector='link']#navbar .links {
		visibility: visible
	}[	data-active-selector='link']#navbar .links>li {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	#navbar .product-selector,#navbar .buttons {
		flex: 0 0 85px
	}

	#navbar .link-selector {
		flex: 1 1 0;
		justify-content: center;
		margin: 0 5px
	}
}

@media(min-width:720px) and (max-width:1023px) {
	#navbar .product-selector,#navbar .buttons {
		flex: 0 0 170px
	}
}

#oc-header.fixed {
	position: absolute
}

@media(min-width:1024px) {
	#oc-wrapper {
		padding-top: .1px
	}
}

@media(min-width:1024px) {
	.zn--navbar {
		margin-top: 80px
	}
}

#oc-container .zn--navbar {
	margin-top: 0
}

@media(min-width:1024px) and (max-width:1439px) {
	.zn--navbar {
		margin-top: 64px
	}
}

.zn--wrapper {
	position: relative
}

.lang-ar #main-wrapper {
	text-align: right;
	direction: rtl
}

#main-wrapper img[data-srcset] {
	opacity: 0
}

#main-wrapper img[data-srcset].loaded {
	opacity: 1
}

#main-wrapper .main {
	margin-top: -60px;
	padding-top: 60px
}

@media(max-width:1023px) {
	#main-wrapper .main {
		margin-top: -50px;
		padding-top: 50px
	}
}

#main-wrapper #navbar .sub-container .links-container .std a {
	opacity: 1
}[data-theme='dark']:not([data-active-selector])#navbar,[data-theme='dark'].colorful-selector#navbar {
	background-color: #fff;
	border-color: rgba(0,0,0,0.1);
	color: #000
}[data-theme='dark']:not([data-active-selector])#navbar.sticked {
	background-color: #fff
}

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

.s-hit {
	width: 5rem
}

#parameter .container .ncc .right {
	display: flex;
	flex-direction: inherit
}

.ncc .right img {
	opacity: 1;
	display: inline-block;
	vertical-align: middle;
	width: 60px;
	height: 60px;
	margin-right: 32px
}

.overview .overview-desc li {
	list-style: disc
}

@media(max-width:767px) {
	.s-hit {
		width: 3rem
	}
	#navbar .mask{
		top: 8vh;
	}
}