@font-face {
  font-family: 'Din-condensed (bold)';
  src: url("/content/dam/honor/common/products/fonts/ParaType - DIN Condensed.eot");
  src: url("/content/dam/honor/common/products/fonts/ParaType - DIN Condensed.eot?#iefix") format("embedded-opentype"), url("/content/dam/honor/common/products/fonts/ParaType - DIN Condensed.woff2") format("woff2"), url("/content/dam/honor/common/products/fonts/ParaType - DIN Condensed.woff") format("woff"), url("/content/dam/honor/common/products/fonts/ParaType - DIN Condensed.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Din-pro regular';
  src: url("/content/dam/honor/common/products/fonts/DINPro-Regular_13937.eot");
  src: url("/content/dam/honor/common/products/fonts/DINPro-Regular_13937.eot?#iefix") format("embedded-opentype"), url("/content/dam/honor/common/products/fonts/DINPro-Regular_13937.woff2") format("woff2"), url("/content/dam/honor/common/products/fonts/DINPro-Regular_13937.woff") format("woff"), url("/content/dam/honor/common/products/fonts/DINPro-Regular_13937.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.bg{
	width:100%;
}
.section p,.section h3{
	margin:0;
}
.honor10lite{
	font-family:'Din-pro regular';
	font-size:20px;
}

.section{
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
.honor10lite-content{
	position: absolute;
	top: 0;
	width: 60%;
	left: 20%;
	display: inline-block;
	text-align: center;
}
.text-icon{
	font-family:'Din-pro regular';
	font-weight:700;
}
.text-icon  p{
	line-height:1.3;
	font-size:.9em;
}
.text-icon ul{
	overflow:hidden;
	margin-top:2em;
}
.text-icon .gradient{
	font-size:1.5em;
	font-family:'Din-condensed (bold)'
}
.section1 .honor10lite-content {
    position: absolute;
    top: 40%;
    width: 50%;
    left: 23%;
    display: inline-block;
    text-align: center;
}
.honor10lite-logo img{
	margin-left: 5%;
	width:63%;
}
.slogan{
	font-size:2.5em;
	font-family:'Din-condensed (bold)';
	margin-top: 2%;
}
.section-title{
	font-family:'Din-condensed (bold)';
	font-size:2.5em;
}
.section-text{
	line-height:1.8;
	margin-top:1.5em;
	font-weight:700;
}
.gradient{
    display: inline-block;
    font-weight: 700;
    color: #ba00aa;
    line-height: 1.2em;
    background: linear-gradient(-75deg, #ee0091 15%, #ba00aa 35%, #2700ed 85%, #0000ff 100%);
    background: -webkit-linear-gradient(-75deg, #ee0091 15%, #ba00aa 35%, #2700ed 85%, #0000ff 100%);
    background: -ms-linear-gradient(-75deg, transparent 0%, transparent 25%, transparent 75%, transparent 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section2 .honor10lite-content{
    top: 30%;
    width: 30%;
    left: 15%;
    text-align: left;
}
.section2-color{
    position: absolute;
    right: 23%;
    bottom: 10%;
    color:#fff;
}
.section3 .honor10lite-content{
	top:10%;
}
.section3 li{
	float:left;
	width:25%;
}
.section4 .honor10lite-content{
	top:10%;
}
.section4 li{
	float:left;
	width:50%;
	margin-top:5%;
}
.section4 .text-icon{
	width:50%;
	float:right;
	margin-top:5%;
	margin-right:5%;
}
.section4 .text-icon p{
	width:70%;
	margin:0 auto;
}
.section5 .text-icon img{
	width:40%;
}
.section5 .honor10lite-content{
    top: 30%;
    width: 40%;
    left: 15%;
    text-align: left;
}
.section5 li{
	float:left;
	width:18%;
	margin: 1% 1% 0 1% ;
}
.section5 .text-icon {
	text-align:center;
	margin-top:5%;
}
.section5 .text-icon p{
	width:90%;
	margin:5% auto;
}
.section6 .honor10lite-content{
    top: 10%;
}
.section6 .text-icon{
    text-align: center;
    position: absolute;
    width: 70%;
    left: 15%;
    bottom: 10%;
    overflow:visible;
}
.section6 .text-icon p {
	width:25%;
	float:left;
	    position: relative;
}
.soft{
left:-1%;
}
.butterfly{
left:-5%;
}
.stage{
left:6%;
}
.split{
left:2%;
}
.section7 .honor10lite-content{
	top:2%;
}
.section7 li{
	float:left;
	width:33%;
}
.section7 .text-icon  p{
	width:60%;
	margin: 0 auto;
}
.section8 .honor10lite-content{
    width:80%;
    left:10%;
	top:10%;
	color:#fff;
}
.section9 .honor10lite-content{
    top: 35%;
    text-align: left;
    width: 30%;
    right: 15%;
    left: auto;
}
.section9 .emui img{
	width:60%;
}
.section10 .honor10lite-content{
    top: 25%;
    left: 15%;
    width: 40%;
    text-align: left;
}
.section10 .text-icon img{
	width:35%;
}
.section10 li{
	float:left;
	width:44%;
	margin:0 3%;
	text-align:center;
}
.section10 .text-icon{
	margin-top:5%;
	width:70%;
}
.section10 .text-icon p{
	margin-top:5%;
}
.section11 .honor10lite-content{
	top:10%;
}
.section12 .honor10lite-content{
	top:20%;
	left:15%;
	width:40%;
	color:#fff;
	text-align:left;
}
.section13,.section14,.section15{
	background:#fff;
}
.section13 .honor10lite-content,.section14 .honor10lite-content,.section15 .honor10lite-content {
    position: relative;
    margin-top: 5%;
}
.section13 .text-icon img{
	width:30%;
}
.section13 .text-icon-bottom img {
    width: 31.82%;
}
.section13 p{
	width:70%;
	margin:0 auto;
	margin-top:3%;
	font-weight:400;
}
.section13 .icon-title{
	font-weight:700;
	height:3em;
	width:60%;
}.section13 .text-icon-top{
	width:70%;
	margin:auto;
}
.section13 .text-icon-top li{
	float:left;
	width:50%;
	margin-top:10%;
}
.section13 .text-icon-bottom li{
	float:left;
	width:33%;
}
.section14 .form{
	font-weight:700;
	width:65%;
	margin:5% auto;
}
.section14 .form li{
	overflow:hidden;
	width:100%;
	border-bottom:2px #ddd solid;
	padding:1% 0;
}
.section14 .form span{
	float:right;
	width:35%;
}
.section14 .form p{
	float:left;
	width:60%;
}	
.section14 .form-title{
	font-size:1.5em;
}
.section14 .comment-text{
	font-weight:400;
}
.section14 .comment{
	margin-top:2%;
	float:right;
}
.section15 .comment{
	font-weight:700;
	width:65%;
	margin:0 auto;
	padding:3% 0;
}



@media screen and (max-width: 1770px){
	.honor10lite{
	font-size:18px;
}
}
@media screen and (max-width: 1500px){
	.honor10lite{
	font-size:16px;
}
}
@media screen and (max-width: 1366px){
	.honor10lite{
	font-size:14px;
}
.animation-block .animate-5 {
    margin-top: 5%;
}
}
@media screen and (max-width: 1024px){
	.honor10lite{
	font-size:12px;
}
.section8 .honor10lite-content{
    width: 88%;
    left: 6%;
}

.honor10lite-content{
	width: 88%;
	left: 6%;
}
.section15 .comment{
	width:75%;
}
.section5 .honor10lite-content {
    top: 15%;
    width: 50%;
    left: 7%;
}
.section2 .honor10lite-content,.section10 .honor10lite-content,.section12 .honor10lite-content{
	left:7%;
}
}

@media screen and (max-width: 1600px){
.section5 .text-icon {
    
    margin-top: 2%;
}
.section4 .text-icon {
   
    margin-top: 0%;
   
}
.section7 .honor10lite-content {
    top: -2%;
}
.section5 .text-icon p {
   
    margin: 2% auto;
}
.text-icon ul {
    overflow: hidden;
    margin-top: 0em;
}
.text-icon .butterfly {
	left: -6%;
}
.animation-block .animate-4 {
    margin-top: 2.5em;
}
}

@media screen and (max-width: 768px){
.section6 .text-icon p {
    transform: scale(.7);
}
.slogan {
    font-size: 1.7em;
}
.section-title {
    font-size: 1.7em;
}
.text-icon .gradient {
    font-size: 1.2em;
}
.section-text {
    line-height: 1.4;
}
.text-icon ul {
    margin-top: -1em;
}
.section4 .text-icon {
    margin-top: 2%;
}
.section4 .honor10lite-content {
    top: 3%;
}
.section5 .text-icon {
    margin-top: 6%;
}
.section7 .honor10lite-content{
	top:0;
}
.section8 .honor10lite-content {
    top: 5%;
}


.animation-block .animate-5 {
    margin-top: 3%;
}
.section10 .text-icon{
    margin-top: 11%;
}
.animation-block .animate-4{
	margin-top: 3%;
}

}
@media screen and (max-width: 767px){

	.honor10lite{
	font-size:26px;
}
.slogan {
    font-size: 1.5em;
}
.section1 .honor10lite-content {
    top: 10%;
    width: 80%;
    left: 10%;
}

.section2 .honor10lite-content {
    top: 10%;
    width: 90%;
    left: 5%;
    text-align: center;
}
.section2-color {
    right: 43%;
    bottom: 5%;
}
.section3 .text-icon{
	    margin-top: 10%;
}
.section3 li {
    width: 50%;
    margin-top: 10%;
}
.section4 .honor10lite-content {
    top: 5%;
}

.section4 .text-icon {
    margin-top: 20%;
}
.section4 .text-icon {
    width: 100%;
    float: left;
    margin-right: 5%;
}
.section5 .honor10lite-content {
    top: 5%;
    width: 90%;
    left: 5%;
    text-align: center;
}
.section5 .text-icon {
    margin-top: 82%;
}
.section6 .text-icon {
    width: 100%;
    left: 0%;
    bottom: 15%;
}

.section6 .text-icon p {
    width: 50%;
}
.butterfly{
	left:-8%;
}
.stage {
    left: 10%;
}

.section7 .honor10lite-content {
    top: 10%;
}
.section7 li {
    margin-top: 10%;
    width: 50%;
}
.section8 .honor10lite-content {
    top: 10%;
}

.section9 .honor10lite-content {
    top: 10%;
    text-align: center;
    width: 90%;
    left: 5%;
}
.section9 .emui img {
    width: 35%;
    margin-bottom: 5%;
}
.section10 .honor10lite-content {
    top: 10%;
    left: 5%;
    width: 90%;
    text-align: center;
}

.section10 .text-icon {
    margin: 88% auto 0;
    width: 75%;
}
.section11 .honor10lite-content {
    top: 15%;
}
.section12 .honor10lite-content {
    top: 7%;
    left: 5%;
    width: 90%;
    text-align: center;
}
.section13 .text-icon-top {
    width: 100%;
}
.section13 .icon-title {
    width: 60%;
}
.section13 p {
    width: 80%;
}
.section13 .text-icon-bottom li {
	margin-top: 5%;
    width: 50%;
}
.section13 .text-icon-bottom li:last-child{
    float: none;
    margin: 10% auto 10%;
}
.section14 .form {
    width: 85%;
}
.section15 .comment {
    width: 85%;
    margin-top: 5%;
}
.section14 .form li {
    padding: 4% 0;
}
.text-icon .butterfly{
	left: -1%;
    width: 34% !important;
}
.text-icon .stage{
	left: 25%;
}
.animation-block .animate-4{
    margin-top: 0.5em;
}
}
@media screen and (max-width: 700px){

	.honor10lite{
	font-size:20px;
}
}
@media screen and (max-width: 500px){
	.honor10lite{
	font-size:14px;
}
.text-icon .gradient {
    font-size: 1.5em;
}

.section5 .text-icon p {
        width: 110%;
	transform: scale(.7);
}


.section13 .text-icon-top li {
    margin-bottom: 5%;
}


}



@media screen and (max-width: 375px){
	.honor10lite{
	font-size:12px;
}	
}






@media screen and (max-width: 767px){
.pcshow{
display:none;
}
}
@media screen and (min-width: 768px){
.mbshow{
display:none;
}
}
@media screen and (max-width: 375px){
.section4 .text-icon {
    margin-top: 22%;
}

.section5 .text-icon {
    margin-top: 88%;
}
.animation-block .animate-4 {
    margin-top: 2em;
}
}

@media screen and (max-width: 360px){
.section5 .text-icon {
    margin-top: 82%;
}
.text-icon ul {
    margin-top: 1em;
}
.section5 .text-icon {
    margin-top: 78%;
}
.section4 .text-icon {
    margin-top: 11%;
}
.section10 .text-icon {
    margin: 84% auto 0;
   
}
.section12 .honor10lite-content {
    top: 5%;
  
}
}

@media screen and (max-width: 1280px){
.section7 .honor10lite-content {
    top: -5%;
}
}