@font-face {
  font-family: 'bignoodletitlingregular';
  src: url("/content/dam/honor/global/products/smartphone/honor8x/font/big_noodle_titling-webfont.eot");
  src: url("/content/dam/honor/global/products/smartphone/honor8x/font/big_noodle_titling-webfont.eot?#iefix") format("embedded-opentype"), url("/content/dam/honor/global/products/smartphone/honor8x/font/big_noodle_titling-webfont.woff2") format("woff2"), url("/content/dam/honor/global/products/smartphone/honor8x/font/big_noodle_titling-webfont.woff") format("woff"), url("/content/dam/honor/global/products/smartphone/honor8x/font/big_noodle_titling-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
	font-family: 'DINCondensed Bold';
	src: url('/content/dam/honor/global/products/smartphone/honor8x/font/DIN%20Condensed%20Bold.eot?#iefix') format('embedded-opentype'),
	url('/content/dam/honor/global/products/smartphone/honor8x/font/DIN%20Condensed%20Bold.ttf') format('truetype');
}
.honor8x{    font-family:'Century_Gothic';}
.honor8x-section{position: relative;}
.honor8x-section h3{
	margin:0;
	font-size:inherit;
	font-family:inherit;
}
.honor8x-section p{
	margin: 0;
}
.bg{
	width:100%;
}
.honor8x-section{
	position: relative;
}
.honor8x-section .section-titles{
	 font-family: 'DINCondensed Bold';
	 font-size:6rem;
}
.section-text{
	font-size:2.5rem;
	line-height:2.7rem;
	margin-top:20px;
}
.section-comment{
 	position: absolute;
	bottom:2%;
	right:5%;
	font-size:1.8rem;
}
.section-icon{
	font-size: 2rem;
	line-height: 2rem;
}
.honor8x-section .section-content {
	 position: absolute;
}
.section1-content{
	 top: 40%;
	 left: 10%;
	 width: 30%;
	 font-size:7rem;
}
.kv-logo{
	width:70%;
}
.section1-content .kv-logo img{
	width:100%;
}
.section-1 .section-title{
	 font-family: 'bignoodletitlingregular';
	 margin-top:5%;

}
.section-1 .section-title h2{
	font-family:inherit;
	font-size:inherit;
}
.section2-itrait{
	width:80%;
	position: absolute;
	top: 0;
	left:10%;
	font-size: 2rem;
	line-height:2rem;
}
.section2-itrait ul li{

	float:left;
	width:23%;
	text-align:center;
	margin:2% 1%;
}
.section2-itrait ul li p{
	width:60%;
	margin:0 auto;
	margin-top: 5%;
	height: 3rem;
}
.section2-itrait ul li img{
	width:30%;
}
.section2-content{
	text-align:center;
	width: 100%;
	top: 33%;
}
.section2-comment{
	color:#fff;
}
.section3-content{
	width:30%;
	left:10%;
	top:25%;
	color:#fff;
}
.section3-iocn{
	position: relative;
	margin-top:15%;
}
.section3-iocn p{
	margin-bottom:5%;
}
.section3-iocn span{
	position: absolute;
	margin-left: 30px;
	margin-top:10px;
}
.section4-content{
	top:5%;
	text-align:center;
	width: 100%;
}
.section4-iocn {
	width: 80%;
	margin: 3% auto 0%;
}
.section4-iocn ul li{
    position: relative;
	text-align: left;
	float: left;
	width: 22%;
	margin-left: 3%;
}
.section4-iocn ul li span{
	position: absolute;
	margin-top: 8%;
	margin-left:5%;
}
.section-4-text{
    width: 90%;
    margin: 2% auto 0;
}
.section5-content{
	top:5%;
	text-align:center;
	width: 100%;
}
.section5-iocn {
	width: 45%;
	margin: 3% auto 0%;
}
.section5-iocn ul li{
    text-align: left;
	width: 30%;
	margin-left: 3%;
	float:left;
    position: relative;
}
.section5-iocn ul li span{
    margin-left: 5%;
    margin-top: 5%;
    text-align: left;
    position: absolute;
}
.section6-content{
	top: 15%;
    right: 5%;
    width: 30%;
	text-align:right;
}
.section-6-text{
	margin-left: 20%;
}
.honor8x-section .section6-comment{
	left: 10%;
	bottom: 36.5%;
	transform:  rotate(-24.6deg) rotateX(45deg) skewX(165deg);
	 -ms-transform: rotate(-24.6deg) rotateX(45deg) skewX(165deg); 	/* IE 9 */
	-moz-transform: rotate(-24.6deg) rotateX(45deg) skewX(165deg); 	/* Firefox */
	-webkit-transform: rotate(-24.6deg) rotateX(45deg) skewX(165deg);/* Safari 和 Chrome */
	-o-transform: rotate(-24.6deg) rotateX(45deg) skewX(165deg); 	/* Opera */
}
.section6-comment1{
	bottom: 10%;
	width:35%;
}
.section6-comment1 img{
	float: right;
	width: 100%;
}
.section6-comment-text{
	width: 100%;
    text-align: right;
    position: absolute;
    top: 10%;
    right: 0;
    line-height:1.5rem;
}
.section6-comment-text p{
	padding-bottom: 25%;
	font-size: 3rem;
	font-family: 'DINCondensed Bold';
}
.section7-content{
	top:5%;
	text-align:center;
	width: 100%;
}
.section7-iocn {
	width: 50%;
	margin: 3% auto 0%;
}
.section7-iocn ul li{
    text-align: left;
	width: 30%;
	margin-left: 3%;
	float:left;
    position: relative;
}
.section7-iocn ul li span{
    margin-left: 5%;
    text-align: left;
    position: absolute;
}
.section7-comment{
	width: 80%;
	text-align: right;
}
.section8-content{
	top:5%;
	text-align:center;
	width: 100%;
}
.section8-iocn {
	width: 80%;
	margin: 3% auto 0%;
}
.section8-iocn ul li{
    text-align: left;
	width: 20%;
	float:left;
    position: relative;
}
.section8-iocn ul li span{
    margin-left: 5%;
    text-align: left;
    position: absolute;
}
.section9-content{
	text-align:center;
	width: 100%;
	top: 10%;
}
.section10-content{
	top:5%;
	text-align:center;
	width: 100%;
}
.section10-iocn {
	width: 40%;
	margin: 3% auto 0%;
}
.section10-iocn ul li{
    text-align: left;
	width: 45%;
	margin-left: 5%;
	float:left;
    position: relative;
}
.section10-iocn ul li span{
    margin-left: 5%;
    margin-top: 5%;
    text-align: left;
    position: absolute;
}
.section11-content{
	text-align:center;
	width: 100%;
	top: 10%;
	color: #fff;
}
.section12-content{
	text-align:center;
	width: 100%;
	top: 5%;
}
.section-12-text{
	width: 60%;
	margin: 20px auto 0;
}

.section12-lighting{
	position: absolute;
	bottom: 8%;
	width: 100%;
	text-align: center;
	font-size: 2rem;
}
.section12-lighting p{
	float: left;
	width: 25%;
	position: relative;
}
.section12-lighting .soft{
	left: 8%;
}
.section12-lighting .butterfly{
	left: -3.5%;
}
.section12-lighting .split{
	left: 4%;
}
.section12-lighting .stage{
	left: -7%;
}
.section13-content{
	text-align:center;
	width: 100%;
	top: 10%;
	color: #fff;
}
.section14-content{
	text-align:center;
	width: 100%;
	top: 10%;
	color: #fff;
}
.section15-content{
	width:30%;
	left:10%;
	top:25%;
}
.section-15-text{
	margin-top: 10%;
}
.section16-content{
	width:25%;
	right:10%;
	top:40%;
	text-align: right;
}
.section-16-text{
	margin-top: 10%;
}
.section17-content{
	width:30%;
	left:10%;
	top:25%;
}
.section-17-text{
	margin-top: 10%;
}

@media (max-width: 1600px){

.section-comment {
    font-size: 1.5rem;
}
.section-icon {
    font-size: 1.8rem;
    line-height: 1.8rem;
}
.section7-iocn{
	width:53%;
}
}
@media (max-width: 1366px){
		.kv-logo {
    width: 90%;
}
	.honor8x-section .section-titles {
          font-size: 5rem;
	}
	.section-text{
		font-size: 2rem;
   		line-height: 2.2rem;
	}
	.section2-itrait {
    font-size: 1.5rem;
    line-height: 1.5rem;
	}
	.section-icon{
	font-size: 1.5rem;
	line-height: 1.5rem;
	}
	.section-comment{
		font-size: 1.5rem;
	}
	.section3-iocn img{
		width: 60px
	}
	.section6-comment-text p{
		font-size: 2.5rem;
	}
	.section7-comment{
		width:95%;
	}
	.section8-iocn ul li img{
		width: 62px;
	}
	.section10-iocn{
		width: 50%;
	}
	.section12-lighting{
		font-size: 1.5rem;
	}
}
@media (max-width: 1280px){
	.kv-logo {
    width: 80%;
}
	.honor8x-section .section-titles {
          font-size: 4rem;
	}
	.section-text{
		font-size: 1.5rem;
   		line-height: 1.5rem;
	}
	.section6-comment-text p{
		font-size: 2rem;
	}
		.section-comment{
		font-size: 1rem;
	}
	.section7-comment {
    width: 80%;
}
	.section7-iocn {
    width: 62%;
}
.section5-iocn {
		width: 60%;
	}
}
@media (max-width: 1024px){
	.section1-content {
    font-size: 5rem;
}
	.section-icon {
		font-size: 1.3rem;
		line-height: 1.3rem;
	}
	.section2-itrait ul li p{
		    width: 75%;
	}
	.section3-iocn img {
	 	width: 50px;
	}
	.section4-iocn ul li span {
    margin-top: 10%;
}
	.section4-iocn img{
		width: 50px;
	}
	.section7-iocn img{
		height: 35px;
	}
}
@media (max-width: 768px){
	.section-icon {
		font-size: 1rem;
		line-height: 1rem;
	}
	.section1-content {
		font-size: 4rem;
	}
	.section-text {
		font-size: 1.3rem;
		line-height: 1.3rem;
	}
	.honor8x-section .section-titles {
		font-size: 3rem;
	}
	.section2-itrait ul li p{
		width:100%;
	}
	.section3-content {
		top: 10%;
	}
	.section4-iocn {
		width: 90%;
		margin: 1% auto 0%;
	}
	.section5-iocn {
		width: 80%;
		margin: 2% auto 0%;
	}
	.section5-iocn img{
		width:40px;
	}
	.section6-content {
		right:5%;
		margin-top: 10px;
	}
	.section6-comment-text p{
		font-size: 1.5rem;
		padding-bottom: 22%;
	}
	.honor8x-section .section6-comment {
		left: 0%;
 		bottom: 32%;
		transform: rotate(-24.6deg) scale(.9) rotateX(45deg) skewX(165deg);
		-ms-transform:rotate(-24.6deg) scale(.9) rotateX(45deg) skewX(165deg);	/* IE 9 */
		-moz-transform:rotate(-24.6deg) scale(.9) rotateX(45deg) skewX(165deg); 	/* Firefox */
		-webkit-transform:rotate(-24.6deg) scale(.9) rotateX(45deg) skewX(165deg); /* Safari 和 Chrome */
		-o-transform:rotate(-24.6deg) scale(.9) rotateX(45deg) skewX(165deg); 	/* Opera */
	}
	.section7-iocn {
		width: 85%;
		margin: 3% auto 0%;
	}
	.section8-iocn {
		width: 95%;
	}
	.section8-iocn ul li img {
		width: 50px;
	}
	.section10-iocn {
		margin:1% auto 0;
	}
	.section10-iocn img{
		width:50px;
	}
	.section-12-text {
		width: 90%;
	}
	.section12-lighting {
		transform: scale(.8);
	}
	.section12-lighting .soft {
		 left: 1%;
}
	.section12-lighting .butterfly {
		 left: -7.5%;
	}
	.section12-lighting .split {
		left: 9%;
	}
	.section12-lighting .stage {
    left: 0%;
}
.section4-iocn ul li span {
    margin-top: 14%;
}
/*global
	.section17-comment{
	text-align: left;
           width: 90%;
           left:5%;
	}
*/	
}
@media (max-width: 767px){
	.kv-logo {
	  	width: 70%;
	}
	.section-icon {
	    font-size: 1.5rem;
	    line-height: 1.5rem;
	}
	.section-content{
		width:70%;
		left:15%;
	}
	.honor8x-section .section-titles {
	    font-size: 5rem;
	}
	.section-comment {
	    width: 95%;
	    font-size: 1.5rem;
	    text-align: right;
	}
	.section-text {
	    font-size: 2rem;
	    line-height: 2rem;
	}
	.section-icon span{
		margin-left: 0;
	    text-align: center;
	    left: 0;
	    width: 100%;
	    top: 120%;
	    position:absolute;
	}
	.section2-itrait {
	    font-size: 1rem;
	    line-height: 1rem;
	}
	.section1-content {
	    top: 6%;
	    left: 5%;
	    width: 90%;
	    font-size: 9rem;
	    text-align: center;
	}
	.kv-logo{
		margin-left:20%;
	}
	.section2-itrait {
	    width: 100%;
	    position: absolute;
	    top: -30%;
	    left:0%;
	}
	.section2-itrait ul li img {
	    width: 50%;
	}
	.section2-itrait ul li {
	    float: left;
	    width: 25%;
	    margin: 2% 0;
	}
	.section2-content {
	    text-align: center;
	    top: 10%;
	}
	.section3-content {
		text-align:center;
	}
	.section3-iocn{
		    margin-top: 10%;
	}
	.section3-iocn p {
	    float: left;
	    position: relative;
	    width: 33%;
	}
	.section3-iocn span {
	    margin:0;
	}
	.section4-iocn {
	    margin: 10% auto 0%;
	}
	.section4-iocn ul li {
		text-align: center;
	}
	.section4-iocn ul li span {
	     margin-top: 0%; 
	     margin-left: 0%; 
	}
	.section5-iocn{
		margin: 10% auto 0%;
	}
	.section5-iocn ul li {
	    text-align: center;
	}
	.section5-iocn ul li span {
	     margin-left: 0; 
	     margin-top: 0; 
	    text-align: center;
	}
	.section6-content {
	    text-align: center;
	    margin-top: 10px;
	}
	.section-6-text {
	     margin-left: 0; 
	}
	.section6-comment1{
	    width: 45%;
	    text-align: left;
	    top: 30%;
	    left:15%;
	}
	.section6-comment-text {
	    text-align: left;
	    top: 2%;

	}
	.section7-comment{
		text-align:left;
		width:90%;
	}
	.honor8x-section .section6-comment {
	    left: -9%;
	    bottom: 13%;
	}
	.section7-iocn{
		width:100%;
		margin: 10% auto 0%;
	}
	.section7-iocn ul li {
	    text-align: center;
	}
	.section7-iocn ul li span {
	    margin-left: 0;
	    text-align: center;

	}
	.section8-iocn {
		margin: 10% auto 0%;
	}
	.section8-iocn ul li {
	    text-align: center;
	    width:33%;
	    margin-bottom:15%;
	}
	.section8-iocn ul li span {
	    margin-left:0%;
	    text-align: center;

	}
	.section10-iocn {
	    margin: 10% auto 0;
	}
	.section10-iocn ul li {
	    text-align: center;
	}
	.section10-iocn ul li span {
		margin-left: 0;
	    text-align: center;
	}
	.section12-lighting {
	    bottom: 15%;
	    width: 60%;
	    left: 20%;
	}
	.section12-lighting .soft {
	    left: -23%;
	}
	.section12-lighting .butterfly {
	    left: -20%;
	}
	.section12-lighting .split {
	    left: 21%;
	}
	.section12-lighting .stage {
	    left: 26%;
	}
	.section15-content {
		text-align: center;
	    top: 10%;
	}
	.section16-content {
		text-align: center;
	    top: 10%;
	}
	.section17-content {
		text-align: center;
	    top: 10%;
	}
/*global	.section17-comment{
	text-align: left;
	}*/
}
@media (max-width: 500px){
	.kv-logo {
	    margin-left: 15%;
	}
	.kv-logo {
	    width: 80%;
	}
	.section-content {
	    width: 80%;
	    left: 10%;
	}
	.section1-content {
	    font-size: 5rem;
	}
	.honor8x-section .section-titles {
	    font-size: 3rem;
	}
	.section-text {
	    font-size: 1.4rem;
	    line-height: 1.4rem;
	}
	.section-comment {
	    font-size: 1.3rem;
	    line-height:1.1rem;
	}
	.section-icon {
	    font-size: 1rem;
	    line-height: 1rem;
	}
	.section2-itrait ul li img {
	    width: 45%;
	}
	.section2-comment {
	    bottom: 10%;
	}
	.section3-content {
	    top: 0%;
	}
	.section4-iocn{
		width:100%;
	}
	.section4-iocn img {
	    width: 42px;
	}
	.section5-iocn {
	    width: 100%;
	}
	.section6-comment-text p {
   		font-size: 1.4rem;
	}
	.section6-content {
	    top: 7%;
	}
	.section6-comment1{
		width:60%;
		bottom:50%;
	}
	.honor8x-section .section6-comment {
	    text-align: center;
	    left: -8%;
	    width: 110%;
	}
	.section8-iocn ul li {
	    margin-bottom: 23%;
	}
	.section10-iocn{
		width:100%;
	}
	.section10-iocn ul li{
		width: 50%;
		margin-left: 0%; 
	}
	.section12-lighting .soft {
		 left: -37%;
	}
	.section12-lighting .butterfly {
		left: -28%;
	}
	.section12-lighting .split {
		 left: 29%;
	}
	.section12-lighting .stage {
		left: 38%;
	}
	 .section15-content , .section16-content , .section17-content{
		 top: 7%;
	}

}
@media (max-width: 375px){
	.honor8x-section .section-titles{
		  font-size: 2.5rem;
	}
.section12-lighting {
    bottom: 14%;
}
}
@media (max-width: 360px){
	.section1-content {
		 font-size: 4rem;
	}
	.section12-lighting {
    bottom: 13%;
}
}
@media (max-width: 320px){
	.honor8x-section .section-titles{
		 font-size: 2rem;
	}
	.section-text {
		font-size: 1rem;
		line-height: 1rem;
	}
	.section6-comment-text p {
   		font-size: 1rem;
	}
	.section2-itrait {
		 top: -35%;
	}
}
@media (min-width: 768px){
.section3-iocn p:nth-child(2) span{
    margin-top: 20px;
}
.section3-iocn p:nth-child(3) span{
    margin-top: 20px;
}
}