.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;
}
.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-4g-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-4g-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-4g-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-4g-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-4g-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-4g-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-4g-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;
}

.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-4g-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-4g-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-4g-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-4g-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-4g-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-4g-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-4g-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;
	}
	
	.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-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;
}

_:-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-4g-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-4g-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-performance-more{
		position: relative;
	}
	.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*/