#tl-wrapper .swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
	background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20800'%3e%3cpath%20fill='%231e1e1e'%20d='M278.4,726.1c-3.7,0-7.3-1.2-10.4-3.7c-6.9-5.7-7.8-16-2.1-22.9l246.1-295.3L264.7,102.4%20c-5.7-6.9-4.7-17.1,2.3-22.8c6.9-5.7,17.1-4.7,22.8,2.3L545.6,394c4.9,6,4.9,14.7-0.1,20.7L290.8,720.3%20C287.6,724.1,283,726.1,278.4,726.1L278.4,726.1z%20M278.4,726.1'/%3e%3c/svg%3e") !important;
}

#tl-wrapper .swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
	background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20800'%3e%3cpath%20fill='%231e1e1e'%20d='M530.8,75.8c3.7,0,7.4,1.2,10.4,3.7c6.9,5.7,7.9,15.9,2.2,22.8L298.9,399L548,699.5%20c5.7,6.9,4.8,17.1-2.1,22.8c-6.9,5.7-17.1,4.8-22.8-2.1L265.4,409.4c-5-6-5-14.7,0-20.7l253-307%20C521.5,77.9,526.1,75.9,530.8,75.8L530.8,75.8z%20M530.8,75.8'/%3e%3c/svg%3e") !important;
}

#tl-overview-kv {
	/*height: 100vh;*/
	padding-top: 94px;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-direction: reverse;
	-webkit-box-orient: horizontal;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	overflow: hidden;
}

#tl-overview-kv-container {
	-webkit-box-flex: 0;
	-ms-flex: 0 3 50%;
	flex: 0 3 50%;
	padding-bottom: 200px;
}

.tl-overview-kv-des {
	height: calc(100vh - 94px - 158px);
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
}

_:-ms-lang(x),
.tl-overview-kv-des {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

#tl-overview-kv .tl-h1 {
	font-size: calc(4.66019vw + 30.52427px);
	line-height: 1em;
	margin-top: 0
}

_:-ms-lang(x),
#tl-overview-kv .tl-h1 {
	margin-bottom: 30px;
}

#tl-overview-kv-composition-trigger {
	position: absolute;
	top: 100vh;
}

.tl-scroll-down {
	width: 4px;
	height: 36px;
	overflow: hidden;
	border-radius: 2px;
	background: #f6f4f5;
	display: inline-block;
	position: relative;
	vertical-align: middle
}

.tl-scroll-down::after {
	content: '';
	display: block;
	background: #1e2022;
	width: 4px;
	height: 36px;
	border-radius: 2px;
	position: absolute;
	bottom: 100%;
	vertical-align: middle;
	-webkit-animation: tl-scroll-down 1.5s cubic-bezier(.7, 0, .3, 1) infinite;
	animation: tl-scroll-down 1.5s cubic-bezier(.7, 0, .3, 1) infinite
}

.tl-scroll-down-caption {
	display: inline-block;
	line-height: 36px;
	padding-left: 10px;
	height: 36px;
	font-weight: 800;
	font-size: calc(2.01vw + -9px);
	letter-spacing: .15em !important
}

@-webkit-keyframes tl-scroll-down {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0)
	}

	to {
		-webkit-transform: translate(0, 200%);
		transform: translate(0, 200%)
	}
}

@keyframes tl-scroll-down {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0)
	}

	to {
		-webkit-transform: translate(0, 200%);
		transform: translate(0, 200%)
	}
}

#tl-overview-kv-logo {
	width: 100%;
	-webkit-box-flex: 0;
	-ms-flex-positive: 0;
	flex-grow: 0;
	max-width: 80%
}

#tl-overview-kv-composition {
	-ms-flex-item-align: top;
	align-self: top;
	/*flex-grow: 2;*/
	position: relative;
	width: 40%;
}

#tl-overview-kv-composition img {
	position: absolute;
	bottom: 0
}

#tl-overview-kv-composition::after {
	display: block;
	padding-top: 162.36802%;
	content: '';
	z-index: 1
}

#tl-overview-kv-composition.tl-waiting img {
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0)
}

#tl-overview-kv-composition.tl-preloaded #tl-overview-kv-composition-1 {
	-webkit-animation: tl-overview-intro-appear 2s .7s cubic-bezier(.33, .33, .4, 1) forwards;
	animation: tl-overview-intro-appear 2s .7s cubic-bezier(.33, .33, .4, 1) forwards;
}

#tl-overview-kv-composition.tl-preloaded #tl-overview-kv-composition-2 {
	-webkit-animation: tl-overview-intro-appear 2s .5s cubic-bezier(.33, .33, .4, 1) forwards;
	animation: tl-overview-intro-appear 2s .5s cubic-bezier(.33, .33, .4, 1) forwards;
}

#tl-overview-kv-composition.tl-preloaded #tl-overview-kv-composition-3 {
	-webkit-animation: tl-overview-intro-appear 2.4s .5s cubic-bezier(.33, .33, .4, 1) forwards;
	animation: tl-overview-intro-appear 2.4s .5s cubic-bezier(.33, .33, .4, 1) forwards;
}


/* .tl-move img{
	animation-fill-mode: backwards!important;
} */

#tl-overview-kv-composition-1 {
	z-index: 2;
	width: 53.0165%;
	height: 88.0631%;
	left: 0;
	top: 14%;
}

#tl-overview-kv-composition-2 {
	z-index: 4;
	width: 52.7148%;
	height: 86.6696%;
	left: 27.5%;
	top: 27%
}

#tl-overview-kv-composition-3 {
	z-index: 3;
	width: 50.3015%;
	height: 81.3747%;
	right: 0;
	top: 0;
}

@-webkit-keyframes tl-overview-intro-appear {
	0% {
		-webkit-transform: translate(0, 100%, 0);
		transform: translate(0, 100%, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes tl-overview-intro-appear {
	0% {
		-webkit-transform: translate(0, 100%, 0);
		transform: translate(0, 100%, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

#tl-product-menu {
	height: 65px;
	line-height: 65px;
	background: #f6f4f5;
	/*position: -webkit-sticky;*/
	/*position: sticky;*/
	top: 0;
	z-index: 999;
	width: 100%;
	font-size: calc(.12945vw + 13.51456px)
}

#tl-product-menu #tl-product-menu-logo {
	font-weight: 800;
	text-transform: uppercase
}

#tl-product-menu>div {
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

#tl-product-menu a:link,
#tl-product-menu a:visited {
	color: #1e2022;
	display: inline-block;
	height: 65px;
	padding: 0 .25em;
	margin: 0 .25em;
	text-decoration: none
}

#tl-product-menu a:link.tl-active,
#tl-product-menu a:visited.tl-active {
	color: #ed3c40
}

#tl-product-menu a:hover {
	color: #ed3c40
}

#tl-tvc {
	background: #f6f4f5;
	height: calc(100vh - 65px);
	position: relative;
	font-size: 0;
}

#tl-tvc .tl-container {
	position: relative;
	z-index: 20
}

#tl-tvc .h6.tl-link {
	display: block;
	margin-top: 1em;
	font-weight: 400;
	position: absolute;
	width: 100%;
	bottom: 80px;
	text-align: center;
	z-index: 40
}

#tl-tvc .h6.tl-link span {
	letter-spacing: 0 !important;
	vertical-align: middle;
	font-size: calc(1.036vw + 12.10880px);
}

.tl-svg-play {
	height: calc(1.036vw + 12.10880px);
}

_:-ms-input-placeholder,
:root .tl-svg-play {
	width: calc(1.036vw + 12.10880px);
}

#tl-tvc video {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: 10
}

@supports((-o-object-fit: cover) or (object-fit: cover)) {
	#tl-tvc video {
		width: 100%;
		height: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		position: relative;
		z-index: 10
	}

	#tl-tvc {
		height: auto;
		position: relative;
	}
}

#tl-tvc #tl-tvc-slogan.tl-h1 {
	font-size: calc(4.66019vw + 30.52427px);
	letter-spacing: .05em !important;
	color: #fff;
	mix-blend-mode: exclusion;
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 66vh;
	text-transform: uppercase;
	z-index: 30;
	width: 100%;
	text-align: center
}

#tl-overview-design-halo {
	height: 200vh;
	position: relative;
	z-index: 7
}

#tl-overview-design-halo-container {
	height: calc(100vh - 65px);
	top: 65px;
	/*position: -webkit-sticky;
	position: sticky;*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

#tl-overview-design-halo-composition {
	height: 75vh;
	width: 75vh;
	max-width: 50vw;
	max-height: 50vw;
	border-radius: 50%;
	-webkit-transform: scale3d(.5, .5, 1);
	transform: scale3d(.5, .5, 1);
	overflow: hidden;
	position: relative
}

#tl-overview-design-halo-composition img {
	position: absolute;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate3d(-11%, -30%, 0);
	transform: translate3d(-11%, -30%, 0);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	width: 340%;
	height: 340%;
	top: 0;
	left: 0
}

#tl-overview-design-halo-composition img.tl-overview-circle {
	position: absolute;
	width: 100%;
	height: 100%;
	transform: none;
	z-index: 111;
}

.tl-overview-design-halo-title {
	position: absolute;
	height: calc(100vh - 65px);
	width: 35%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.tl-overview-design-halo-description {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	text-align: center;
	margin-top: calc(((100vh - 65px) - 75vh) * -0.5 + 80px);
}

@media only screen and (max-aspect-ratio: 3/2) {
	.tl-overview-design-halo-description {
		margin-top: calc(((100vh - 65px) - 50vw) * -0.5 + 80px);
	}
}

.tl-overview-design-halo-description p {
	display: block;
	width: 75%;
	padding-bottom: 200px;
	margin-top: 0 !important;
}

.tl-overview-design-halo-gap {
	width: 100vh;
	-ms-flex-negative: 0;
	flex-shrink: 0
}

#tl-overview-design-colors {
	position: relative;
	z-index: 5;
}

#tl-overview-design-colors .tl-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	/*	align-items: center;*/
	height: auto;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	z-index: 7;
	width: 100%;
}

#tl-wrapper .tl-overview-design-colors p {
	-webkit-margin-before: .5em;
	margin-block-start: .5em;
}

#tl-overview-design-colors-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 0;
	width: calc(82.848vw + -10.68160px);
	margin: 0 auto;
}

#tl-overview-design-colors-container>* {
	-ms-flex-negative: 1;
	flex-shrink: 1;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1
}

#tl-overview-design-colors-container h2 {
	margin: .2em 0 0 0
}

#tl-overview-design-colors .swiper-container {
	width: 90%;
	/*overflow: hidden;*/
	/*z-index: 0;*/
}

.tl-overview-design-colors-warapper {
	position: relative;
	padding-bottom: 40px;
	overflow: hidden;
	margin-bottom: 30px;
}

#tl-overview-design-colors ul {
	list-style: none;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	font-weight: 700;
	line-height: 2.4em;
	text-align: right;
	width: auto;
	margin: 0 auto;
	height: auto;
	/*overflow: hidden;*/
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
	left: 1% !important;
	background-color: #e0e0e0;
	border-radius: 50%;
	padding: 1.3vw;
	outline: none;
	width: 2.16vw;
	height: 2.16vw;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
	right: 1% !important;
	background-color: #e0e0e0;
	border-radius: 50%;
	padding: 1.3vw;
	outline: none;
	width: 2.16vw;
	height: 2.16vw;
}

_:-ms-input-placeholder,
:root .tl-overview-design-colors .swiper-button-prev,
.tl-overview-design-colors .swiper-button-next {
	height: calc(25vw * 1.63);
	transform: translateY(-50%);
	width: 5.1vw;
	z-index: 199;
	border-radius: 0;
	background-color: #fff;
	top: 49%;
}

_:-ms-input-placeholder,
:root .tl-overview-design-colors .swiper-button-prev {
	left: 0 !important;
}

_:-ms-input-placeholder,
:root .tl-overview-design-colors .swiper-button-next {
	right: 0 !important;
}

#tl-overview-design-colors .swiper-pagination-bullets {
	width: 100%;
	bottom: 1.5%;
}

#tl-overview-design-colors .swiper-pagination-bullet {
	margin: 0 20px;
	vertical-align: text-bottom;
}

#tl-overview-design-colors ul .tl-active {
	-webkit-transform: scale(1.6, 1.6);
	transform: scale(1.6, 1.6);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%
}

.tl-overview-design-colors li {
	width: 20%;
	height: calc(24vw * 1.6);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	margin-right: 5px;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: -webkit-transform 2.5s cubic-bezier(0, .6, .3, 1);
	transition: -webkit-transform 2.5s cubic-bezier(0, .6, .3, 1);
	transition: transform 2.5s cubic-bezier(0, .6, .3, 1);
	transition: transform 2.5s cubic-bezier(0, .6, .3, 1), -webkit-transform 2.5s cubic-bezier(0, .6, .3, 1);
}

_:-ms-input-placeholder,
:root .tl-overview-design-colors li {
	transform: translateY(0);
}


.tl-overview-design-colors.tl-animated li {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}

#tl-overview-design-colors li:last-child {
	margin-right: 0px;
}

#tl-overview-design-colors li.lazyloaded:nth-of-type(1) {
	background: url(../../images/tl/overview/design/mate30-pro-5g-bgimage-colour-purple.jpg);
	background-size: cover;
	background-position: center;
}

#tl-overview-design-colors li.lazyloaded:nth-of-type(2) {
	background: url(../../images/tl/overview/design/mate30-pro-5g-bgimage-colour-silver.jpg);
	background-size: cover;
	background-position: center;
}

#tl-overview-design-colors li.lazyloaded:nth-of-type(3) {
	background: url(../../images/tl/overview/design/mate30-pro-5g-bgimage-colour-green-2.jpg);
	background-size: cover;
	background-position: center;
}

#tl-overview-design-colors li.lazyloaded:nth-of-type(4) {
	background: url(../../images/tl/overview/design/mate30-pro-5g-bgimage-colour-black.jpg);
	background-size: cover;
	background-position: center;
}

/*#tl-overview-design-colors li.lazyloaded:nth-of-type(5) {
	background: url(../../images/tl/overview/design/mate30-pro-5g-bgimage-colour-green-2.jpg);
	background-size: cover;
	background-position: center;
}

#tl-overview-design-colors li.lazyloaded:nth-of-type(6) {
	background: url(../../images/tl/overview/design/mate30-pro-5g-bgimage-colour-black.jpg);
	background-size: cover;
	background-position: center;
}*/

.tl-overview-design-colors-container {
	width: 100%;
	height: 100%;
	text-align: center;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: -webkit-transform 2.5s cubic-bezier(0, .6, .3, 1);
	transition: -webkit-transform 2.5s cubic-bezier(0, .6, .3, 1);
	transition: transform 2.5s cubic-bezier(0, .6, .3, 1);
	transition: transform 2.5s cubic-bezier(0, .6, .3, 1), -webkit-transform 2.5s cubic-bezier(0, .6, .3, 1);
}

.tl-animated .tl-overview-design-colors-container {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}

.tl-overview-design-colors-composition {
	height: 100%;
	-webkit-transition: -webkit-transform 12s cubic-bezier(.25, 1.6, .6, .95);
	transition: -webkit-transform 12s cubic-bezier(.25, 1.6, .6, .95);
	transition: transform 12s cubic-bezier(.25, 1.6, .6, .95);
	transition: transform 12s cubic-bezier(.25, 1.6, .6, .95), -webkit-transform 12s cubic-bezier(.25, 1.6, .6, .95);
	-webkit-transform-origin: 50% 20%;
	transform-origin: 50% 20%;
}

#tl-overview-design-colors li:hover .tl-overview-design-colors-composition {
	-webkit-transform: scale(1.6);
	transform: scale(1.6);
}

.tl-overview-design-colors-composition img {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	height: 90%;
}

ul .tl-animate-2 {
	-webkit-transition-delay: .1s;
	transition-delay: .1s;
}

ul .tl-animate-3 {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}

ul .tl-animate-4 {
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
}

ul .tl-animate-5 {
	-webkit-transition-delay: .4s;
	transition-delay: .4s;
}

ul .tl-animate-6 {
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}

ul .tl-animate-7 {
	-webkit-transition-delay: .6s;
	transition-delay: .6s;
}

ul .tl-animate-8 {
	-webkit-transition-delay: .7s;
	transition-delay: .7s;
}

ul .tl-animate-9 {
	-webkit-transition-delay: .8s;
	transition-delay: .8s;
}

.tl-overview-design-colors-name {
	color: #fff;
	mix-blend-mode: exclusion;
	position: absolute;
	display: block;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-transform: uppercase;
	z-index: 30;
	width: 100%;
	text-align: center;
	margin: 0;
	opacity: 0;
	-webkit-transition: all .5s;
	transition: all .5s;
}

.tl-overview-design-colors-name .tl-active {
	opacity: 1;
}

#tl-overview-design-colors li:hover .tl-overview-design-colors-name {
	opacity: 1;
}

#tl-overview-design-curve .tl-container {
	/*display: flex;
	justify-content: space-between;
	align-items: center*/
}

#tl-overview-design-curve-composition {
	text-align: center;
}

#tl-overview-design-curve .tl-container-animated {
	height: 200vh;
	background: #fff;
}

#tl-overview-design-curve {
	position: relative;
	z-index: 7;
	padding-top: 100px;
	background: #fff;
}

#tl-overview-design-curve-container {
	height: 100vh;
	top: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #fff;
}

#tl-wrapper .h0 {
	font-size: calc(6.696vw + -8.56320px);
	font-weight: 700
}


#tl-overview-design-curve-trigger {
	position: relative;
	top: 0vh;
}

.tl-text-effect-stroke {
	color: transparent;
	-webkit-text-stroke: 2px black;
}

.tl-text-effect-mix {
	color: #fff;
	mix-blend-mode: difference;
}

_:-ms-lang(x),
.tl-overview-design-curve-title.tl-text-effect-mix {
	color: #000;
}

_:-ms-lang(x),
#tl-overview-design-curve-composition-img {
	width: auto;
	height: 75vh;
}

#tl-overview-design-curve-title-1 {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 11;
}

#tl-overview-design-curve-title-2 {
	position: absolute;
	top: 0;
	left: 65%;
	z-index: 9;
}

_:-webkit-full-screen,
_::-webkit-full-page-media,
_:future,
:root #tl-overview-design-curve-title-2 {
	z-index: 11;

}

#tl-overview-design-colors-composition {
	position: relative;
}

#tl-overview-design-curve-composition {}

#tl-overview-design-curve-composition-video {
	height: 75vh;
	position: relative;
	z-index: 10;
}

.tl-overview-design-curve-description {
	position: relative;
	z-index: 1;
	margin-top: calc((100vh - 75vh)*-0.5 + 120px);
}

.tl-overview-design-curve-description p {
	width: 75%;
	margin: 0 auto;
	text-align: center;
}

#tl-overview-design-buttons-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 200px 0 80px 0
}

#tl-overview-design-buttons-container>* {
	-ms-flex-negative: 1;
	flex-shrink: 1;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1
}

#tl-overview-design-buttons-container h2 {
	margin: .2em 0 0 0
}

.tl-learn-more {
	position: relative;
	height: 160px;
	z-index: 40;
	z-index: 50
}

.tl-learn-more a:link,
.tl-learn-more a:visited {
	/*background: #FF7300;*/
	background: url(../../images/tl/overview/intro/mate30-pro-5g-bgimage-learn-more@2x.svg);
	background-size: cover;
	color: #f6f4f5 !important;
	border-radius: 50%;
	width: calc(5.17799vw + 100.58252px);
	position: absolute;
	right: calc(7.31392vw + -12.42718px);
	top: -100px;
	display: block;
	-webkit-transition: -webkit-transform 1s cubic-bezier(.25, 1.6, .6, .95);
	transition: -webkit-transform 1s cubic-bezier(.25, 1.6, .6, .95);
	transition: transform 1s cubic-bezier(.25, 1.6, .6, .95);
	transition: transform 1s cubic-bezier(.25, 1.6, .6, .95), -webkit-transform 1s cubic-bezier(.25, 1.6, .6, .95);
	-webkit-box-shadow: 0px 10px 16px 0px #8B91D6;
	box-shadow: 0px 10px 16px 0px #8B91D6;
	border: .02px solid #8B91D6;
}

_:-ms-input-placeholder,
:root .tl-learn-more a:link,
_:-ms-input-placeholder,
:root .tl-learn-more a:visited {
	-webkit-transition: none;
	transition: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none;
}

.tl-learn-more a:link span,
.tl-learn-more a:visited span {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	-webkit-transform: translate(0, -50%) scale(1, 1);
	transform: translate(0, -50%) scale(1, 1);
	text-align: center;
	padding: .5em;
	-webkit-transition: -webkit-transform 1s cubic-bezier(.25, 1.6, .6, .95);
	transition: -webkit-transform 1s cubic-bezier(.25, 1.6, .6, .95);
	transition: transform 1s cubic-bezier(.25, 1.6, .6, .95);
	transition: transform 1s cubic-bezier(.25, 1.6, .6, .95), -webkit-transform 1s cubic-bezier(.25, 1.6, .6, .95);
	line-height: 1.25em
}

.tl-learn-more a:link::after,
.tl-learn-more a:visited::after {
	display: block;
	content: '';
	padding-top: 100%
}

.tl-learn-more a:hover {
	-webkit-transform: scale(1.05, 1.05);
	transform: scale(1.05, 1.05)
}

.tl-learn-more a:hover span {
	-webkit-transform: translate(0, -50%) scale(.9, .9);
	transform: translate(0, -50%) scale(.9, .9)
}

/*tl-overview-design-buttons*/
.tl-overview-design-buttons-composition {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	font-size: 0;
}

.tl-overview-design-buttons.tl-container {
	padding-top: 120px;
}

.tl-overview-design-buttons.tl-container img {
	width: 100%;
}

/*tl-camera-style-video*/
#tl-camera-styles {
	margin-top: -1px;
}

#tl-camera-styles .tl-section-title {
	color: #fff;
	z-index: 11;
}

#tl-camera-styles .tl-section-title::before {
	background: #fff;
}

#tl-camera-styles .tl-container {
	width: 100%;
	height: 100%;
	background: #000;
	/*padding-bottom: calc(51.9vw - 100vh + 65px);*/
}

_:-ms-lang(x),
_:-webkit-full-screen,
#tl-camera-styles .tl-container {
	padding-bottom: calc(51.5vw - 100vh + 65px);
}

#tl-camera-styles-video {
	background: #000;
	height: calc(100vh - 65px);
	/*position: sticky;*/
	top: 65px;
	overflow: hidden;
	margin: 0 0 2% 0;
}

#tl-camera-styles-video .tl-container {
	position: relative;
	z-index: 20
}

.tl-camera-styles-video-description div {
	width: 60%;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}

#tl-camera-styles-video video {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: 10;
}

/* #tl-camera-styles-video-slogan.tl-h1 {
	font-size: calc(4.66019vw + 30.52427px);
	letter-spacing: .05em!important;
	color: #fff;
	mix-blend-mode: exclusion;
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 66vh;
	text-transform: uppercase;
	z-index: 30;
	width: 100%;
	text-align: center
} */

/*four-camera*/
#tl-camera-styles-fourCamera {
	/*position: sticky;*/
	top: 65px;
	height: calc(100vh - 65px);
	z-index: 11;
	width: 100%;
}

#tl-camera-styles-fourCamera-composition img.tl-pic-four-camera-blur {
	width: 99.9%;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

_:-ms-input-placeholder,
:root #tl-camera-styles-fourCamera-composition img.tl-pic-four-camera-blur {
	opacity: 0;
}

_:-ms-lang(x),
_:-webkit-full-screen,
#tl-camera-styles-fourCamera-composition img.tl-pic-four-camera-blur {
	opacity: 0;
}

#tl-camera-styles-fourCamera-composition img {
	width: 100%;
}

#tl-camera-styles {
	height: 300vh;
	position: relative;
}

#tl-camera-styles-fourCamera-loop {
	position: relative;
	width: 100%;
	background: #fff;
	z-index: 2;
}

#tl-camera-styles-fourCamera-composition {
	width: 100%;
	height: 100%;
	background-color: #cfcfcf;
}

_:-ms-input-placeholder,
:root #tl-camera-styles-fourCamera-composition {
	background-color: #fff;
}

_:-ms-lang(x),
_:-webkit-full-screen,
#tl-camera-styles-fourCamera-composition {
	background-color: #fff;
}

.tl-camera-styles-video-description {
	position: relative;
	width: calc(82.848vw + -10.68160px);
	margin: 20vh auto;
	z-index: 11;
}

@supports(((-webkit-clip-path: circle(0)) or (clip-path: circle(0))) or (-webkit-clip-path: circle(0))) {
	#tl-camera-styles {
		height: 400vh;
		position: relative;
	}

	#tl-camera-styles-fourCamera-composition {
		width: 100%;
		height: 100%;
		clip-path: circle(0);
		-webkit-clip-path: circle(0);
		background-color: #cfcfcf;
	}

	#tl-camera-styles-fourCamera-loop {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		clip-path: circle(-5vh);
		-webkit-clip-path: circle(-5vh);
		background: #fff;
	}

	.tl-camera-styles-video-description {
		margin: 20vh auto 0;
	}
}

/*tl-camera-style-detail*/
.tl-camera-style-detail {
	background: #fff;
	position: relative;
	z-index: 11;
	padding-top: 100px;
	margin-top: -1px;
}

_:-ms-input-placeholder,
:root .tl-camera-style-detail {
	margin-top: 100px;
}

.tl-camera-style-detail .tl-camera-styles-detail-composition {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 90%;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-bottom: 80px;
	font-size: 0;
	margin-left: 10%;
}

_:-ms-input-placeholder,
:root .tl-camera-style-detail .tl-camera-styles-detail-composition {
	-ms-flex-align: center;
	align-items: center;
}

.tl-camera-styles-detail-composition .tl-3cols {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

_:-ms-input-placeholder,
:root .tl-camera-styles-detail-composition .tl-3cols {
	display: block;
}

.tl-camera-styles-detail-composition img {
	width: 100%;
}

.tl-camera-styles-detail-number-wapper {
	position: relative;
	background: #fff;
	padding-right: 55px;
	overflow: hidden;
}

.tl-camera-styles-detail-des-wapper h2 {
	margin-top: 1.5em;
}

_:-ms-input-placeholder,
:root .tl-camera-styles-detail-des-wapper h2 {
	margin-top: 0;
}

.tl-camera-styles-detail-number {
	position: absolute;
	left: calc(100% - 55px);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 111;
	top: 50%;
}

.tl-camera-style-detail .tl-camera-styles-detail-composition.tl-reverse {
	margin-left: 0%;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.tl-reverse {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

#tl-camera-styles-portraitCamera .tl-camera-styles-detail-composition {
	padding-bottom: 0;
}

.tl-reverse .tl-camera-styles-detail-number-wapper {
	padding-left: 55px;
	padding-right: 0;
}

.tl-reverse .tl-camera-styles-detail-number {
	left: 55px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.tl-camera-styles-detail-number.tl-text-effect-stroke {
	color: #000;
	visibility: hidden;
}

@supports(-webkit-text-stroke-color: #000) {
	.tl-camera-styles-detail-number.tl-text-effect-stroke {
		-webkit-text-stroke-color: #000;
		color: #fff;
		-webkit-text-fill-color: transparent;
		-webkit-text-stroke-width: 2px;
		text-transform: uppercase;
		line-height: 1em;
	}

	@supports(mix-blend-mode: difference) {
		.tl-camera-styles-detail-number.tl-text-effect-stroke {
			color: #fff;
			-webkit-text-fill-color: transparent;
			-webkit-text-stroke-width: 2px;
			-webkit-text-stroke-color: #fff;
			text-transform: uppercase;
			line-height: 1em;
			mix-blend-mode: difference;
		}
	}
}

#tl-camera-styles-more {
	position: relative;
	z-index: 111;
}

#tl-camera-styles-superZoom .tl-camera-styles-detail-composition .tl-3cols {
	position: relative;
	overflow: hidden;
}

.tl-camera-styles-superZoom-img-small {
	opacity: 0;
	-webkit-transition: -webkit-opacity 3s cubic-bezier(0, .6, .3, 1);
	transition: -webkit-opacity 3s cubic-bezier(0, .6, .3, 1);
	transition: opacity 3s cubic-bezier(0, .6, .3, 1);
	transition: opacity 3s cubic-bezier(0, .6, .3, 1), -webkit-opacity 3s cubic-bezier(0, .6, .3, 1);
}

.tl-camera-styles-superZoom-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 1;
	-webkit-transition: -webkit-opacity 3s cubic-bezier(0, .6, .3, 1);
	transition: -webkit-opacity 3s cubic-bezier(0, .6, .3, 1);
	transition: opacity 3s cubic-bezier(0, .6, .3, 1);
	transition: opacity 3s cubic-bezier(0, .6, .3, 1), -webkit-opacity 3s cubic-bezier(0, .6, .3, 1);
}

.tl-animated .tl-camera-styles-superZoom-img {
	opacity: 0;
}

.tl-animated .tl-camera-styles-superZoom-img-small {
	opacity: 1;
}

/*tl-performance*/
.tl-performance {
	background: #000;
	color: #FFF;
}

.tl-performance img {
	width: 100%;
}


#tl-performance .tl-section-title {
	position: relative;
	color: white;
	padding-bottom: 100px;
}

#tl-performance .tl-section-title::before {
	background: #fff;
}

.tl-performance .tl-performance-composition {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	/*justify-content: center;*/
	width: 100%;
	font-size: 0;
}

.tl-performance .tl-container {
	padding-bottom: 120px;
}



#tl-performance-kirin-5G.tl-container {
	position: relative;
	width: auto;
	margin-right: calc((100% - (82.848vw + -10.68160px)) * 0.5);
}


_:-ms-input-placeholder,
:root #tl-performance-kirin-5G.tl-container {
	margin-right: 18%;
}

_:-ms-input-placeholder,
:root #tl-performance-kirin-5G div.tl-3cols {
	width: 50%;
}

/*0916chang-qiao-start*/
#tl-performance-kirin-5G.tl-container {
	width: 100%;
	margin: 0;
}

#tl-performance-kirin-5G .tl-performance-composition {
	flex-direction: column-reverse;
}

#tl-performance-kirin-5G .tl-performance-composition .tl-3cols {
	width: 60%;
	text-align: center;
	margin: 0 auto;
}

.tl-filter {
	width: 85%;
	margin: 0 auto;
}

/*0916chang-qiao*/

#tl-performance-kirin-5G .tl-performance-composition {
	/*-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;*/
}

#tl-performance-kirin-5G .tl-performance-composition .tl-3cols {
	position: relative;
	z-index: 2;
}

.tl-performance-composition-pc {
	position: absolute;
	width: 80% !important;
	left: 0;
	top: 0;
}

.tl-performance-fast-download {
	position: relative;
	font-size: 0;
	min-height: 50vw;
}

.tl-performance-fast-download .tl-container {
	padding-bottom: 0;
	position: absolute;
	bottom: calc(9.709vw + 13.58720px);
	width: 100%;
}

.tl-performance-fast-download .tl-performance-composition {
	display: block;
	width: 60%;
	margin: 0 auto;
	text-align: center;
}

#tl-performance-more {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.tl-filter {
	animation: hueRotate 5s infinite;
	-webkit-animation: hueRotate 5s infinite;
}

@-webkit-keyframes hueRotate {
	0% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}

	50% {
		-webkit-filter: hue-rotate(150deg);
		filter: hue-rotate(150deg);
	}

	100% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}
}

@keyframes hueRotate {
	0% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}

	50% {
		-webkit-filter: hue-rotate(150deg);
		filter: hue-rotate(150deg);
	}

	100% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}
}

/*tl-battery*/
.tl-battery {
	background: #DDE6F8;
}

.tl-battery img {
	width: 100%;
	vertical-align: bottom;
}

.tl-battery .tl-container {
	padding-top: 200px;
	text-align: center;
}

#tl-battery-slogan {
	/*letter-spacing: .1em;*/
	/*font-weight: lighter!important;*/
}

.tl-container .tl-battery-container {
	margin: 0 auto;
}

.tl-battery-composition {
	width: 65%;
	margin: 0 auto 80px;
}

#tl-battery-superCharge {
	padding-bottom: 100px;
}

#tl-battery-superCharge .tl-container {
	padding-top: 50px;
}

.tl-battery-container {
	position: relative;
}

#tl-wrapper .tl-battery-number-wapper {
	position: absolute;
	top: 40%;
	left: 36%;
	transform: translate3d(-50%, -50%, 100px) rotate3d(12, -6, 2.5, 53deg);
	-webkit-transform: translate3d(-50%, -50%, 100px) rotate3d(12, -6, 2.5, 53deg);
	color: #fff;
	-webkit-perspective-origin: bottom;
	perspective-origin: bottom;
	-webkit-perspective: 378px;
	perspective: 378px;
	font-size: calc(4.56vw + 11.64800px);
}

#tl-battery-number {
	width: 12vw;
	display: inline-block;
	text-align: right;
}

@supports (font-variant-numeric: tabular-nums) {
	#tl-battery-number {
		width: auto;
		display: inline-block;
		text-align: right;
		font-variant-numeric: tabular-nums;
	}
}

#tl-battery-superCharge ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	white-space: nowrap;
	font-weight: 700;
	line-height: 2.4em;
	text-align: right;
	width: 95%;
	height: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#tl-battery-superCharge li {
	width: 22vw;
	height: calc(22vw * 1.7626);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	background: #fff;
}

.tl-battery-superCharge-container {
	width: 100%;
}

.tl-battery-superCharge-composition {
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: -webkit-transform 2.5s cubic-bezier(0, .6, .3, 1);
	transition: -webkit-transform 2.5s cubic-bezier(0, .6, .3, 1);
	transition: transform 2.5s cubic-bezier(0, .6, .3, 1);
	transition: transform 2.5s cubic-bezier(0, .6, .3, 1), -webkit-transform 2.5s cubic-bezier(0, .6, .3, 1);
	position: absolute;
	bottom: 0;
	width: 100%;
}

.tl-animated .tl-battery-superCharge-composition {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}

.tl-battery-superCharge-scenariosName {
	position: absolute;
	width: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top: calc(14vw * 1.7626 * 0.2784 *0.5);
	font-weight: normal;
	text-align: center;
	z-index: 8;
}

/*tl-emui*/
.tl-emui {
	/*background: #000;*/
}

#tl-emui-video-composition .h6.tl-link {
	display: block;
	margin-top: 1em;
	font-weight: 400;
	position: absolute;
	width: 100%;
	bottom: 80px;
	text-align: center;
	z-index: 40;
}

#tl-emui-video-composition .h6.tl-link span {
	letter-spacing: 0 !important;
}

#tl-emui-video-container {
	height: calc((100vh - 65px) * 2.15);
	position: relative;
	background: #000;
}

#tl-emui-video-container .tl-section-title {
	color: #fff;
	z-index: 11;
}

#tl-emui-video-container .tl-section-title::before {
	background: #fff;
}

#tl-emui-video-container .tl-container {
	position: relative;
	z-index: 20
}

#tl-emui-video-composition {
	background: #000;
	height: calc(100vh - 65px);
	/*position: sticky;*/
	top: 65px;
	overflow: hidden;
}

.tl-emui-video-description {
	position: relative;
	width: calc(82.848vw + -10.68160px);
	margin: 50vh auto 0;
}

.tl-emui-video-description div {
	width: 75%;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}

#tl-emui-video {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 102%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: 10;
}

#tl-emui-video-container #tl-emui-video-slogan.tl-h1 {
	font-size: calc(4.66019vw + 30.52427px);
	letter-spacing: .05em !important;
	color: #fff;
	mix-blend-mode: exclusion;
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 66vh;
	text-transform: uppercase;
	z-index: 30;
	width: 100%;
	text-align: center
}

/*tl-emui-dark-mode*/
.tl-emui-dark-mode {
	background: #000;
	color: #fff;
	font-size: 0;
	padding-bottom: 6%;
	margin-top: -1px;
	position: relative;
}

.tl-emui-dark-mode img {
	width: 100%;
}

.tl-emui-dark-mode-container {
	position: absolute;
	bottom: 10%;
	left: 0;
	margin-left: calc((100% - (82.848vw + -10.68160px)) * 0.5);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.tl-emui-dark-mode-container .h1 {
	white-space: nowrap;
}

/*tl-emui-gesture-control*/
.tl-emui-gesture-control-composition {
	padding: 200px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

@media (min-width: 600px) {
	.tl-emui-gesture-control.lazyloaded {
		background: url(../../images/tl/emui/mate30-pro-5g-pic-swing-gesture-control@2x.jpg);
		background-size: cover;
		background-position: center;
	}
}

@media (min-width: 600px) and (-webkit-min-device-pixel-ratio: 1.5) {
	.tl-emui-gesture-control.lazyloaded {
		background: url(../../images/tl/emui/mate30-pro-5g-pic-swing-gesture-control@2x.jpg);
		background-size: cover;
		background-position: center;
	}
}

@media (min-width: 600px) and (-webkit-max-device-pixel-ratio: 1.4) {
	.tl-emui-gesture-control.lazyloaded {
		background: url(../../images/tl/emui/mate30-pro-5g-pic-swing-gesture-control.jpg);
		background-size: cover;
		background-position: center;
	}
}

@media (max-width: 1200px) and (max-aspect-ratio: 1 / 1) {
	.tl-emui-gesture-control.lazyloaded {
		background: #d9dce3;
	}
}

/*tl-emui-connectivity*/
.tl-emui-connectivity {
	/*background: #fff;*/
	padding-top: 100px;
}

.tl-emui-connectivity-composition {
	/*padding: 200px 0;*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.tl-emui-connectivity-composition-img {
	width: 55%;
}

.tl-emui-connectivity-composition.tl-container {
	width: auto;
	margin-left: calc((100% - (82.848vw + -10.68160px)) * 0.5);
}

.tl-emui-connectivity-composition img {
	width: 100%;
}

/*tl-security*/
.tl-security {
	background: #F6F4F5;
}

.tl-security .tl-section-title {
	color: #000;
}

.tl-security .tl-container {
	padding-top: 200px;
	text-align: center;
}

.tl-security-composition,
.tl-security .swiper-container {
	width: 75%;
	margin: 0 auto;
}

.tl-security ul {
	list-style: none;
	padding: 60px 0 0;
	margin: 0;
	white-space: nowrap;
	font-weight: 700;
	line-height: 2.4em;
	text-align: right;
	width: 100%;
	height: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.tl-security li {
	overflow: hidden;
	position: relative;
	width: 100%;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	text-align: center;
}

.tl-security li img {
	width: 80%;
}

/*tl-accessories*/
.tl-accessories {
	padding-bottom: 80px;
	position: relative;
}

.tl-accessories .tl-container {
	padding-top: 200px;
}

.tl-accessories .tl-h1 {
	text-align: center;
}

.tl-accessories .swiper-button-prev,
.tl-accessories .swiper-button-next {
	top: calc(24vw * 0.75 + 200px);
}

_:-ms-input-placeholder,
:root .tl-accessories .swiper-button-prev,
.tl-accessories .swiper-button-next {
	height: calc(24vw * 1.3);
	transform: translateY(-50%);
	width: calc((100% - (82.848vw + -10.68160px)) * 0.5);
	z-index: 199;
	border-radius: 0;
	background-color: #fff;
}

_:-ms-input-placeholder,
:root .tl-accessories .swiper-button-prev {
	left: 0 !important;
}

_:-ms-input-placeholder,
:root .tl-accessories .swiper-button-next {
	right: 0 !important;
}

.tl-accessories ul {
	list-style: none;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	font-weight: 700;
	line-height: 2.4em;
	text-align: right;
	width: 100%;
	height: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	/*    justify-content: center;
*/
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 80px 0;
}

/*.tl-accessories .swiper-slide{
	flex-shrink: 1;
}*/
.tl-accessories .swiper-pagination {
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	/* padding: 0 0 120px; */
	padding: 0;
	position: relative;
	width: 50%;
}

.tl-accessories .swiper-pagination .swiper-pagination-bullet {
	margin: 0 8px;
}

.tl-accessories li {
	width: 20%;
	height: calc(24vw * 1.3);
	background: #fff;
	position: relative;
	z-index: 111;
}

.tl-accessories li div {
	position: relative;
	-webkit-transition: -webkit-transform 2s cubic-bezier(.25, 1.6, .6, .95);
	transition: -webkit-transform 2s cubic-bezier(.25, 1.6, .6, .95);
	transition: transform 2s cubic-bezier(.25, 1.6, .6, .95);
	transition: transform 2s cubic-bezier(.25, 1.6, .6, .95), -webkit-transform 2s cubic-bezier(.25, 1.6, .6, .95);
	-webkit-transform-origin: center;
	transform-origin: center;
}

.tl-accessories-detail-wrapper {}

.tl-accessories-detail-wrapper,
.tl-accessories-detail-img,
.tl-accessories-detail-img img {
	width: 100%;
}

.tl-accessories-detail-img {
	text-align: center;
	background: #fff;
}

.tl-accessories-detail-name {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: 0 !important;
	opacity: 0;
	mix-blend-mode: difference;
	color: #fff;
	-webkit-transition: opacity 1s cubic-bezier(.25, 1.6, .6, .95);
	transition: opacity 1s cubic-bezier(.25, 1.6, .6, .95);
	width: 100%;
	text-align: center;
	z-index: 11;
}

.tl-accessories li:hover .tl-accessories-detail-name {
	opacity: 1;
}

.tl-scale-1 {
	-webkit-transform: scale(1);
	transform: scale(1);
}

.tl-scale-2 {
	-webkit-transform: scale(.8);
	transform: scale(.8);
}

.tl-scale-3 {
	-webkit-transform: scale(.65);
	transform: scale(.65);
}

.tl-scale-4 {
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.tl-scale-5 {
	-webkit-transform: scale(.38);
	transform: scale(.38);
}

.tl-scale-6 {
	-webkit-transform: scale(.25);
	transform: scale(.25);
}

#tl-accessories-slogan {
	text-align: center;
}

/* .tl-accessories-des{
	width: 65%;
	margin: 0 auto;
	text-align: center;
} */











/* reason to buy */
.tl-reasons-to-buy {
	overflow: hidden;
}

.tl-reasons-to-buy .tl-container {
	position: relative;
	padding: 120px 0;
	/*width: calc(68.75vw + 260px);*/
}

.tl-reasons-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	justify-items: center;
	text-align: center;
	list-style: none;
}

.tl-reasons-list a {
	font-size: 0;
	line-height: 0;
}

.tl-reasons-to-buy-text {
	position: absolute;
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
	left: -16%;
	top: 120px;
	text-transform: uppercase;
	font-size: 0.833vw;
	-webkit-transform-origin: right;
	transform-origin: right;
}

#tl-wrapper .tl-reasons-list p {
	width: 100%;
	height: 1.5em;
	overflow: hidden;
	font-size: 1.66vw;
	text-align: center;
	letter-spacing: calc(-.03783em + .52609px);
	padding: 0 5% 0;
}

.tl-reasons-list li {
	width: 100%;
	margin-left: 1.5%;
	padding: 1%;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	background-color: #F6F4F5;
	line-height: 0;
	font-size: 0;
}

.tl-reasons-list li:first-child {
	margin: 0;
}

.tl-reasons-list .tl-reasons-image {
	width: 70%;
	margin: 30px 0 50px;
}

.tl-reasons-list a {
	width: 100%;
	/*display: inline-block;*/
	/*text-align: right;*/
}

.tl-reasons-list .tl-reasons-to-buy-learn-more {
	width: auto;
	text-align: right;

}

.tl-opacity {
	opacity: 0;
}

.tl-reasons-list li.lazyloaded:nth-of-type(1) {
	background-image: url(../../images/tl/reason/mate30-pro-5g-pic-reasons-to-buy-innovative.png);
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
}

.tl-reasons-list li.lazyloaded:nth-of-type(4) {
	background-image: url(../../images/tl/reason/mate30-pro-5g-pic-reasons-to-buy-battery.png);
	background-size: contain;
	background-position: 50% 70%;
	background-repeat: no-repeat;
}


/*AWARDS & REVIEWS*/
.tl-awards-and-reviews {
	overflow: hidden;
	background-color: #F6F4F5;
}

.tl-awards-and-reviews .tl-container {
	position: relative;
	padding: 120px 0;
	/*width: calc(68.75vw + 260px);*/
}

.tl-awards-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	justify-items: center;
	text-align: center;
	list-style: none;

	/*change*/
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.tl-awards-list a {
	font-size: 0;
	line-height: 0;
}

.tl-awards-and-reviews-text {
	/*    position: absolute;*/
	/*-webkit-transform: rotate(270deg);*/
	/*transform: rotate(270deg);*/
	/*left: -16%;*/
	/*top: 120px;*/
	text-transform: uppercase;
	font-size: 1.833vw;
	-webkit-transform-origin: right;
	transform-origin: right;
}

.tl-awards-and-reviews .tl-container {
	text-align: center;
}

#tl-wrapper .tl-awards-list p {
	width: 100%;
	font-size: 14px;
	text-align: center;
	letter-spacing: calc(-.03783em + .52609px);
	padding: 0 5% 0;
}

.tl-awards-list li {
	width: 20%;
	/*margin-left: 1%;*/
	padding: 1%;
	/*-webkit-box-flex: 1;*/
	/*-webkit-flex: 1;*/
	/*flex: 1;*/
	line-height: 0;
	font-size: 0;
}

.tl-awards-list li:first-child {
	margin: 0;
}

.tl-awards-list .tl-awards-image {
	width: auto;
	/*margin: 30px 0 50px;*/
}

.tl-awards-listt a {
	width: 100%;
	display: inline-block;
	text-align: right;
}

.tl-opacity {
	opacity: 0;
}

.tl-tl-awards-list li.lazyloaded:nth-of-type(1) {
	background-image: url(../../images/tl/reason/mate30-pro-5g-pic-reasons-to-buy-innovative.png);
	background-size: cover;
	background-position: center;
}

.tl-tl-awards-list li.lazyloaded:nth-of-type(4) {
	background-image: url(../../images/tl/reason/mate30-pro-5g-pic-reasons-to-buy-battery.png);
	background-size: cover;
	background-position: center;
}

/*.tl-pc .swiper-slide{
	display: flex;
    width: 100%;
    justify-items: center;
    text-align: center;
}*/
.tl-awards-and-reviews .swiper-container {
	padding-bottom: 30px;
}

#tl-wrapper .tl-awards-and-reviews .swiper-pagination-bullets {
	bottom: 0px;
}

/*swiper*/
#tl-wrapper .swiper-pagination-bullet {
	background: transparent;
	border: 1px solid #000;
	opacity: 1;
	outline: none;
}

#tl-wrapper .swiper-pagination-bullet-active {
	background: #000;
}

/*tl-family*/
.tl-family .tl-container {
	position: relative;
	padding: 80px 0 200px;
	/*width: calc(68.75vw + 260px);*/
}

.tl-family .tl-h1 {
	text-align: center;
	padding-bottom: 80px;
}

.tl-family-text {
	position: absolute;
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
	left: -14%;
	top: 80px;
	text-transform: uppercase;
	font-size: 0.833vw;
	-webkit-transform-origin: right;
	transform-origin: right;
}

.tl-family-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	justify-items: center;
	text-align: center;
	list-style: none;
	position: relative;
	z-index: 11;
}

.tl-family-list li {
	width: 100%;
	padding-left: 1.5%;
	/*padding: 1%;*/
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	/*background-color: #FFF;*/
	line-height: 0;
	font-size: 0;
	-webkit-box-sizing: content-box !important;
	box-sizing: content-box !important;
}

.tl-family-list li:first-child {
	padding: 0;
}

.tl-family-list .tl-family-image {
	width: 80%;
}

.tl-family-list .h6 {
	height: calc(3.75em + 2vw);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 1.25em 0 2vw;
	/* border-bottom: 1px solid #707070; */
	position: -webkit-sticky;
	position: sticky;
	top: 65px;
	background: #fff;
}

.tl-family-list-attribute-wrapper {
	overflow: hidden;
}

.tl-family-list-attribute-title-wrapper {
	width: 100%;
}

.tl-family-list-attribute-title-wrapper .tl-family-list-attribute {
	border-bottom: none;
}

.tl-family-list-attribute {
	text-align: left;
	padding-bottom: 2vw;
	margin-bottom: 2vw;
	border-bottom: 1px solid #707070;
}

#tl-wrapper .tl-family-list-attribute-details p {
	font-size: 16px;
	margin: 0;
}

.tl-family-list-attribute-title-wrapper {
	position: absolute;
	/*top: 80px;*/
}

.tl-family-list-attribute-wrapper {
	position: relative;
}

.tl-family .swiper-container {
	position: relative;
	z-index: 12;
	overflow: visible;
}

.tl-family-list-buttom {
	width: 100%;
	background: #1E2022;
	color: #fff;
	text-align: center;
	position: relative;
	z-index: 112;
	cursor: pointer;
	margin-top: -1px;
}

.tl-family-list-buttom {
	height: 0;
	width: 0;
	opacity: 0;
	visibility: hidden;
	padding: 0;
	margin: 0;
	font-size: 0;
	line-height: 0;
}

#tl-wrapper .tl-family-list-buttom p {
	line-height: 2.5em;
	margin: 0;
}

.tl-family-list-color-orange:before {
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
	background: #FF9D00;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: .5em;
}

.tl-family-list-color-forestGreen:before {
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
	background: #5C9B79;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: .5em;
}

.tl-family-list-color-purple:before {
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
	background: #9C71A3;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: .5em;
}

.tl-family-list-color-silverBlue:before {
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
	background: #D5D0EA;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: .5em;
}

.tl-family-list-color-green:before {
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
	background: #63DD7A;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: .5em;
}

.tl-family-list-color-black:before {
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
	background: #656565;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: .5em;
}

.tl-family-list-color-red:before {
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
	background: #9F2020;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: .5em;
}

.tl-family-list-product {
	position: -webkit-sticky;
	position: sticky;
	top: calc((((82.848vw + -10.68160px) - (1.5vw * 4))* 0.85 / 5 * -1.3318) + 80px - 1em);
	z-index: 12;
	background: #fff;
}

_:-ms-input-placeholder,
:root .tl-family-list-product {
	position: static;
}

.tl-mob {
	display: none;
}

.tl-displayNo {
	display: none;
}

@media (max-width: 1200px) {
	#tl-product-menu .tl-container div {
		display: none;
	}
}

.tl-opacity-pc {
	opacity: 0;
}

.tl-huaweiBrowser {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: calc(100vh - 65px);
}

/*tl-mob*/
@media (max-width: 600px),
(max-width: 1200px) and (max-aspect-ratio: 1 / 1) {
	.tl-pc {
		display: none;
	}

	.tl-mob {
		display: block;
	}

	.tl-opacity-mob {
		opacity: 0;
	}

	.tl-opacity-pc {
		opacity: 1 !important;
	}

	.tl-svg-play {
		height: 3.2vw;
		width: auto;
	}

	#tl-tvc .h6.tl-link span {
		font-size: 3.2vw;
	}

	/*swiper*/
	#tl-wrapper .swiper-pagination-bullet {
		background: transparent;
		border: 1px solid #000;
		opacity: 1;
		margin: 0 10px;
	}

	#tl-wrapper .swiper-pagination-bullet-active {
		background: #000;
	}

	.tl-awards-list.tl-mob {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	/* reason to buy */
	.tl-reasons-to-buy {
		text-align: center;
	}

	.tl-reasons-to-buy-text {
		position: static;
		font-size: 4.2vw;
		font-weight: bold;
		margin-bottom: 10.6vw;
		display: none;
		-webkit-transform: none;
		transform: none;
	}

	.tl-reasons-to-buy .swiper-container {
		overflow: visible;
		width: 100%;
	}

	.tl-reasons-to-buy .tl-container {
		padding: 16vw 0;
	}

	.tl-reasons-list li {
		width: 100%;
		-webkit-box-flex: 0;
		-ms-flex: none;
		flex: none;
		margin: 0;
		padding: 0;
	}

	#tl-wrapper .tl-reasons-list p {
		font-size: 8.53vw;
	}

	.tl-reasons-to-buy .swiper-pagination-bullets {
		bottom: -7% !important;
	}

	.tl-reasons-list {
		width: 90%;
		margin: 0 auto;
	}

	/*AWARDS & REVIEWS*/
	.tl-awards-and-reviews .swiper-container {
		overflow: hidden;
		padding-bottom: 30px;
	}

	.tl-awards-and-reviews {
		text-align: center;
	}

	.tl-awards-and-reviews-text {
		position: static;
		font-size: 4.2vw;
		font-weight: bold;
		margin-bottom: 10.6vw;
		display: block;
		-webkit-transform: none;
		transform: none;
	}

	.tl-awards-and-reviews li {
		width: 100%;
		-webkit-box-flex: 0;
		-ms-flex: none;
		flex: none;
		margin: 0;
		padding: 0;
	}

	.tl-awards-and-reviews .tl-container {
		padding: 16vw 0;
	}

	.tl-awards-and-reviews .swiper-pagination-bullets {
		bottom: -30px;
	}

	.tl-awards-and-reviews-text {
		font-size: 4.26vw;
	}

	.tl-awards-list .tl-awards-image {
		margin-bottom: 10.66vw;
	}

	#tl-wrapper .tl-awards-and-reviews .swiper-pagination-bullets {
		bottom: 0px;
	}

	/*width*/
	#tl-overview-design-colors-container {
		width: 85%;
	}

	#tl-overview-design-curve-composition-video {
		width: 100%;
		height: auto;
	}

	.tl-family .tl-container {
		width: 85%;
		padding-bottom: 80px;
	}

	.tl-camera-styles-video-description,
	.tl-emui-video-description {
		width: 85%;
		margin: 0 auto;
	}

	/*learn-more*/
	.tl-learn-more a:link,
	.tl-learn-more a:visited {
		top: -13.33vw;
		width: 26.66vw;
	}

	.tl-learn-more {
		height: 26.66vw;
	}

	/*second*/
	#tl-product-menu .tl-container div {
		display: none;
	}

	/*kv*/
	#tl-tvc .h6.tl-link {
		bottom: 10%;
	}

	#tl-overview-kv .tl-mob {
		width: 100%;
	}

	#tl-overview-kv {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
		padding-top: 16vw;
		text-align: center;
	}

	#tl-overview-kv-container {
		padding-bottom: 16vw;
		width: 100%;
	}

	.tl-overview-kv-des {
		height: auto;
		margin: 10.66vw auto 8vw;
	}

	#tl-overview-kv .tl-h1+div,
	.tl-overview-kv-des .tl-scroll-down {
		display: none;
	}

	.tl-overview-kv-des .tl-scroll-down-caption {
		display: none;
	}

	#tl-overview-kv-composition {
		width: 70%;
		margin: 10.66vw auto 17.33vw;
	}

	/*tl-overview-design-halo*/
	#tl-overview-design-halo .tl-section-title {
		position: relative;
	}

	.tl-overview-design-halo-title {
		width: 100%;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.tl-overview-design-halo-title .h1 {
		padding-top: 10.66vw;
	}

	#tl-overview-design-halo-composition {
		max-width: 80vw;
		max-height: 80vw;
	}

	.tl-overview-design-halo-description {
		margin-top: calc(((100vh - 65px) - 80vw) * -0.5 + 10.66vw);
	}

	.tl-overview-design-halo-description p {
		width: 100%;
		padding-bottom: 10.66vw;
	}

	/*color*/
	#tl-overview-design-colors-container {
		padding: 10.66vw 0 0;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.tl-overview-design-colors li {
		height: 70vh;
	}

	.swiper-button-prev,
	.swiper-container-rtl .swiper-button-next,
	.swiper-button-next,
	.swiper-container-rtl .swiper-button-prev {
		display: none;
	}

	#tl-overview-design-colors .tl-container {
		padding: 10.66vw 0;
	}

	#tl-overview-design-colors .swiper-container {
		width: 100%;
	}

	.tl-overview-design-colors-warapper {
		margin-bottom: 0;
	}

	#tl-overview-design-colors .swiper-container {
		z-index: 0;
	}

	#tl-overview-design-colors .swiper-pagination-bullet {
		margin: 0 10px;
	}

	/*tl-overview-design-curve*/
	#tl-overview-design-curve {
		padding: 10.66vw 0;
	}

	#tl-overview-design-curve-container {
		height: 50vh;
		top: calc(((100vh - 65px) * 0.5) - 25vh + 65px);
	}

	#tl-overview-design-curve .tl-container-animated {
		height: 100vh;
	}

	#tl-wrapper .h0 {
		font-size: 10vw;
	}

	#tl-overview-design-curve-title-2 {
		right: 0;
		left: auto;
	}

	.tl-overview-design-curve-description p {
		width: 100%;
	}

	#tl-overview-design-colors li:hover .tl-overview-design-colors-composition {
		-webkit-transform: none;
		transform: none;
	}

	#tl-overview-design-colors li .tl-overview-design-colors-name {
		opacity: 1;
	}

	.tl-overview-design-colors-composition {
		height: 90%;
	}

	#tl-wrapper h2.tl-overview-design-colors-name {
		position: static;
		font-size: 4.2vw;
		font-weight: normal;
		color: #000;
	}

	/*tl-overview-design-buttons*/
	.tl-overview-design-buttons.tl-container {
		padding: 10.66vw 0;
	}

	.tl-overview-design-buttons-composition {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}

	.tl-overview-design-buttons-composition .tl-5cols {
		margin-bottom: 10.66vw;
	}

	/*tl-performance-kirin-5G*/
	#tl-performance-kirin-5G.tl-container {
		width: 100%;
		padding-bottom: 10.66vw;
	}

	#tl-performance-kirin-5G.tl-container div.tl-3cols {
		width: 85%;
		margin: 0 auto;
		text-align: center;
	}

	#tl-performance-kirin-5G .tl-performance-composition {
		text-align: center;
	}

	#tl-performance .tl-section-title {
		padding-bottom: 10.66vw;
	}

	.tl-performance .tl-performance-composition {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}

	/*tl-performance-fast-download*/
	.tl-performance-fast-download {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	/*.tl-performance-fast-download img{
		position: relative;
		width: 150%;
		left: 50%;
		transform: translateX(-50%);
	}*/
	.tl-performance-fast-download-img {
		overflow: hidden;
		position: absolute;
		width: 100%;
	}

	.tl-performance-fast-download .tl-container {
		position: static;
		width: 100%;
		-webkit-transform: none;
		transform: none;
	}

	.tl-performance-fast-download .tl-performance-composition {
		width: 85%;
		padding: 60vw 0 37.32vw;
		position: relative;
	}

	.tl-performance img {
		padding-top: 10.66vw;
	}

	/*<!--tl-camera-styles-->*/
	#tl-camera-styles-video {
		top: 44px;
		height: calc(100vh - 44px);
	}

	#tl-camera-styles-fourCamera {
		top: 44px;
		height: calc(100vh - 44px);
	}

	.tl-camera-styles-video-description {
		margin: 15vh auto 0;
	}

	.tl-camera-styles-video-description div {
		width: 100%;
	}

	#tl-camera-styles-fourCamera-loop {
		display: block;
	}

	#tl-camera-styles-fourCamera-composition img.tl-pic-four-camera-blur {
		position: absolute;
		top: 0;
		transform: none;
	}

	/*camera-detail*/
	.tl-camera-style-detail {
		padding: 0;
	}

	.tl-camera-style-detail .tl-camera-styles-detail-composition {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		margin: 0;
		padding-bottom: 16vw;
	}

	.tl-camera-style-detail .tl-camera-styles-detail-composition.tl-reverse {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.tl-camera-styles-detail-number-wapper .tl-3cols {
		height: 100vw;
	}

	.tl-camera-styles-detail-number-wapper {

		overflow: hidden;
	}

	.tl-camera-styles-detail-number-wapper,
	.tl-reverse .tl-camera-styles-detail-number-wapper {
		padding: 0;
		margin-top: 10.66vw;
	}

	.tl-camera-style-detail .tl-container {
		width: 100%;
	}

	.tl-camera-styles-detail-des-wapper {
		width: 85%;
		margin: 0 auto;
	}

	.tl-camera-styles-detail-number {
		display: none;
	}

	#tl-camera-styles-detail-trigger1,
	#tl-camera-styles-detail-trigger2,
	#tl-camera-styles-detail-trigger3,
	#tl-camera-styles-detail-trigger4 {
		position: relative;
		top: 100vw;
	}

	/*tl-battery*/
	.tl-battery-composition {
		width: 100%;
	}

	#tl-wrapper .h1.tl-battery-number-wapper {
		font-size: 5vw;
		margin: 0;
	}

	.tl-battery-number-wapper {
		top: 43%;
		left: 37%;
	}

	#tl-battery-number {
		width: 15vw;
	}

	#tl-wrapper .tl-battery .tl-section-title {
		position: static;
		padding-bottom: 10.66vw;
	}

	.tl-battery .tl-container {
		padding-top: 0;
	}

	.tl-battery-composition {
		margin-bottom: 10.66vw;
	}

	#tl-battery-superCharge .tl-container {
		padding-top: 10.66vw;
	}

	#tl-battery-superCharge .swiper-container {
		width: calc(100% - 40px);
		margin: 0 auto;
	}

	#tl-battery-superCharge ul {
		-webkit-box-pack: normal;
		-ms-flex-pack: normal;
		justify-content: normal;
		-webkit-box-align: normal;
		-ms-flex-align: normal;
		align-items: normal;
		width: 100%;
		margin: 0 auto;
	}

	#tl-battery-superCharge li {
		width: calc((85vw - 40px)/2);
		height: 60vh;
	}

	.tl-battery-superCharge-scenariosName {
		top: calc(50vh * 0.2784 *0.5);
	}

	#tl-battery-superCharge .swiper-pagination {
		width: 100%;
	}

	#tl-battery-superCharge .swiper-pagination-bullet {
		margin: 7% 10px;
	}

	#tl-battery-superCharge {
		padding-bottom: 0;
	}

	/*emui*/
	#tl-emui-video-composition {
		top: 44px;
		height: calc(100vh - 44px);
	}

	.tl-emui-dark-mode-container {
		position: absolute;
		width: 90%;
		margin: 0 5%;
		bottom: 16vw;
	}

	.tl-emui-dark-mode-container .h1 {
		white-space: normal;
	}

	.tl-emui-dark-mode {
		padding-bottom: 16vw;
	}

	.tl-emui-video-description {
		width: 100%;
	}

	.tl-emui-video-description div {
		width: 100%;
	}

	#tl-emui-video-container {
		height: calc((100vh - 65px) * 1.75);
	}

	.tl-emui-gesture-control img {
		width: 100%;
	}

	.tl-emui-connectivity-composition.tl-container {
		margin: 0 auto;
		width: 100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.tl-emui-gesture-control-composition {
		padding: 16vw 0 0;
	}

	.tl-emui-connectivity-composition div.tl-3cols:nth-of-type(1) {
		width: 90%;
		margin: 0 auto;
		padding: 16vw 0 8vw;
	}

	.tl-emui-connectivity {
		padding-top: 0;
	}

	.tl-emui-connectivity-composition-img {
		width: 100%;
	}

	/*.tl-security*/
	#tl-wrapper .tl-security .tl-section-title {
		position: static;
		padding-bottom: 10.66vw;
	}

	.tl-security li {
		-webkit-box-flex: 0;
		-ms-flex: none;
		flex: none;
		-webkit-transform: scale(0.8) !important;
		transform: scale(0.8) !important;
		-webkit-transition: -webkit-transform .5s cubic-bezier(.25, 1.6, .6, .95) !important;
		transition: -webkit-transform .5s cubic-bezier(.25, 1.6, .6, .95) !important;
		transition: transform .5s cubic-bezier(.25, 1.6, .6, .95) !important;
		transition: transform .5s cubic-bezier(.25, 1.6, .6, .95), -webkit-transform .5s cubic-bezier(.25, 1.6, .6, .95) !important;
	}

	.tl-security li.swiper-slide-active {
		-webkit-transform: scale(1) !important;
		transform: scale(1) !important;
	}

	.tl-security ul {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.tl-security .tl-container {
		padding: 0;
		width: 100%;
	}

	.tl-security-composition {
		width: 85%;
	}

	.tl-security .swiper-container {
		width: 100%;
	}

	.tl-security li img {
		width: 75%;
	}

	.tl-security .swiper-pagination {
		width: 100%;
	}

	.tl-security .swiper-pagination-bullet {
		margin: 0 8px;
	}


	/*accessories*/
	#tl-wrapper .tl-accessories .tl-section-title {
		position: static;
		padding-bottom: 0;
	}

	.tl-accessories {
		overflow: hidden;
	}

	.tl-accessories ul {
		padding: 0;
		-webkit-box-pack: normal;
		-ms-flex-pack: normal;
		justify-content: normal;
		margin-top: 16vw;
	}

	.tl-accessories li {
		background: transparent;
		height: 65vh;
		width: 100%;
		-webkit-transition: -webkit-transform .5s cubic-bezier(.25, 1.6, .6, .95);
		transition: -webkit-transform .5s cubic-bezier(.25, 1.6, .6, .95);
		transition: transform .5s cubic-bezier(.25, 1.6, .6, .95);
		transition: transform .5s cubic-bezier(.25, 1.6, .6, .95), -webkit-transform .5s cubic-bezier(.25, 1.6, .6, .95);
		padding: 20px 0 35px;
	}

	.tl-accessories .tl-container {
		width: 100%;
	}

	.tl-accessories li.swiper-slide div {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}

	.tl-accessories li.swiper-slide-active div {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	/* .tl-accessories-des{
		width: 85%;
	} */
	.tl-accessories {
		padding-bottom: 10.66vw;
	}

	.tl-accessories-detail-wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}

	.tl-accessories-detail-name {
		position: static;
		-webkit-transform: none;
		transform: none;
		color: #000;
		opacity: 1;
		margin-top: 20px !important;
	}

	.tl-accessories .swiper-pagination {
		position: relative;
		width: 100%;
		padding: 0 0 10.66vw;
	}

	.tl-accessories .swiper-pagination-bullet {
		margin: 0 8px;
	}

	.tl-accessories .swiper-slide {
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	.tl-accessories-detail-wrapper,
	.tl-accessories-detail-img,
	.tl-accessories-detail-img img {
		height: 100%;
		width: auto;
	}


	/*family*/
	.tl-family {
		/*overflow: hidden;*/
	}

	.tl-family-list.swiper-wrapper {
		-webkit-box-pack: normal;
		-ms-flex-pack: normal;
		justify-content: normal;
		-webkit-box-align: normal;
		-ms-flex-align: normal;
		align-items: normal;
	}

	.tl-family-list li {
		width: calc(97% * 0.5);
		-webkit-box-flex: 0;
		-ms-flex: none;
		flex: none;
		padding-left: 3%;
	}

	.tl-family-list-attribute-title-wrapper .tl-family-list {
		-webkit-box-pack: normal;
		-ms-flex-pack: normal;
		justify-content: normal;
		-webkit-box-align: normal;
		-ms-flex-align: normal;
		align-items: normal;
	}

	.tl-family-list-attribute-title-wrapper .tl-family-list li {
		width: calc(50% - 10px);
		-webkit-box-flex: 0;
		-ms-flex: none;
		flex: none;
	}

	.tl-family-text {
		position: static;
		font-size: 4.2vw;
		font-weight: bold;
		margin-bottom: 10.6vw;
		display: block;
		-webkit-transform: none;
		transform: none;
		text-align: center;
		line-height: 1;
	}

	.tl-family-list-attribute-title-wrapper {
		top: 0;
	}

	.tl-family-list-product {
		position: -webkit-sticky;
		position: sticky;
		top: calc((85vw * 0.5 * 0.97 *0.85 * -1.3318) + 10.66vw);
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		z-index: 111;
		font-size: 4.2vw;
	}

	#tl-wrapper .tl-family-list-attribute-wrapper p {
		font-size: 5.5vw;
	}

	#tl-wrapper .tl-family-list-attribute-details p {
		font-size: 12px;
	}

	.tl-family-list-attribute-title-wrapper .tl-family-list li,
	.tl-family-list li {
		-webkit-transition: -webkit-transform 1s ease;
		transition: -webkit-transform 1s ease;
		transition: transform 1s ease;
		transition: transform 1s ease, -webkit-transform 1s ease;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	[compare-index="1"] .tl-family-list-attribute-title-wrapper .tl-family-translateX li,
	[compare-index="1"] .tl-family-translateX li {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	[compare-index="2"] .tl-family-list-attribute-title-wrapper .tl-family-translateX li,
	[compare-index="2"] .tl-family-translateX li {
		-webkit-transform: translateX(-200%);
		transform: translateX(-200%);
	}

	[compare-index="3"] .tl-family-list-attribute-title-wrapper .tl-family-translateX li,
	[compare-index="3"] .tl-family-translateX li {
		-webkit-transform: translateX(-300%);
		transform: translateX(-300%);
	}

	[compare-index="4"] .tl-family-list-attribute-title-wrapper .tl-family-translateX li,
	[compare-index="4"] .tl-family-translateX li {
		-webkit-transform: translateX(-400%);
		transform: translateX(-400%);
	}

	.tl-family-list .h6 {
		height: calc(3.75em + 18vw);
		padding: 1.25em 0 18vw;
	}

	.tl-family-list .swiper-pagination {
		position: absolute;
		bottom: 6vw;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 100%;
	}

	.tl-family-list .swiper-pagination span {
		margin: 0 10px
	}

	#tl-wrapper [compare-index="0"] .swiper-pagination-bullet:nth-of-type(1) {
		background: #000;
	}

	#tl-wrapper [compare-index="1"] .swiper-pagination-bullet:nth-of-type(2) {
		background: #000;
	}

	#tl-wrapper [compare-index="2"] .swiper-pagination-bullet:nth-of-type(3) {
		background: #000;
	}

	#tl-wrapper [compare-index="3"] .swiper-pagination-bullet:nth-of-type(4) {
		background: #000;
	}

}

/*手机横板*/
@media (max-width: 1200px) and (min-aspect-ratio: 5 / 3) {
	#tl-overview-design-curve {
		padding: 10.66vw 0 0;
	}

	#tl-wrapper .h2,
	#tl-wrapper h2 {
		font-size: 7vh;
	}

	#tl-wrapper .h3,
	#tl-wrapper h3 {
		font-size: 5vh;
	}

	#tl-wrapper .h6,
	#tl-wrapper h6 {
		font-size: 3vh;
	}

	#tl-overview-kv .tl-h1 {
		font-size: 14vh;
	}

	#tl-wrapper p {
		font-size: 3vh;
	}

	#tl-overview-kv {
		padding-top: 8vh;
	}

	.tl-overview-kv-des {
		height: 70vh;
	}

	#tl-overview-kv-container {
		padding-bottom: 0;
	}

	.tl-camera-style-detail .tl-camera-styles-detail-composition {
		width: 95%;
	}

	.tl-performance-fast-download .tl-container {
		bottom: 10vh;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 80%;
	}

	#tl-emui-video-container {
		height: calc((100vh - 65px) * 2.3);
	}

	.tl-emui-dark-mode-container {
		width: 50%;
	}

	.tl-emui-dark-mode {
		padding-bottom: 30vh;
	}

	#tl-wrapper .tl-family-list-attribute-wrapper p {
		font-size: 4vh;
	}

	#tl-wrapper .tl-family-list-attribute-details p {
		font-size: 3vh;
	}

	.tl-learn-more a:link,
	.tl-learn-more a:visited {
		top: 0;
		width: 30vh;
	}

	.tl-awards-list .tl-awards-image {
		width: 100%;
	}

	.tl-reasons-list .tl-reasons-image {
		margin: 15px 0 25px;
	}

	.tl-accessories .swiper-button-prev,
	.tl-accessories .swiper-button-next {
		right: 1% !important;
		margin: 0;
	}

	/*.tl-reasons-to-buy-text{
		left: -24%;
	}*/
	#tl-camera-styles-fourCamera-loop {
		display: block;
	}

	#tl-camera-styles-fourCamera-composition img.tl-pic-four-camera-blur {
		position: absolute;
		top: 0;
		transform: none;
	}

	#tl-camera-styles .tl-container {
		padding-bottom: 20vh;
		/*background: #FFF;*/
	}

	#tl-camera-styles-fourCamera-loop {
		/*z-index: 111;*/
	}

	#tl-camera-styles .tl-container {
		padding-bottom: calc(52vw - 100vh + 65px);
	}
}

/*pad横板*/
@media (min-width: 600px) and (max-width: 1200px) and (min-aspect-ratio: 1 / 1) and (max-aspect-ratio: 5 / 3) {
	#tl-overview-design-curve {
		padding: 0;
	}

	.tl-performance-fast-download .tl-container {
		bottom: calc(12.298vw + -96.12160px);
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 100%;
	}

	.tl-camera-style-detail .tl-camera-styles-detail-composition {
		width: 92%;
	}

	.tl-emui-dark-mode {
		padding-bottom: 38vh;
	}

	.tl-emui-dark-mode-container {
		width: 50%;
	}

	#tl-emui-video-container {
		height: calc((100vh - 65px) * 2.25);
	}

	#tl-overview-design-curve-composition-video {
		height: 50vh;
	}
}

@media (min-width: 600px) and (max-width: 1200px) and (max-aspect-ratio: 1 / 1) {
	.tl-family-list-product {
		top: calc((85vw * 0.5 * 0.97 *0.9 * -1.3318) + 10.66vw);
	}
}

@media only screen and (max-width: 1199px) {
	#tl-overview-design-curve .tl-container-animated {
		height: auto;
	}

	#tl-overview-design-curve-container {
		height: 50vh;
		position: relative;
		top: 0;
	}

	#tl-overview-design-curve-title-1 {
		position: absolute;
		bottom: auto;
		left: 0;
		z-index: 11;
		top: 0;
	}

	#tl-overview-design-curve-title-2 {
		right: 0;
		left: auto;
		bottom: 0;
		top: auto;
		z-index: 11;
	}
}

@media only screen and (max-width: 599px) {
	#tl-battery-superCharge li {
		height: 50vh;
	}
}

picture {
	font-size: 0;
}

@media (max-width: 1200px) and (max-aspect-ratio: 1 / 1) {
	#tl-camera-styles .tl-container {
		padding-bottom: calc(160vw - 100vh + 65px);
	}
}


#tl-wrapper .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
}

@media only screen and (min-width: 601px) {
	#tl-overview-design-colors .swiper-pagination.tl-mob {
		display: none;
	}
}

.tl-overview-design-curve-description h2 {
	text-align: center;
}

.tl-accessories {
	height: 0;
	width: 0;
	padding: 0;
	margin: 0;
	font-size: 0;
	line-height: 0;
	opacity: 0;
	visibility: hidden;
}


/*0916change-qiao-start*/
.tl-reasons-to-buy-text {
	opacity: 0;
}

#tl-overview-design-curve-title-2 {
	text-align: right;
	right: 0;
	left: auto;
	width: 100%;
}

.tl-overview-design-colors-composition {
	height: 100%;
	-webkit-transition: -webkit-transform 5s cubic-bezier(.25, 1.6, .6, .95);
	transition: -webkit-transform 5s cubic-bezier(.25, 1.6, .6, .95);
	transition: transform 5s cubic-bezier(.25, 1.6, .6, .95);
	transition: transform 5s cubic-bezier(.25, 1.6, .6, .95), -webkit-transform 5s cubic-bezier(.25, 1.6, .6, .95);
	-webkit-transform-origin: 50% 20%;
	transform-origin: 50% 20%;
}

@media (max-width:1024px) {
	.tl-overview-design-colors-composition {
		height: 95%;
	}
	.tl-overview-design-colors-name{
		font-size: 2.2vw;
	}
}
@media (max-width:599px) {
	.tl-overview-design-colors-name{
		font-size: 3.2vw;
	}
}

.tl-huaweiBrowser {
	height: 100vh;
	width: 100%;
}

.tl-8cols {
	width: 100%;
}

.tl-emui-video-description {
	margin: 0 auto;
}

#tl-emui-video-container {
	height: calc((100vh - 65px) * 1.75);
}

.tl-emui-dark-mode-container {
	width: 75%;
}

@-webkit-keyframes hueRotate {
	0% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}

	50% {
		-webkit-filter: hue-rotate(50deg);
		filter: hue-rotate(50deg);
	}

	100% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}
}

@keyframes hueRotate {
	0% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}

	50% {
		-webkit-filter: hue-rotate(50deg);
		filter: hue-rotate(50deg);
	}

	100% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}
}

.tl-scroll-down-caption {
	font-size: calc(0.259vw + 15.02720px);
	font-size: 400;
}

.tl-opacity-pc {
	opacity: 1;
}

.tl-opacity-mob {
	opacity: 0;
}

@media (max-width: 600px),
(max-width: 1200px) and (max-aspect-ratio: 1 / 1) {
	#tl-overview-design-halo {
		height: 150vh;
	}

	#tl-camera-styles {
		height: 350vh;
	}

	.tl-emui-dark-mode-container {
		width: 90%;
	}

	#tl-performance-kirin-5G .tl-performance-composition .tl-3cols {
		width: 100%;
	}
}

/*0916change-qiao-end*/

/*0917change-qiao-start*/
_:-ms-input-placeholder,
:root .tl-overview-design-curve-title {
	opacity: 0;
}

_:-ms-input-placeholder,
:root #tl-overview-design-halo {
	height: auto;
}

_:-ms-input-placeholder,
:root #tl-overview-design-curve .tl-container-animated {
	height: auto;
}

_:-ms-input-placeholder,
:root .tl-overview-design-halo-title {
	position: static;
	height: auto;
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	padding-top: 10.66vw;
}

_:-ms-input-placeholder,
:root #tl-overview-design-halo-composition {
	transform: scale3d(1, 1, 1) rotate(-0.1deg);
	-webkit-transform: scale3d(1, 1, 1) rotate(-0.1deg);
}

_:-ms-input-placeholder,
:root #tl-overview-design-halo-composition img {
	transform: translate3d(0%, 0%, 0px) scale3d(0.295, 0.295, 1);
}

_:-ms-input-placeholder,
:root #tl-camera-styles {
	height: auto;
}

_:-ms-input-placeholder,
:root #tl-camera-styles-video {
	position: relative;
}

_:-ms-input-placeholder,
:root .tl-camera-styles-video-description {
	margin: 0 auto;
	position: absolute;
	top: 25%;
	width: 100%;
	transform: translateY(-50%);
}

_:-ms-input-placeholder,
:root #tl-camera-styles-video video {
	opacity: 0.5;
}

_:-ms-input-placeholder,
:root #tl-emui-video-container {
	height: auto;
}

_:-ms-input-placeholder,
:root #tl-emui-video {
	opacity: 0.5;
}

_:-ms-input-placeholder,
:root #tl-emui-video-container .tl-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

_:-ms-input-placeholder,
:root .tl-battery-superCharge-composition {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}

_:-ms-input-placeholder,
:root #tl-overview-design-curve-composition-img {
	display: none;
}

_:-ms-input-placeholder,
:root .tl-overview-circle {
	display: none;
}

_:-ms-input-placeholder,
:root .tl-emui-dark-mode img {
	z-index: 11;
	position: relative;
}

_:-ms-input-placeholder,
:root .tl-emui-dark-mode-container {
	z-index: 12;
}

_:-ms-input-placeholder,
:root #tl-camera-styles-fourCamera-loop {
	z-index: 21;
}

_:-ms-input-placeholder,
:root .tl-learn-more a:link,
_:-ms-input-placeholder,
:root .tl-learn-more a:visited {
	box-shadow: none;
}

_:-ms-input-placeholder,
:root .tl-overview-design-colors li {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}

_:-ms-input-placeholder,
:root .tl-overview-design-colors-container {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}

#tl-camera-styles-4KHDR .tl-huaweiBrowser {
	top: 0;
	left: 0;
}

#tl-camera-styles-detail-video {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 102%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

_:-ms-input-placeholder,
:root .tl-scroll-down-caption,
_:-ms-input-placeholder,
:root .tl-scroll-down {
	display: none;
}

/*0917change-qiao-end*/

/*0918change-qiao-start*/
.tl-huaweiBrowser {
	opacity: 0;
}

#tl-camera-styles-4KHDR .tl-huaweiBrowser {
	transform: none;
}

.tl-reasons-list a {
	display: flex;
	flex-direction: column-reverse;
}

#tl-wrapper .tl-reasons-list p {
	font-size: 1vw;
	height: 2.5em;
}

.tl-reasons-list .tl-reasons-image {
	margin: 0;
}

.tl-reasons-list li.lazyloaded:nth-of-type(1) {
	background-image: url(../../images/tl/reason/mate30-pro-5g-pic-reasons-to-buy-innovative.png);
	background-size: 90%;
	background-position: top right;
	background-repeat: no-repeat;
}

.tl-reasons-list li.lazyloaded:nth-of-type(4) {
	background-image: url(../../images/tl/reason/mate30-pro-5g-pic-reasons-to-buy-battery.png);
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
}

.tl-reasons-to-buy .tl-container {
	text-align: center;
}

.tl-reasons-to-buy-text {
	opacity: 1;
	position: static;
	margin-bottom: 4vw;
	display: block;
	transform: none;
	font-size: calc(4.44vw + -21px);
	font-weight: 700;
}

@media (max-width: 600px),
(max-width: 1200px) and (max-aspect-ratio: 1 / 1) {
	#tl-wrapper .tl-battery-superCharge-scenariosName {
		font-size: 2vw;
	}

	.tl-reasons-list {
		width: 100%;
		margin: 0 auto;
	}

	.tl-reasons-to-buy .swiper-pagination-bullets {
		bottom: -20% !important;
	}

	.tl-reasons-to-buy .tl-container,
	#tl-overview-kv-container,
	.tl-overview-design-halo-description,
	.tl-overview-design-curve-description h2,
	.tl-overview-design-curve-description p,
	#tl-performance-kirin-5G.tl-container div.tl-3cols,
	.tl-battery .tl-container,
	.tl-security .tl-container,
	.tl-family .tl-container,
	#tl-performance-kirin-5G .tl-performance-composition .tl-3cols,
	#tl-family-hidden-trigger .tl-h1 {
		text-align: left;
	}

	.tl-family .tl-h1 {
		padding-bottom: 0;
	}

	.tl-emui-dark-mode-container {
		width: 85%;
		margin: 0 7.5%;
	}

	.tl-emui-connectivity-composition div.tl-3cols:nth-of-type(1) {
		width: 85%;
	}

	#tl-security-slogan {
		width: 85%;
		margin: 0 auto;
	}

	.tl-reasons-to-buy-text {
		font-size: calc(2.38vw + 19px);
	}

	#tl-overview-design-curve-composition-img {
		width: 100%;
	}
	#tl-wrapper .tl-reasons-list p{
		font-size: calc(0.91vw + 13px);
	}
	#tl-wrapper .tl-battery-superCharge-scenariosName{
		calc(1.31vw + 8px);
	}
}

/*0918change-qiao-end*/

/*0919change-qiao-start*/
@media only screen and (width: 1024px) {
	.tl-camera-styles-detail-des-wapper h2{
		margin-top: 0;
	}
}
@media only screen and (max-width: 1199px){
	#tl-overview-design-curve-container{
		height: 65vh;
	}
}
/*0919change-qiao-end*/

#tl-tvc{
	display: none;
	}
	#tl-emui-gesture-control{
		display: none;  
	}
	
	#tl-camera-styles-portraitCamera{
		display: none;  
	}