.yale-container body,
.yale-container div,
.yale-container span,
.yale-container applet,
.yale-container object,
.yale-container iframe,
.yale-container h1,
.yale-container h2,
.yale-container h3,
.yale-container h4,
.yale-container h5,
.yale-container h6,
.yale-container p,
.yale-container blockquote,
.yale-container pre,
.yale-container a,
.yale-container abbr,
.yale-container acronym,
.yale-container address,
.yale-container big,
.yale-container cite,
.yale-container code,
.yale-container del,
.yale-container dfn,
.yale-container em,
.yale-container img,
.yale-container ins,
.yale-container kbd,
.yale-container q,
.yale-container s,
.yale-container samp,
.yale-container small,
.yale-container strike,
.yale-container strong,
.yale-container tt,
.yale-container var,
.yale-container b,
.yale-container u,
.yale-container i,
.yale-container center,
.yale-container dl,
.yale-container dt,
.yale-container dd,
.yale-container ol,
.yale-container ul,
.yale-container li,
.yale-container fieldset,
.yale-container form,
.yale-container label,
.yale-container legend,
.yale-container table,
.yale-container caption,
.yale-container tbody,
.yale-container tfoot,
.yale-container thead,
.yale-container tr,
.yale-container th,
.yale-container td,
.yale-container article,
.yale-container aside,
.yale-container canvas,
.yale-container details,
.yale-container embed,
.yale-container figure,
.yale-container figcaption,
.yale-container footer,
.yale-container header,
.yale-container menu,
.yale-container nav,
.yale-container output,
.yale-container ruby,
.yale-container section,
.yale-container summary,
.yale-container time,
.yale-container mark,
.yale-container audio,
.yale-container video,
.yale-container p{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: middle;
}
@font-face {
	font-family: 'Avenir Next Light';
	src: url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-light/avenirnext-light.eot');
	src: url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-light/avenirnext-light.eot?#iefix') format('embedded-opentype'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-light/avenirnext-light.woff') format('woff'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-light/avenirnext-light.woff2') format('woff2'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-light/avenirnext-light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal
}


@font-face {
	font-family: 'Avenir Next Regular';
	src: url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-regular/avenirnext-regular.eot');
	src: url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-regular/avenirnext-regular.eot?#iefix') format('embedded-opentype'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-regular/avenirnext-regular.woff') format('woff'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-regular/avenirnext-regular.woff2') format('woff2'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-regular/avenirnext-regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal
}


@font-face {
	font-family: 'Avenir Next Medium';
	src: url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-medium/avenirnext-medium.eot');
	src: url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-medium/avenirnext-medium.eot?#iefix') format('embedded-opentype'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-medium/avenirnext-medium.woff') format('woff'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-medium/avenirnext-medium.woff2') format('woff2'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-medium/avenirnext-medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal
}


@font-face {
	font-family: 'Avenir Next Demi Bold';
	src: url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-demibold/avenirnext-demibold.eot');
	src: url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-demibold/avenirnext-demibold.eot?#iefix') format('embedded-opentype'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-demibold/avenirnext-demibold.woff') format('woff'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-demibold/avenirnext-demibold.woff2') format('woff2'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-demibold/avenirnext-demibold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal
}


@font-face {
	font-family: 'Avenir Next Bold';
	src: url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-bold/avenirnext-bold.eot');
	src: url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-bold/avenirnext-bold.eot?#iefix') format('embedded-opentype'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-bold/avenirnext-bold.woff') format('woff'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-bold/avenirnext-bold.woff2') format('woff2'), url('/etc/designs/honor-site/common/fonts/css/fonts/avenirnext-bold/avenirnext-bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal
}

#yale-container sup {
    top: -.43em;
}
/*#yale-container img{
	width: 100%
}*/
body{
	background: black;
}
.header{
	position: relative;
	z-index: 9;
}
#yale-container{
	width: 100%;
    /*max-width: 1920px;*/
    margin: 0 auto;
    background: #000000;
    color: #F9F9F9;
    font-family: "Avenir Next Regular", Helvetica, Arial, sans-serif;
}
.yale-container .yale-section{
	width: 100%;
	padding: 120px 0;
	font-size: 0;
	position: relative;
}
.yale-container .yale-banner{
	width: 80%;
	margin: 0 auto;
}
.yale-container .yale-bg{
	opacity: 0;
	width: 100%;
}
.yale-container .yale-LRbox{
	display: inline-block;
    width: 50%;
    box-sizing: border-box;
}
.yale-container .yale-mob{
	display: none;
}
.yale-container .yale-h2 {
    margin: 0 0 0.5em 0;
    line-height: 1.25em;
    font-weight: bold;
    letter-spacing: -0.016em;
    font-size: 4.33vw;
}
.yale-container .yale-h2 span {
    word-break: keep-all;
}
.yale-container .yale-p {
    line-height: 2em;
    font-size: 1.4vw;
    /*margin: 0 0 0.5em 0;*/
}
.yale-container .yale-des-title{
	line-height: 1.25em;
	font-size: 2.18vw;
	font-weight: bold;
}
.yale-container .yale-des{
	line-height: 1.25em;
	font-size: 1.09vw;
}
.yale-container .yale-weight{
	font-weight: bold;
}
@media (min-width: 1920px) {
.yale-container .yale-h2{
		font-size: 83px;
	}
.yale-container .yale-p{
		font-size: 27px;
	}
.yale-container .yale-des-title{
		font-size: 42px;
	}
.yale-container .yale-des{
		font-size: 21px;
	}
}
.yale-container .yale-detail .yale-LRbox{
	padding: 0;
	width: 30%;
	text-align: center;
	max-width: 250px;
}
.yale-container .yale-icon{
	width: 6.5vw;
	max-width: 125px;
}
[class^="yale-text-animate"] {
    display: inline-block;
    overflow-y: hidden;
    position: relative;
    line-height: 1.5em;
    margin-top: -0.25em;
    margin-bottom: -0.25em;
}

[class^="yale-text-animate"]>span {
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
    display: block;
}
.yale-container .animated [class^="yale-text-animate"]>span {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.yale-container .yale-text-animate-1>span {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.yale-container .yale-text-animate-2>span {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.yale-container .yale-text-animate-3>span {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.yale-container .yale-text-animate-4>span {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.yale-container .yale-text-animate-5>span {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.yale-container .yale-text-animate-6>span {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.yale-container .yale-text-animate-7>span {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}
.yale-container .yale-text-animate-8>span {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
}
.yale-container .yale-text-animate-9>span {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}
.yale-container .yale-text-animate-10>span {
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

/*section1*/
.yale-container .section1{
	text-align: center;
	background-size: cover;
	/*background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s1_pc_bg.jpg) center no-repeat;*/
overflow: hidden;
}
.yale-container .section1 .yale-h2{
	letter-spacing:1px;
}
.yale-container .yale-kv-title{
	width: 40%;
	margin: 0 auto;
	max-width: 768px;
	position: relative;
	z-index: 1;
}
.yale-container .yale-kv-title img{
	width: 100%;
}
.yale-container .section1-content{
	width: 60%;
	max-width: 1065px;
	margin: 0 auto;
}
.yale-container .section1 .yale-animate-wrap{
	width: 100%;
	height: 100vh;
	margin-top:  -50vh;
	position: relative;
	text-align: center;
	z-index: 0;
	/*overflow: hidden;*/
}
.yale-container .section1 .yale-animate-wrap img{
}
.yale-container .section1 .yale-h2{
	position: relative;
	z-index: 1;
}
#section1-sequence{
	position: relative;
	top: calc(50vh - 50vh);
}
img#yale-img-sequence{
	height: 100%;
	width: auto;
}
#yale-img-sequence-last{
	height: 100%;
	width: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: 0;
	z-index: 2;
	-webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
#yale-img-skirt{
	height: 53%;
	position: absolute;
	 top: 67%;
    left: 51%;
	transform: translate(-50%,-50%);
	opacity: 0;
	z-index: 1;
	transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.yale-container .section1 .yale-img-bg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	-webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    opacity: 0;
}

#yale-sequence-ie{display: none;}
/*ie & edge*/
	_:-ms-lang(x), #yale-sequence-ie{
		display: inline-block;
		height: 100vh;
		width: 64vh;
	}
	_:-ms-lang(x), #yale-sequence-ie{
		background: url(/content/dam/honor/cz/products/smartphone/honor20/img/sequence/sequence.jpg);
		background-size:cover
	}
	_:-ms-lang(x), #yale-sequence-ie img{
		opacity: 0;
		height: 100%;
		width: auto;
	}
	_:-ms-lang(x), img#yale-img-sequence{
		display: none;
	}
.yale-container .animated-bg .yale-img-sequence,
.yale-container .animated-bg .yale-sequence-ie{
	opacity: 0;
}
.yale-container .animated-bg #yale-img-sequence-last{
	opacity: 1;
}
.yale-container .animated-bg #yale-img-skirt{
	opacity: 1;
}
.yale-container .animated-bg .yale-img-bg{
	opacity: 1;
}
/*section2*/
.yale-container .section2{
	padding: 15% 0;
	background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s2_pc_bg.jpg) no-repeat;
	background-size: contain;
	background-position: right;
}
@media (min-device-pixel-ratio: 1.5),
(min-width: 769px) {
.yale-container .section2{
		background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s2_pc_bg@2x.jpg) no-repeat;
		background-size: contain;
		background-position: right;
	}
}
.yale-container .section2-content{
	width: 49%;
}
.yale-container .section2 .yale-LRbox{
	padding-left: 6vw;
}
.yale-container .section2 .yale-detail{
	margin-top: 10vh;
}
.yale-container .section2 .yale-detail .yale-LRbox{
	padding: 0;
	width: auto;
}
.yale-container .section2 .yale-detail .yale-LRbox:first-child{
	margin-right: 50px;
}
/*section3*/
.yale-container .section3{
	padding: 0;
}
.yale-container .section3-content{
	width: 45%;
	position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}
.yale-container .section3 .yale-animate-wrap{
	position: relative;
	z-index: 0;
}
.yale-container .section3 .yale-LRbox{
	padding-left: 6vw;
}
.yale-container .section3 .yale-detail{
	margin-top: 10vh;
}
.yale-container .section3 .yale-detail .yale-LRbox{
	padding: 0;
	width: auto;
}
.yale-container .section3 .yale-icon{
	margin: 0 0 1em 0;
}
.yale-container .section3 .yale-animate-wrap{
	
}
.yale-container .section3 .yale-img-bg{
	width: 100%;
}
.yale-container .yale-img-fingerprint{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	opacity: 0;
	-webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
     -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.yale-container .animated .yale-img-fingerprint{
	opacity: 1;
}
/*section4*/
.yale-container .section4{
	background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s4_pc_bg.jpg) no-repeat;
	background-size: cover;
    background-position: center;
    padding: 120px 0;
}
@media (min-device-pixel-ratio: 1.5),
(min-width: 769px) {
.yale-container .section4{
		background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s4_pc_bg@2x.jpg) no-repeat;
		background-size: cover;
	    background-position: center;
	}
}
.yale-container .section4 .yale-banner{
	width: 80%;
	position: relative;
	margin: 0 auto;
	text-align: center;
}
.yale-container .yale-img-phone,
.yale-container .yale-img-shadow{
	-webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

/*change-color*/
.yale-container .section4-content{
	text-align: center;
    width: 67%;
    margin: 0 auto 15%;
}
.yale-container .yale-img-phone{
	-webkit-transform: translate(0, -10%);
	transform: translate(0, -10%);
	width: 80%;
}
.yale-container .yale-img-shadow{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	transform: translateY(10%)scale(1.2);
}
.yale-container .animated .yale-img-phone{
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
.yale-container .animated .yale-img-phone.change-phone-color-bg{
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.yale-container .animated .yale-img-shadow{
	-webkit-transform: translateY(0%) scale(0.9);
	transform: translateY(0%) scale(0.9);
}
/*section5*/
.yale-container .section5{
	padding-bottom: 0;
}
.yale-container .section5 .yale-LRbox.Lbox{
	padding: 0 6vw;
	padding-right: 5vw;
	margin-top: 8vh;
	vertical-align: top;
}
.yale-container .section5 .yale-LRbox.Rbox{
	/*background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s5_phone.png) no-repeat;
	background-size: contain;
	background-position: bottom right;*/
	text-align: right;
	position: relative;
}
.yale-container .yale-img-cameras{
	width: 65%;
}
.yale-container .section5 .yale-LRbox.Rbox svg{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.yale-container .yale-path{
	stroke-width:2;
	opacity: 0.7;
	stroke: white;
	fill: none;
}
.yale-container .animated [class^="yale-path"]{
    -moz-animation: svgPath 0.5s linear;	
	-webkit-animation: svgPath 0.5s linear;
	-o-animation: svgPath 0.5s linear;
	animation: svgPath 0.5s linear ;
	animation-fill-mode: forwards;
}
.yale-container .path1{
	stroke-dashoffset:220;
	stroke-dasharray: 220;
}
.yale-container .path2{
	stroke-dashoffset:580;
	stroke-dasharray: 580;
}
@keyframes svgPath{
	to{
		stroke-dashoffset: 0;	
	}
}
@-moz-keyframes svgPath{
	to{
		stroke-dashoffset: 0;	
	}
}
@-webkit-keyframes svgPath{
	to{
		stroke-dashoffset: 0;	
	}
}
@-o-keyframes  svgPath{
	to{
		stroke-dashoffset: 0;	
	}
}
.yale-container .section5 .yale-icon{
	width: 2.18vw;
	max-width: 42px;
	display: inline-block;
	margin-right: 10px;
}
.yale-container .yale-des-wrap{
	display: inline-block;
}
.yale-container .section5 .yale-detail{
	position: absolute;
    text-align: left;
    left: 5%;
    display: inline-block;
    overflow: hidden;
}
.yale-container .yale-detail-animate{
	-webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transform: translate(200%, 0);
    transform: translate(200%, 0);
    display: inline-block;
}
.yale-container .animated .yale-detail-animate{
	/*-webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;*/
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
@media (min-width: 1920px) {
.yale-container .section5 .yale-detail{
	    width: 230px;
	    right: 74%;
	    left: auto;
	}
}
.yale-container .section5 .detail1{
	top: 10.5%;
}
.yale-container .section5 .detail2{
	top: 24.5%;
}
.yale-container .section5 .detail3{
	top: 39%;
}
.yale-container .section5 .detail4{
	top: 59%;
}

/*section6*/
.yale-container .section6 .yale-LRbox{
	text-align: center;
}
.yale-container .yale-img-camera{
	width: 80%;
}
.yale-container .section6 .yale-LRbox.section6-content{
	text-align: right;
	padding: 0 6vw;
}
.yale-container .section6 .yale-detail{
	margin-top: 10vh;
}
.yale-container .section6 .yale-icon{
	max-width: 80px;
	width: 4.16vw;
	margin: 0 0 1em 0;
}
.yale-container .section6 .yale-detail .yale-LRbox{
	width: 20%;
	vertical-align: top;
}
.yale-container .section6 .yale-detail .yale-p{
	font-size: 12px;
}

/*section7*/
.yale-container .section7{
	transform: translateZ(0);
}
.yale-container .section7 .yale-LRbox{
	text-align: center;
}
/*.yale-img-camera{
	width: 80%;
}*/
.yale-container .section7 .yale-LRbox.section7-content{
	text-align: left;
	padding: 0 6vw;
}
.yale-container .section7 .yale-detail{
	margin-top: 10vh;
}
.yale-container .section7 .yale-icon{
	max-width: 80px;
	width: 4.16vw;
	margin: 0 0 1em 0;
}
.yale-container .section7 .yale-detail .yale-LRbox{
	width: 20%;
	vertical-align: top;
}
.yale-container .section7 .yale-detail .yale-p{
	font-size: 12px;
}
/*.yale-container .section7 .Rbox{
	display:-webkit-inline-flexbox;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:-webkit-inline-flex;
	display: inline-flex;
	padding-right: 6vw;
	-webkit-box-pack:flex-end;
	-moz-box-pack:end;
	-ms-flex-pack:end;
	-webkit-justify-content:flex-end;
	justify-content: flex-end;
	-webkit-box-align:center;
	-moz-box-align:center;
	-ms-flex-align:center;
	-webkit-align-items:center;
    align-items: center;
}*/
.yale-container .yale-imgList,
.yale-container .yale-idList{
	display: inline-block;
	overflow: hidden;
}
.yale-container .yale-imgList img,
.yale-container .yale-idList img{
	width: 100%;
}
.yale-container .yale-imgList{
	width: 35vw;
    height: calc(35vw * 0.607);
    border-radius: 30px;
    position: relative;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
.yale-container .yale-idList{
	width: calc(35vw * 0.608 *0.196);
    margin-left: 4%;
    height: calc(35vw * 0.608);
}
.yale-container .section7 .Rbox img{
	display: block;
}
.yale-container .yale-imgList div{
	-webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform, -webkit-transform;
     transition-property: transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transform: translate(0, 0);
    transform: translate(0,0);
}
.yale-container .yale-idList div{
	-webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform, -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transform: translate(0, 0);
    transform: translate(0,0);
}
#section7-slider1,
#section7-slider2,
#section7-setpin{
	position: relative;
}
.yale-container .animated-slider1 .yale-imgList div,
.yale-container .animated-slider1 .yale-idList div{
	-webkit-transform: translate(0, -50%);
	transform: translate(0,-50%);
    /*transform: translate(0,-21.29vw);*/
}
.yale-container .animated-slider2 .yale-imgList div,
.yale-container .animated-slider2 .yale-idList div{
	-webkit-transform: translate(0, -100%);
	transform: translate(0,-100%);
    /*transform: translate(0,-42.58vw);*/
}



/*section8*/
.yale-container .section8{
	background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s8_pc_bg.jpg) center no-repeat;
	background-size: cover;
	padding: 120px 0;
	background-position: center;
}

@media (min-device-pixel-ratio: 1.5),
(min-width: 769px) {
.yale-container .section8{
		background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s8_pc_bg@2x.jpg) center no-repeat;
		background-size: cover;
	}
}
@media (min-width: 769px) {
	.yale-container .section8{
		padding-bottom: 10%;
		background-position: 50% 88%;
	}
}
.yale-container .section8 .yale-LRbox.section8-content{
	padding: 0 6vw;
}
.yale-container .section8 .yale-LRbox.Rbox{
	text-align: center;
}
.yale-container .yale-img-nightMode{
	margin-top: 120px;
	width: 60%;
}


/*section9*/
.yale-container .section9 .yale-LRbox.section9-content{
	padding: 0 6vw;
    text-align: right;
}
.yale-container .section9 .yale-LRbox.Rbox{
	text-align: center;
}
.yale-container .yale-img-selfie{
	width: 60%;
}

/*section10*/
.yale-container .section10{
	padding: 60px 0 0;
}
.yale-container .section10 img{
	width: 100%;
}
.yale-container .section10 .yale-LRbox.section10-content{
	padding-left: 6vw;
	text-align: left;
	position: absolute;
	top: 43%;
	left: 0;
	transform: translateY(-50%);
}
.yale-container .yale-img-s10phone,
.yale-container .yale-img-bird,
.yale-container .yale-img-wing{
	position: absolute;
	top: 0;
	left: 0;
}
.yale-container .yale-img-wing{
	opacity: 0;
	/*-webkit-transition-property: opacity;
    transition-property: opacity;*/
    /*-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);*/
}
.yale-container .animated .yale-img-wing.wing1{
    z-index: 1;
    animation: fadein 5s;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.yale-container .animated .yale-img-wing.wing2{
    z-index: 2;
    animation: fadein 5s;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.yale-container .animated .yale-img-wing.wing3{
     z-index: 3;
     animation: fadein 5s;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.yale-container .animated .yale-img-wing.wing4{
     z-index: 4;
     animation: fadein 5s;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.yale-container .animated .yale-img-wing.wing5{
     z-index: 5;
     animation: fadein 5s;
    animation-fill-mode: forwards;
    -webkit-animation-delay:1.2s;
    animation-delay:1.2s;
}
.yale-container .animated .yale-img-wing.wing6{
     z-index: 6;
     animation: fadein 5s;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
.yale-container .animated .yale-img-wing.wing7{
	
     z-index: 7;
     animation: fadein 5s;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}
.yale-container .animated .yale-img-wing.wing8{
     z-index: 8;
     animation: fadein 5s ;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
.yale-container .animated .yale-img-wing.wing9{
    z-index: 9;
    animation: fadein 5s ;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
.yale-container .animated .wing1,
.yale-container .animated .wing2,
.yale-container .animated .wing3,
.yale-container .animated .wing4,
.yale-container .animated .wing5,
.yale-container .animated .wing6,
.yale-container .animated .wing7,
.yale-container .animated .wing8,
.yale-container .animated .wing9{
	
}
 @keyframes fadein {
    0%{
        opacity:0;
    }
    50%{
    	 opacity:1;
    }
    100%{
         opacity:0;
    }
}
.yale-container .yale-img-s10phone{
	z-index: 10;
	opacity: 0;
	-webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.yale-container .animated .yale-img-s10phone{
	opacity: 1;
}
/*section11*/
.yale-container .section11 .yale-LRbox.section11-content{
	padding: 0 6vw;
	text-align: right;
}
.yale-container .section11 .yale-LRbox.Rbox{
	text-align: center;
}
.yale-container .yale-img-selfie{
	width: 60%;
}
/*section12*/
.yale-container .section12{
	background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s12_pc_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	padding: 10% 0;
}
.yale-container .section12 .yale-LRbox.section12-content{
	padding-left: 6vw;
}
.yale-container .section12 .yale-des-wrap{
	width: 43%;
}
.yale-container .section12 .yale-des-title{
	line-height: 2em;
}
.yale-container .section12 .yale-des-wrap .yale-p{
	line-height: 1.25em;
}
.yale-container .section12 .yale-animate-wrap{
	margin-top: 40px;
}
.yale-container .yale-animate-bar{
	background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s12_numBar.png) no-repeat;
	background-size: 100% 100%;
	background-position: left;
	height: 1.09vw;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	-webkit-transition-property: width;
    transition-property: width;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    margin-top: 5px;
}
@media (min-width: 1920px) {
.yale-container .yale-animate-bar{
		height: 21px;
	}
}
#cpu-bar1{
	width: 0%;
}
#cpu-bar2{
	width: 0%;
}
#gpu-bar1{
	width: 0%;
}
#gpu-bar2{
	width: 0%;
}
.yale-container .animated #cpu-bar1{
	width: 32.5%;
}
.yale-container .animated #cpu-bar2{
	width: 29%;
}
.yale-container .animated #gpu-bar1{
	width: 23%;
}
.yale-container .animated #gpu-bar2{
	width: 89%;
}

/*section13*/
.yale-container .section13{
	text-align: center;
	overflow: hidden;
}
.yale-container .section13-content{
	position: relative;
	z-index: 1;
}
.yale-container .section13 img{
	margin-top: -10%;
	position: relative;
	z-index: 0;
	width: 100%;
}

/*section14*/
.yale-container .section14{
	text-align: center;
}
.yale-container .section14 img{
	width: 100%;
}
.yale-container .section14 .yale-detail{
	width: 80%;
	margin: 3vw auto 0;
	display: -webkit-flexbox;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align:center;
	-moz-box-align:center;
	-ms-flex-align:center;
	-webkit-align-items:center;
	align-items:center;
	-webkit-box-pack:space-around;
	-moz-box-pack:justify;
	-ms-flex-pack :justify;
	-webkit-justify-content:space-around;
	justify-content:space-around;
}
.yale-container .yale-des-split{
	width: 2px;
    height: 3vw;
    background: #FFFFFF;
}
.yale-container .section14 .yale-des-title{
	margin-top: 0.2em;
}


/*section15*/
.yale-container .section15{
	text-align: center;
}
.yale-container .section15-content{
	position: relative;
	z-index: 2;
}
.yale-container .section15 img{
	margin-top: -220px;
	position: relative;
	z-index: 0;
	width: 100%;
}
.video-contain.video-gpu{
	margin-top: -13%;
}
#yale-container .section15-content sup{
	    font-size: 50%;
    top: -1em;
}

/*section16*/
.yale-container .section16{
	text-align: center;
}
.yale-container .section16-content{
	width: 60%;
	max-width: 1152px;
	margin: 0 auto;
}
.yale-container .section16 .yale-animate-wrap{
	position: relative;
	margin-top: 30px;
	overflow:hidden;
}
.yale-container .section16 .yale-animate-wrap img{
	width: 100%;
}
.yale-container .yale-img-stars{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 3s;
    transition-duration: 3s;
}
.animated .yale-img-stars{
	opacity: 1;
}
/*.animated .yale-img-stars.img-stars1{
	-moz-animation: starsAnimated 2s linear;	
	-webkit-animation: starsAnimated 2s linear;
	-o-animation: starsAnimated 2s linear;
	animation: starsAnimated 2s linear ;
	animation-fill-mode: forwards;
}
.animated .yale-img-stars.img-stars2{
	-moz-animation: starsAnimated 2s linear;	
	-webkit-animation: starsAnimated 2s linear;
	-o-animation: starsAnimated 2s linear;
	animation: starsAnimated 2s linear ;
	animation-delay: 0.7s;
	animation-fill-mode: forwards;
}
.animated .yale-img-stars.img-stars3{
	-moz-animation: starsAnimated 2s linear;	
	-webkit-animation: starsAnimated 2s linear;
	-o-animation: starsAnimated 2s linear;
	animation: starsAnimated 2s linear ;
	animation-delay: 1.4s;
	animation-fill-mode: forwards;
}*/
@keyframes starsAnimated{
	from{
		opacity: 1;
	}
	15%{
		opacity: 1;
	}
	18%{
		opacity: 0;
	}
	21%{
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	83%{
		opacity: 0;
	}
	86%{
		opacity: 1;
	}
	to{
		opacity: 1;
	}
}
@-moz-keyframes starsAnimated{
	from{
		opacity: 1;
	}
	15%{
		opacity: 1;
	}
	18%{
		opacity: 0;
	}
	21%{
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	83%{
		opacity: 0;
	}
	86%{
		opacity: 1;
	}
	to{
		opacity: 1;
	}
}
@-o-keyframes starsAnimated{
	from{
		opacity: 1;
	}
	15%{
		opacity: 1;
	}
	18%{
		opacity: 0;
	}
	21%{
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	83%{
		opacity: 0;
	}
	86%{
		opacity: 1;
	}
	to{
		opacity: 1;
	}
}
@-webkit-keyframes starsAnimated{
	from{
		opacity: 1;
	}
	15%{
		opacity: 1;
	}
	18%{
		opacity: 0;
	}
	21%{
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	83%{
		opacity: 0;
	}
	86%{
		opacity: 1;
	}
	to{
		opacity: 1;
	}
}


/*section17*/
.yale-container .section17{
	text-align: center;
}

.yale-container .section17 .yale-animate-wrap{
	margin-top: 30px;
	overflow: hidden;
}
.yale-container .section17 .yale-animate-wrap div{
	overflow: hidden;
	display: inline-block;
	margin: 0 3vw;
	width: 5%;
	max-width: 100px;
}
.yale-container .yale-img-old,
.yale-container .yale-img-new{
	-webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform, -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transform: translate(0, 100%);
	transform: translate(0,100%);
	-webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.yale-container .yale-img-old{
	width: 20%;
	max-width: 400px;
}
.yale-container .yale-icon-transform{
	-webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform, -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
	-webkit-transform: translate(-100%, 0);
	transform: translate(-100%,0);
	-webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
    width: 100%;
}
.yale-container .yale-img-new{
	width: calc(20% * 1.095);
	max-width: calc(400px * 1.095);
}
.yale-container .animated .yale-img-old,
.yale-container .animated .yale-img-new,
.yale-container .animated .yale-icon-transform{
	-webkit-transform: translate(0, 0%);
	transform: translate(0,0%);
}

/*section18*/
.yale-container .section18 .yale-p span{
	padding-bottom: 15px;
	display: block;
}
.yale-container .section18 .yale-h2{
	 text-align: center;
    border-bottom: 2px solid;
    padding-bottom: 0.5em;
}
.yale-container .section18-content2{
	margin-top: 60px;
}
@media (min-width: 769px) {
	.yale-container .section17-content .yale-h2{
		margin-bottom: 0;
	} 
	.yale-container .section17-content{
		margin-bottom: 100px;
	}
}


/*mobile style*/
@media (max-width: 768px) {
	.header{
		position: fixed;
	}
	body{
		overflow-x: visible!important;
	}
.yale-container .yale-mob{
		display: block;
	}
.yale-container .yale-pc{
		display: none;
	}
.yale-container .yale-banner{
		width: 100%;
	}
.yale-container .yale-kv-title{
		width: 65%;
	}
.yale-container .yale-h2{
		font-size: 7.8125vw;
		margin-bottom: 7vw;
		letter-spacing: 1px;
	}
.yale-container .yale-p{
		font-size: 3.645vw;
		line-height: 1.57em;
		opacity: 0.8;
		letter-spacing: 0.2px;
	}
.yale-container .yale-des-title{
		font-size: 4.16vw;
	}
.yale-container .yale-des{
		font-size: 2.34vw;
	}
.yale-container .yale-weight{
		font-weight: normal;
		font-size: 5.2vw;
	}
.yale-container .yale-section{
		padding: 60px 0;
	}
.yale-container .yale-LRbox{
		display: block;
		width: 100%;
	}
.yale-container .yale-icon{
		width: 8.85vw;
	}
	/*section1*/
.yale-container .section1 .yale-animate-wrap{
		width: 100%;
	    /*background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s1_pc_bg.jpg) center no-repeat;*/
	    background-size: cover;
	    overflow: hidden;
	}
.yale-container .section1{
		background: none;
		text-align: left;
	}
.yale-container .section1 .yale-h2{
		width: 100%;
		margin: 0 auto 7vw;
		text-align: center;
	}
.yale-container .section1-content{
		width: 80%;
		margin: 0 auto;
	}
	.yale-container #yale-img-skirt{
		width: 55%;
		height: auto;
	}
	.yale-container .section1 .yale-img-bg{
		width: 150%;
height:100%;
	}
	#section1-sequence-bg{
		position: relative;
		top: -30vh;
	}
	.yale-container #yale-img-sequence-last{
		    top: 50%;
    		left: 50%;
    		transform: translate(-50%,-50%);
	}
	/*section2*/
.yale-container .section2{
		background: none;
		text-align: left;
		padding: 60px 0;
	}
.yale-container .section2 .yale-LRbox{
		width: 80%;
		margin: 0 auto;
		padding: 0;
	}
	.yale-container .section2 .yale-detail{
		margin-top: 30px;
	}
.yale-container .section2 .yale-detail .yale-LRbox{
		display: inline-block;
		width: auto%;
	}
	.yale-container .section2 .yale-detail .yale-LRbox:first-child{
	margin-right: 10%;
}
.yale-container .section2 .yale-banner img{
		width: 100%;
	}
	.yale-container .section2 .yale-banner{
		margin-top: -15%;
	}
	/*section3*/
.yale-container .section3 .yale-LRbox{
		padding-left: 0;
    	width: 80%;
    	margin: 0 auto;
    	position: relative;
    	transform: none;
	}
.yale-container .section3 .yale-detail{
		margin-top: 7.8vw;
	}
.yale-container .section3 .yale-detail .yale-p{
		font-size: 2.3vw;
	}
.yale-container .section3 .yale-detail .yale-LRbox{
		margin-left: 0;
		width: 50%;
	}
.yale-container .section3 .yale-animate-wrap{
		margin-top: -20%;
	}
	
	/*section4*/
.yale-container .section4{
		background: none;
		padding-bottom: 0;
	}
	@media (min-width: 1920px) {
		.yale-container .section4{
			margin-top: -5%;
		}
	}
	.yale-container .section4-content{
		    margin: 0 auto;
	}
.yale-container .section4 .yale-img-bg{
		width: 100%;
	}
.yale-container .section4-content{
		width: 80%;
		text-align: left;
	}
.yale-container .section4 .yale-banner{
		width: 100%;
		overflow: hidden;
	}
.yale-container .yale-img-phone{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
.yale-container .animated .yale-img-phone{
		-webkit-transform: translate(-50%, -80%);
    	transform: translate(-50%, -80%);
	}
.yale-container .animated .yale-img-phone.change-phone-color-bg{
-webkit-transform: translate(-50%, -80%);
    	transform: translate(-50%, -80%);
}
.yale-container .yale-img-shadow{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-5%) scale(1.2);
	}
.yale-container .animated .yale-img-shadow{
		-webkit-transform: translate(-50%, -20%) scale(0.9);
    	transform: translate(-50%, -20%) scale(0.9);
	}
	
	/*section5*/
.yale-container .section5 .yale-LRbox.Lbox{
		margin-top: 0;
	}
.yale-container .section5 .yale-LRbox.Rbox{
		margin-top: 5vw;
	}
	.yale-container .section5 .yale-icon{
		vertical-align: top;
		width: 4.3vw;
    margin-right: 5px;
	}
	/*section6*/
.yale-container .section6{
		display: -webkit-flexbox;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
	}
.yale-container .section6 .yale-LRbox.section6-content{
		padding: 0;
		text-align: left;
		width: 80%;
		margin: 0 auto;
	}
.yale-container .section6 .yale-detail .yale-LRbox{
		display: inline-block;
		width: 25%;
	}
.yale-container .section6 .yale-detail .yale-p{
		font-size: 1.82vw;
	}
.yale-container .section6 .yale-icon{
		width: 8.3vw;
	}
.yale-container .section6 .yale-detail{
		margin-top: 5vw;
	}
	
	/*section7*/
.yale-container .section7 .yale-LRbox.section7-content{
		padding: 0;
		width: 80%;
		margin: 0 auto;
	}
.yale-container .section7 .yale-detail .yale-LRbox{
		display: inline-block;
		width: 25%;
	}
.yale-container .section7 .yale-detail .yale-p{
		font-size: 1.82vw;
	}
.yale-container .section7 .yale-icon{
		width: 8.3vw;
	}
.yale-container .section7 .yale-detail{
		margin-top: 5vw;
	}
.yale-container .section7 .yale-LRbox.Rbox{
	    padding: 0 11%;
	    margin: 5vw auto 0;
	    -webkit-box-pack:center;
		-moz-box-pack:center;
		-ms-flex-pack :center;
		-webkit-justify-content:center;
		justify-content:center;
	}
.yale-container .yale-imgList{
		width: 66vw;
	    height: calc(66vw * 0.605);
	    border-radius: 10px;
	}
.yale-container .yale-idList {
	    width: calc(66vw * 0.608 *0.196);
	    margin-left: 4%;
	    height: calc(66vw * 0.605);
	}
	#section7-slider1{
		top: 40vh;
	}
	#section7-slider2{
		top: 80vh;
	}
	#section7-setpin{
		top: 50vh;
	}
.yale-container .section7 {
	 	height: 200vh;
	}
.yale-container .section7 .yale-LRbox.Rbox{
		position: -webkit-sticky;
		position: sticky;
		top: calc(50vh - (66vw * 0.608 * 0.5));
	}
	/*section8*/
	
	/*section8*/
.yale-container .section8{
		background: url(/content/dam/honor/cz/products/smartphone/honor20/img/pic_s8_mob_bg.jpg) center no-repeat;
		background-size: cover;
		margin: 0;
		padding: 120px 0 60px;
		background-position: center;
	}
.yale-container .section8 .yale-LRbox.section8-content{
		padding: 0;
		width: 80%;
		margin: 0 auto;
	}
.yale-container .section8 .yale-LRbox.Rbox{
		text-align: right;
	}
.yale-container .yale-img-nightMode{
		margin-top: 5vw;
	}
	
		/*section9*/
		.yale-container .section9{
		display: -webkit-flexbox;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
	}
.yale-container .section9 .yale-LRbox.section9-content{
		width: 80%;
		margin: 0 auto;
		text-align: left;
		padding: 0;
text-align: left;
	}
.yale-container .section9 .yale-LRbox.Rbox{
		margin-top: 5vw;
	}
	
	/*section10*/
.yale-container .section10{
	padding: 60px 0;
	}
.yale-container .section10 .Rbox.section10-content{
		padding: 0;
		width: 80%;
		margin: 0 auto;
		text-align: left;
	}
.yale-container .section10 .yale-LRbox.section10-content{
		position: static;
		transform: none;
		padding-left: 0;
		text-align: left;
		width: 80%;
		margin: 0 auto;
	}
.yale-container .section10 .yale-banner{
		position: relative;
	}
.yale-container .yale-mob .yale-img-s10phone{
		position: absolute;
		top: 0;
		left:0;
	}
.yale-container .yale-mob .yale-img-bird{
		position: absolute;
		top: 0;
		left:0;
	}
	
	/*section11*/
	.yale-container .section11{
		display: -webkit-flexbox;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
	}
.yale-container .section11 .yale-LRbox.section11-content{
		width: 80%;
		margin: 0 auto;
		text-align: left;
		padding: 0;
	}
.yale-container .section11 .yale-LRbox.Rbox{
		margin-top: 5vw;
	}
	
	/*section12*/
.yale-container .section12{
		background: none;
	}
.yale-container .section12 .yale-LRbox.section12-content{
		width: 80%;
		margin: 0 auto;
		text-align: left;
		padding: 0;
		position: relative;
		z-index: 1;
	}
.yale-container .section12 .yale-h2{
		margin-bottom: 5vw;
	}
.yale-container .section12 .yale-banner{
		margin-top: -15%;
	    position: relative;
	    z-index: 0;
	}
.yale-container .section12 .yale-banner img{
		width: 100%;
	}
.yale-container .section12 .yale-animate-wrap{
		display: inline-block;
		width: 50%;
		margin-top: 0;
	}
.yale-container .section12 .yale-des-wrap{
		width: 100%;
		display: block;
	}
.yale-container .section12 .yale-des-wrap .yale-p {
	    line-height: 0.75em;
	    margin-top: 3vw;
	}
.yale-container .yale-animate-bar{
		height: 2vw;
	    border-top-left-radius: 2px;
	    border-bottom-left-radius: 2px;
	}
	
	/*section13*/
.yale-container .section13-content{
		width: 80%;
		margin: 0 auto;
		text-align: left;
	}
	
	/*section14*/
.yale-container .section14-content{
		width: 80%;
		margin: 0 auto;
		text-align: left;
	}
.yale-container .section14 [class^="yale-text-animate"]{
		margin-top: 0;
		line-height: 1.25em;
	}
.yale-container .section14 .yale-detail{
		width: 100%;
    	margin: 5vw auto;
    	display: block;
	}
.yale-container .section14 .yale-detail .yale-des-wrap{
    	display: block;
    	margin-bottom: 5vw;
	}
.yale-container .section14 .yale-des-title{
		margin-top: 0;
	}
	
	/*section15*/
.yale-container .section15 img{
		margin-top: 0;
	}
.yale-container .section15-content{
		width: 80%;
		margin: 0 auto;
		text-align: left;
	}
	
	/*section16*/

.yale-container .section16-content{
		width: 80%;
		margin: 0 auto;
		text-align: left;
}
.yale-container .section16 .yale-animate-wrap img{
width: 130%;
}
.yale-container .section16 .yale-animate-wrap img.yale-img-bg{
margin-left:-15%;
}
	
	
	/*section17*/
.yale-container .section17-content{
		width: 80%;
		margin: 0 auto;
		text-align: left;
	}
.yale-container .yale-img-old{
		width: 30%;
	}
.yale-container .yale-img-new{
		width: calc(30% * 1.095);
	}
.yale-container .section17 .yale-animate-wrap div{
		width: 8%;
		padding-right: 1vw;
		margin: 0 3vw 0 4vw;
	}
	
	/*section18*/
.yale-container .section18 .yale-banner{
		width: 78%
	}
	.yale-container .section18 .yale-h2{
		text-align: left;
	}
}
@media (width: 768px) {
	.yale-container .section14 .yale-h2{
		margin-bottom: 2vw;
	}
	.yale-container .section14 .yale-detail{
		margin: 2vw auto;
	}
	.yale-container .section14 .yale-detail .yale-des-wrap{
		margin-bottom: 2vw;
	}
	[class^="yale-text-animate"]{
		line-height: 1.3;
	}
}

@media (max-width: 768px) {
.yale-container .section1 .yale-animate-wrap{
		margin-top:  -50vh;
	}
}
@media (max-width: 460px) {
	img#yale-img-sequence{
		width: 120%;
		height: auto;
		margin-left: -10%;
	}
	.yale-container #yale-img-skirt{
		width: 70%;
		height: auto;
		left: 54%;
	}
	.yale-container #yale-img-sequence-last{
		    top: 0;
    		left: 0;
    		transform: none;
	}
	#yale-img-sequence-last{
		width: 120%;
		height: auto;
		margin-left: -10%;
	}
	#section1-sequence{
		top: calc(50vh - (74vw * 1.56));
	}
.yale-container .section1 .yale-animate-wrap{
		margin-top:  -37vh;
	}
}
@media (max-width: 460px) and (max-aspect-ratio: 1/2) {
.yale-container .section1 .yale-animate-wrap{
		margin-top:  10vh;
	}
	img#yale-img-sequence{
		width: 120%;
		margin-left: -10%;
	}
	#yale-img-sequence-last{
		width: 120%;
		height: auto;
		margin-left: -10%;
	}
	#section1-sequence{
		top: calc(5vh);
	}
}

@media (width: 1024px) {
	.yale-container .yale-section{
		padding: 60px 0;
	}
	.yale-container .yale-section.section2{
		padding: 120px 0;
	}
}
/* @media (max-width:375px){
.yale-container .yale-img-moon{width: 9%;}
} */
@media (max-width:414px){
.yale-container .yale-numMoon.yale-p{font-size:12px;}
}
/* video */
.yale-container .video-contain .yale-h2{
	position: absolute;
	left: 50%;
	top: 50%;
    transform: translate(-50%,-50%);
}

.yale-container .yale-section video,.yale-container .yale-section canvas{width:100%;}
.yale-container .section15 .gpu-turbo-filter{
	position: absolute;
    margin: 0;
    z-index: 1;
    bottom: -1px;
    left: 0;
    width: 100%;
}

@media (max-width: 768px){
.yale-container .yale-img-camera{margin-top:25px;}
.yale-container .video-contain{margin-top:10%;}
.yale-container .yale-img-shaky{transform:none;}
}
/*change-color*/
.yale-container .yale-color-wrap{
	width: 50%;
	margin: 0 auto;
	margin-top: -5%;
}
.yale-container .change-color{
	display: inline-block;
	width: 50%;
	    position: relative;
    z-index: 99;
    cursor: pointer;
}
.yale-container .change-color img{
	width: 40px
}
.yale-container .section4 .yale-img-phone{
	opacity: 0;
	-webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
.yale-container .change-phone-color-bg{
	position: absolute;
	transform: translate(-50%,-50%);
}
.yale-container .opacity{
	opacity: 1!important;
}
.yale-container .change-phone-color{
	left: 50%;
	
}
@media (max-width: 768px) {
	.yale-container .yale-color-wrap{
		width: 78%;
		margin: -30% auto 60px;
	}
.yale-container .change-color img{width:30px;}
	.yale-container .yale-color-wrap .yale-h2 {
	    margin-bottom: 2vw;
	}
}
@media (max-width:414px){
.yale-container .change-color img{width:20px;}
}
@media (width:768px){
.yale-container .section8{padding:260px 0 60px;}
}