/*
* 荣耀2017部分产品页样式合集
*lvsihao@2017.02.22
*/

/*
*通用格式化
*/
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; position: relative;}
div .box{
	margin: 0;
    padding: 0;
    position: relative;
}
div .container{
    position: relative;
}
body > .visible-xs{ position: static;}
body{ font:16px/1.5 "Century Gothic", Arial, CenturyGothic, AppleGothic, sans-serif; text-align:left; background: #fff;}
h2,h3,h4,h5,h6,label{ font-family: "Century Gothic", Arial, CenturyGothic, AppleGothic, sans-serif; line-height: 1.2;}
img{ max-width: 100%;}
.footer,.followbox{ font-size:12px;}
.position-absolute{ position: absolute;}
.css-bg{ display: none;}
.error{ border-color: #ed1b24!important;}
.color-white{ color: #fff;}
.color-black{ color: #000;}
.modal-open{ overflow-y: auto !important;}

/*
*字体
*bignoodletitlingregular,lunaregular,futura_t_lightregular,dead_island,open sans,Century_Gothic
*AmpleSoftLight,AmpleSoftMed,DINPro,BignoodletitlingIndia
*/
/* 
*Honor 注册模块(.honor-sign-up)  
*/
.honor-sign-up{ background: #fff; color: #000; padding: 50px 0; text-align: left;}
.honor-sign-up .container{ max-width: 100%;}
.honor-sign-up h3{ font: 36px "bignoodletitlingregular"; text-align: center;}
.honor-sign-up h4{ font-size: 16px; text-align: center; padding-bottom: 20px; color: #333;}
.honor-sign-up #form1>div>div{ margin-bottom:20px;}
.honor-sign-up .wrapper-dropdown-3{ position: relative; background: #fafafa; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 1px 1px rgba(50,50,50,0.1); cursor: pointer; outline: none; color: #333; padding: 20px 10px;}
.honor-sign-up .wrapper-dropdown-3 .dropdown{ position: absolute; top: 100%; left: 0; right: 0; background: white; border-radius: inherit; border: 1px solid rgba(0,0,0,0.17); box-shadow: 0 0 5px rgba(0,0,0,0.1); font-weight: normal; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; list-style: none; pointer-events: none; display: none;}
.honor-sign-up .show-text{ font-size: 14px; color: #ed1b24; padding: 10px 0; display:none;}
.honor-sign-up .form-control{ height: 62px; background: #fafafa; border-radius: 0; line-height: 28px;}
.honor-sign-up .btn{ display: inline-block; width: 200px; height: 48px; line-height: 40px; background: none; border: 2px #0077b0 solid; border-radius: 10px; font: 24px "bignoodletitlingregular"; position: relative; vertical-align: middle; text-align: center; top: 0px; color: #0077b0; vertical-align: middle;}
.honor-sign-up .btn-box{ padding: 40px 0; text-align: center;}
.honor-sign-up .wrapper-dropdown-3.active .dropdown{ display: block; pointer-events: auto; z-index: 9999; background: #fafafa;}
.honor-sign-up .main .wrapper-demo img{ padding: 0 5px 5px 0; width: auto;}
.honor-sign-up .wrapper-dropdown-3 .dropdown li a { display: block; padding: 10px; text-decoration: none; color: #333; border-bottom: 1px solid #e6e8ea; box-shadow: inset 0 1px 0 rgba(255,255,255,1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.honor-sign-up .wrapper-dropdown-3 .dropdown li:hover a{ background: #f3f8f8;}
.honor-sign-up .wrapper-dropdown-3:after { content: ""; width: 0; height: 0; position: absolute; right: 15px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #8aa8bd transparent;}
.honor-sign-up .form1{ font-size: 30px; text-align: center; margin-bottom: 0; text-align: center;}
.honor-sign-up .retry{ text-decoration: underline; color: #8a6d3b; font-weight: 700;}
.honor-sign-up .error{ border-color: #ed1b24;}

/*
* Honor8 lite页面(Honor Prague)(.hp) 
*/
.hp{ width: 100%; overflow: hidden; text-align: center;  background: #fff;}
.hp h2{ font-size: 56px; padding: 4% 0;}
.hp p,.hp li{ font-size: 26px;}
.hp .icon-box{ padding: 2% 0;}
.hp .icon-box span{ display: block; padding-top: 10px; font-size: 18px;}
.hp .box .we-honor5x{ padding: 4% 0 2%;}
.hp .box-0{ padding-top: 6%; z-index: 2;}
.hp .box-1{ margin-top: -10%;}
.hp .box-1 .container{ margin-top: -15%;}
.hp .box-1 .position-absolute{ top:-368%; text-align: left; left: -18%;}
.hp .box-1 .position-absolute h2{ max-width: 56%; line-height: 135%; padding: 3% 0;}
.hp .box-1 .position-absolute p{ max-width: 48%;}
.hp .box-2,.hp .box-3,.hp .box-4,.hp .box-5,.hp .box-8,.hp .box-9{ padding-top: 5%;}
.hp .box-2 .position-absolute{ margin-top: 5%;}
.hp .box-4 .position-absolute{ max-width: 60%; right: -25%; margin-top: 20%;}
.hp .box-4 h2,.hp .box-4 .position-absolute p{ text-align: right;}
.hp .box-4 h2{ padding: 7% 0;}
.hp .box-4 .position-absolute p{ width: 90%; left: 10%;}
.hp .box-6 { background: #f6f6f6; margin-top: 5%; padding-top: 2%;}
.hp .box-7 .position-absolute,.hp .box-8 .position-absolute{ color: #fff; max-width: 60%; text-align: left; margin-top: 15%;}
.hp .box-7 .position-absolute{ right: -10%;}
.hp .box-8 .position-absolute{ left: -10%; margin-top: 30%;}
.hp .box-8 li{ padding-bottom: 5%; list-style-type: disc;}
.hp .box-9{ text-align: left;}
.hp .box-9 ul{ max-width: 90%; margin: 0 auto; padding: 4% 0;}
.hp .box-9 li{ padding-bottom: 20px;}
.hp .box-9 sup{ font-size: 60%;}
@media (max-width: 1680px){
.hp p,.hp li{ font-size: 24px;}
.hp .box-1 .position-absolute{ left: -12%; top: -350%;}
.hp .box-4 .position-absolute{ right: -15%;}
}
@media (max-width: 1600px){
.hp .box-4 .position-absolute{ right: -12%; margin-top: 15%; max-width: 52%;}
.hp .box-8 .position-absolute{ left: -5%;}
.hp .box-7 .position-absolute{ margin-top: 10%;}
}
@media (max-width: 1536px){
.hp .box-1 .position-absolute{ left: -8%; max-width: 90%;}
.hp .box-4 .position-absolute{ right: -10%;}
}
@media (max-width: 1440px){
.hp .box-1 .position-absolute{ top: -320%; left: -6%;}
.hp .box-2 .position-absolute{ margin-top: 2%;}
.hp .box-4 .position-absolute{ right: -6%; max-width: 50%; margin-top: 5%;}
.hp .box-4 .position-absolute p{ left: 15%; width: 85%;}
.hp .box-7 .position-absolute{ right: -5%; max-width: 56%; margin-top: 2%;}
.hp .box-8 .position-absolute{ left: 0; margin-top: 25%;}
}
@media (max-width: 1366px){
.hp h2{ font-size: 48px;}
.hp p,.hp li{ font-size: 20px;}
.hp .icon-box span{ font-size: 16px;}
.hp .icon-box img{ max-width: 145px;}
.hp .box-1 .position-absolute{ left: 0; top: -350%;}
.hp .box-1 .position-absolute h2{ padding: 2% 0;}
.hp .box-4 .position-absolute{ margin-top: 8%; right: -4%;}
.hp .box-7 .position-absolute{ margin-top: 10%; max-width: 54%;}
}
@media (max-width: 1280px){
.hp .box-1 .position-absolute{ top: -330%;}
.hp .box-4 .position-absolute{ right: 0; max-width: 46%;}
.hp .box-7 .position-absolute{ right: -2%;}
.hp .box-8 .position-absolute{ left: 2%;}
}
@media (max-width: 1024px){
.hp .container{ width: 92%!important;}
.hp h2{ font-size: 40px; padding: 3% 0;}
.hp p,.hp li{ font-size: 18px;}
.hp .icon-box span{ font-size: 14px;}
.hp .box-1 .position-absolute{ top: -310%;}
.hp .box-4 .position-absolute{ margin-top: 2%;}
.hp .box-7 .position-absolute{ margin-top: 4%;}
}
@media (max-width: 768px){
.hp h2{ font-size: 34px;}
.hp .box-0{ padding-top: 15%;}
.hp .icon-box img{ max-width: 80px;}
.hp .box-1 .position-absolute{ top: -100%; left: 5%;}
.hp .box-2 .position-absolute{ margin-top: 5%;}
.hp .box-4 .position-absolute{ margin-top: 20%; right: -3%;}
.hp p.visible-sm,.hp p.visible-xs,.hp .visible-xs p{ padding: 5% 0;}
.hp .box-7 .position-absolute{ margin-top: 12%;}
}
@media (max-width:640px){
.hp h2{ font-size: 24px;}
.hp p,.hp li{ font-size: 16px;}
.hp h2,.hp .icon-box{ padding:5% 0;}
.hp .icon-box span{ font-size: 12px;}
.hp .box .we-honor5x .banner-btnstyle{ width: 45%; font-size: 20px;}
.hp .box-1 .position-absolute{ top: -50%; left: 0;}
.hp .box-2 .position-absolute{ margin-top: 10%;}
.hp .box-3{ padding-top: 15%;}
.hp .box-4 .position-absolute{ right: 0; margin-top: 15%;}
.hp .box-8 ul{ text-align: left; padding-left: 5%;}
}
@media (max-width: 320px){
.hp h2{ font-size: 20px;}
.hp p,.hp li{ font-size: 14px;}
.hp .icon-box span{ font-size: 12px;}
}

/* 
*Honor8 lite印度(.h8l-in) 
*/
.h8l-in .box-0,.h8l-in .box-2,.h8l-in .box-3,.h8l-in .box-4,.h8l-in .box-5,.h8l-in .box-8,.h8l-in .box-9{ padding-top: 0;}
.h8l-in .box-1,.h8l-in .box-1 .container,.h8l-in .box-6{ margin-top: 0;}
.h8l-in .txt-box{ position: absolute; z-index: 2;}
.h8l-in .box-0 h2.pt{ padding-top: 12%;}
.h8l-in .box-2 .txt-box{ top: 200px;}
.h8l-in .box-3 .txt-box{ top: 100px;}
.h8l-in .box-3 .icon-box{ position: absolute; z-index: 2; width: 100%; bottom: 20px;}
.h8l-in .box-1 .txt-box{ bottom: 100px;}
.h8l-in .box-8 .position-absolute{ left: -20%; margin-top: 460px;}
.h8l-in .box-8 li{ list-style-type:square;}
.h8l-in .box-7 .position-absolute{ max-width: 70%; right: -200px; margin-top: 10%;}
.h8l-in .box-9 { background-color: #f5f5f5;}
.h8l-in .box-9 li{ font-size: 20px;}
.h8l-in .box-9 ul{ padding: 0; margin-top: -500px; padding-bottom: 50px;}
.h8l-in .box-9 .t{ text-align: center; font-size: 28px; margin-bottom: 20px;}
.h8l-in .box-9 li{ padding-bottom: 10px;}
.h8l-in .box-9 .t span{ border: 1px solid #00aeef; border-radius: 40px; padding: 20px 40px;}
.h8l-in .table-box h2{ text-align: center;}
.h8l-in .table>tbody>tr>td{ border-top: 0 none; padding: 20px 0; min-width: 400px;}
.h8l-in .table>tbody>tr{ border-bottom: 1px solid #ddd;}
@media (max-width: 1680px){
.h8l-in .box-4 .position-absolute{ right: -20%;}
.h8l-in .box-8 .position-absolute{ left: -14%;}
.h8l-in .box-7 .position-absolute{ margin-top: 5%;}
}
@media (max-width: 1600px){
.h8l-in .box-8 .position-absolute{ left: -8%; margin-top: 400px;}
.h8l-in .box-4 .position-absolute{ right: -14%;}
}
@media (max-width: 1536px){
.h8l-in .box-0 h2.pt{ padding-top: 6%;}
.h8l-in .box-4 .position-absolute{ right: -12%; margin-top: 8%;}
.h8l-in .txt-box{ top: -20px;}
.h8l-in .box-7 .position-absolute{ right: -180px;}
.h8l-in .box-9 ul{ margin-top: -460px; padding-bottom: 0;}
.h8l-in .box-1 .txt-box{ bottom: 0; top: -550px;}
}
@media (max-width: 1440px){
.h8l-in .box-4 .position-absolute{ right: -8%; margin-top: 0;}
.h8l-in .box-8 .position-absolute{ left: -2%; margin-top: 300px;}
.h8l-in .box-7 .position-absolute{ right: -120px; max-width: 65%;}
}
@media (max-width: 1366px){
.h8l-in .box-4 .position-absolute{ right: -5%; margin-top: 100px;}
.h8l-in .box-1 .txt-box{ top: -500px;}
.h8l-in .box-7 .position-absolute{ right: -6%; max-width: 60%;}
.h8l-in .box-9 li{ font-size: 16px;}
.h8l-in .box-9 .t span{ font-size: 20px; padding: 10px 20px; border-radius: 20px;}
.h8l-in .table>tbody>tr>td{ min-width: 300px;}
}
@media (max-width: 1280px){
.h8l-in .box-4 .position-absolute{ right: -2%;}
.h8l-in .box-2 .txt-box{ top: 120px;}
.h8l-in .box-8 .position-absolute{ left: 2%;}
.h8l-in .box-7 .position-absolute{ max-width: 54%; right: 0;}
.h8l-in .box-9 ul{ margin-top: -400px;}
}
@media (max-width: 1024px){
.h8l-in .box-4 .position-absolute{ margin-top: 15px;}
.h8l-in .box-1 .txt-box{ top: -380px;}
.h8l-in .box-5 .txt-box{ top: 20px;}
.h8l-in .box-8 .position-absolute{ margin-top: 200px;}
.h8l-in .box-9 li{ font-size: 12px;}
.h8l-in .box-9 ul{ margin-top: -320px;}
.h8l-in .table>tbody>tr>td{ min-width: 250px;}
}
@media (max-width: 768px){
.h8l-in h2{ font-size: 24px;}
.h8l-in p, .h8l-in li{ font-size: 16px;}
.h8l-in .box-4 .position-absolute{ margin-top: 160px;}
.h8l-in .box-2 .txt-box{ top: 80px;}
.h8l-in .box-3 .txt-box{ top: 60px;}
.h8l-in .box-1 .txt-box{ top: -280px;}
.h8l-in .box-8 .position-absolute{ margin-top: 140px;}
.h8l-in .box-7 .position-absolute{ margin-top: 16%;}
.h8l-in .box-9 ul{ margin-top: -220px; background-color: #fff; padding: 5%; max-width: 100%;}
}
@media (max-width: 640px){
.h8l-in,.h8l-in .box-9 ul{ background-color: #f5f5f5;}
.h8l-in .box-0 h2.pt{ padding-top: 0;}
.h8l-in .box-4 .position-absolute{ margin-top: 60px; right: 10px;}
.h8l-in .box-2 .txt-box,.h8l-in .box-3 .txt-box{ top: 0;  padding-bottom: 25px;}
.h8l-in .box-2>img{ padding: 220px 0 20px;}
.h8l-in .container{ width: 100%!important;}
.h8l-in .txt-box{ padding: 0 4%;}
.h8l-in p.visible-xs, .h8l-in .visible-xs p{ padding: 5% 4%;}
.h8l-in .box-3>img{ padding-top: 300px;}
.h8l-in .box-3 .icon-box{ top: -80px;}
.h8l-in .box-1 .txt-box{ left:0; top: -350px; }
.h8l-in .box-1>img{ padding-bottom: 250px;}
.h8l-in .box-5>img{ padding-top: 480px;}
.h8l-in .box-6>img{ padding-top: 180px;}
.h8l-in .box-9 .t span{ font-size: 16px; padding: 10px;}
.h8l-in .box-9 ul{ margin-top: -150px;}
.h8l-in .box-7 .position-absolute{ max-width: 100%; padding: 5% 4%; margin-top: 0;}
.h8l-in .box-7 .position-absolute{ position: relative; color: #000; text-align: center;}
.h8l-in .table-box{ max-width: 92%; padding-left: 4%;}
.h8l-in .table>tbody>tr>td{ min-width: inherit; padding-right: 10px;}
}
@media ( max-width: 380px){
.h8l-in .box-0>img{ padding-top: 100px;}
}
@media ( max-width: 360px){
.h8l-in .box-4 .position-absolute{ margin-top: 40px;}
.h8l-in .box-2>img{ padding-top: 120px;}
.h8l-in .box-5 .txt-box{ top: 40px;}
.h8l-in .box-6>img{ padding-top: 210px;}
.h8l-in .table>tbody>tr>td{ padding: 15px 10px 15px 0;}
}
@media ( max-width: 320px){
.h8l-in h2{ font-size: 20px;}
.h8l-in p, .h8l-in li{ font-size: 14px;}
.h8l-in .box-3 .icon-box{ top: -70px;}
}

/*
*Honor9 v9 (.hv9)
*/
.hv9{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; text-align: center;  background: #fff;}
.hv9 .box-1,.hv9 .box-2,.hv9 .box-3{ background: #090d59;}
.hv9 .txt-box{ position: absolute;}
.hv9 .txt-box h2{ font: 80px/1 "bignoodletitlingregular"; color: #69f6ff;}
.hv9 p,.hv9 .icon-box span,.hv9 .note,.hv9 .table>tbody>tr>td{ color: #c1c1c1;}
.hv9.in p,.hv9.in .icon-box span,.hv9.in .note{ color: #fff;}
.hv9 .txt-box p{ font-size: 28px; padding-top: 2%;}
.hv9 .box-1 .we-honor5x{ position: absolute; left: 9%; bottom: 400px;}
.hv9 .we-honor5x .banner-btnstyle{ color: #fff; border-color: #fff;}
.hv9 .box-3 .txt-box{ top: -320px;}
.hv9 .icon-box{ max-width: 960px; margin: 0 auto;}
.hv9 .icon-box span{ display: block; font-size: 26px; margin-top: -20px;}
.hv9 .note{ font-size: 22px; position: absolute; bottom: 5%; right: 5%; max-width: 600px; text-align: left;}
.hv9 .box-4{ background: #00003d;}
.hv9 .box-5,.hv9 .box-6{ text-align: left;}
.hv9 .box-7 .icon-box{ top: 600px;}
.hv9 .box-4 .txt-box{ top: 150px;}
.hv9 .box-5 .txt-box{ left: 35%; top: 350px;}
.hv9 .box-6 .txt-box{ left: 40%; top: 20px; width: 70%;}
.hv9 .box-7 .txt-box{ top: 700px;}
.hv9 .box-8 .txt-box{ top: 800px;}
.hv9 .box-9 .txt-box{ padding-top: 30%;}
.hv9 .box-10{ background: #020202;}
.hv9 .box-10 .txt-box{ position: relative; text-align: left; }
.hv9 .box-10 .txt-box p{ max-width: 90%;}
.hv9 h3{ font-size: 34px; color: #fff; font-weight: 700; line-height: 3; padding-top: 5%;}
.hv9 .table>tbody>tr>td{ font-size: 26px; line-height: 2; width: 50%; vertical-align: middle; border-top: 0 none;}
.hv9 .table>tbody>tr{ background: #232323;}
.hv9 .table-striped>tbody>tr:nth-of-type(odd){ background: #444a4d;}
.hv9 .table-striped>tbody>tr>td:nth-of-type(odd){ border-right: 2px solid #a2a5a6;}
.hv9 td span{ display: block; font-size: 20px;}
.hv9 .box-10 .note{ position: relative; text-align: right; max-width: 100%; bottom: 0; right: 0; padding: 2% 0 5%;}
.hv9.in .box-11{ background-color: #2a5eef; color: #fff; text-align: left; padding: 80px 0;}
.hv9.in .box-11 .txt-box{ position: relative;}
.hv9.in .box-11 h2,.hv9.in .box-11 h3{ text-align: center;}
.hv9.in .box-11 h3{ line-height: 2; padding-top: 0; padding-bottom: 20px; font-weight: 400; font-size: 28px;}
.hv9.in .box-11 h4{ font-weight: 700;}
.hv9.in .txt-box p{ font-size: 24px;}
.hv9.in .box-11 h4{ font-size: 20px;}
.hv9.in .box-11 p{ font-size: 18px; padding: 0;}
.hv9.in .box-11 li{ padding-bottom: 30px;}
.hv9.in .box-11 .txt-box>div.row-new{ border-bottom:1px solid #a1a1a1; padding: 20px 0;}
.hv9.in .box-11 .txt-box>div.row-new.in-the-box{ border-bottom: 0 none;}
.hv9.in .box-11 .in-the-box h4,.hv9.in .box-11 .in-the-box p{ display: inline-block;}
.hv9.in .box-11 .in-the-box h4{ width: 60%;}
.hv9.in .box-3 .txt-box,.hv9.in .box-2 .txt-box,.hv9.in .box-12 .txt-box{ top: 100px;}
.hv9.in .icon-box span{ margin-top: 10px; font-size: 20px;}
.hv9.in .icon-box{ margin-top: 20px;}
.hv9.in .txt-box p.note{ position: relative; text-align: center; font-size: 14px; max-width: 100%; width: 100%;}
.hv9.in .box-7 .txt-box{ top: 250px;}
.hv9.in .box-7 .icon-box{ top: 1100px;}
.hv9.in .box-12 hr{ margin-top: 4%;}
.hv9.in .box-12 .connect-box{ margin-top: -50px; color: #fff;}
.hv9.in .box-12 .connect-box .row-new{ padding: 60px 0;}
.hv9.in .box-12 .connect-box .row-new div{ padding-bottom: 20px;}
.hv9.in .box-12 h3{ padding: 0 40px; font-size: 36px; line-height: 2; display: inline-block; background-color: #01148d;}
.hv9.in .box-12 .connect-box h4{ font-size: 24px; padding-top: 10px;}
.hv9.in .box-12 .connect-box p{ font-size: 18px; padding-top: 0;}
.hv9.in .box-12 .tip-box{ position: absolute; bottom: 100px; width: 90%; left: 5%; font-size: 24px;}
.hv9.in .box-12 .tip-box hr{ margin-top: 20px;}
.hv9.in .box-12 .tip-box p.tip{ font-size: 14px;}
@media (max-width: 1680px){
.hv9 .box-6 .txt-box{ top: -40px;}
.hv9 .box-7 .txt-box{ top: 600px;}
.hv9 .box-7 .icon-box{ top: 450px;}
.hv9 .box-8 .txt-box{ top: 650px;}
.hv9 .box-9 .txt-box{ padding-top: 20%;}
.hv9 .box-1 .we-honor5x{ bottom: 360px;}
.hv9.in .box-12 .tip-box{ bottom: 50px;}
.hv9.in .box-7 .icon-box{ top: 900px;}
}
@media (max-width: 1600px){
.hv9 .box-4 .txt-box{ top:100px;}
.hv9 .box-5 .txt-box{ top: 300px;}
.hv9 .box-6 .txt-box{ top: -80px;}
.hv9 .box-7 .txt-box{ top: 520px;}
.hv9 .box-8 .txt-box{ top: 600px;}
.hv9 .box-9 .txt-box{ padding-top: 18%;}
.hv9.in .box-7 .txt-box{ top: 200px;}
.hv9.in .box-12 .connect-box .row-new{ padding: 40px 0;}
}
@media (max-width: 1536px){
.hv9 .box-4 .txt-box{ top: 80px;}
.hv9 .box-7 .txt-box{ top: 480px;}
.hv9 .box-8 .txt-box{ top: 550px;}
.hv9 .box-9 .txt-box{ padding-top: 15%;}
.hv9 .box-1 .we-honor5x{ bottom: 300px;}
.hv9.in .box-8 .txt-box{ top: 650px;}
}
@media (max-width: 1440px){
.hv9 .icon-box img,.hv9 .icon-box-img{ max-width: 240px;}
.hv9 .txt-box h2{ font-size: 72px;}
.hv9 h3{ font-size: 30px;}
.hv9 .table>tbody>tr>td{ font-size: 24px;}
.hv9 .note{ font-size: 20px; max-width: 450px;}
.hv9 .txt-box p{ font-size: 24px; padding-top: 1%;}
.hv9 .icon-box span{ font-size: 22px;}
.hv9 .box-3 .txt-box{ top: -200px;}
.hv9 .box-4 .txt-box{ top: 150px;}
.hv9 .box-5 .txt-box{ left: 40%; top: 250px;}
.hv9 .box-6 .txt-box{ top: -50px; width: 60%;}
.hv9 .box-7 .icon-box{ top: 380px;}
.hv9 .box-9 .txt-box{ padding-top: 25%;}
.hv9 .box-1 .we-honor5x{ bottom: 260px;}
.hv9.in .txt-box p,.hv9.in .box-12 .connect-box h4,.hv9.in .box-12 .tip-box{ font-size: 18px;}
.hv9.in .icon-box span,.hv9.in .box-12 .connect-box p{ font-size: 16px;}
.hv9.in .box-12 h3{ font-size: 28px;}
.hv9.in .box-12 .connect-box .row-new{ padding: 20px 0;}
.hv9.in .box-8 .txt-box{ top: 550px;}
.hv9.in .box-7 .icon-box{ top: 800px;}
}
@media( max-width: 1366px){
.hv9.in .box-12 .txt-box>img{ max-width: 600px;}
.hv9.in .box-12 .connect-box .row-new{ padding: 10px 0;}
}
@media (max-width: 1280px){
.hv9 .box-5 .txt-box{ top: 200px;}
.hv9 .box-6 .txt-box{ top: -100px;}
.hv9 .box-7 .txt-box{ top: 400px;}
.hv9 .box-7 .icon-box{ top: 300px;}
.hv9 .box-8 .txt-box{ top: 480px;}
.hv9 .box-9 .txt-box{ padding-top: 20%;}
.hv9.in .box-7 .icon-box{ top: 700px;}
.hv9.in .box-12 .tip-box{ bottom: 10px;}
.hv9.in .box-12 .connect-box .row-new div{ padding-bottom: 10px;}
}
@media (max-width: 1024px){
.hv9 .container{ max-width: 90%;}
.hv9 .txt-box h2{ font-size: 56px;}
.hv9 .txt-box p,.hv9 .table>tbody>tr>td{ font-size: 20px;}
.hv9 .icon-box span{ font-size: 18px; margin-top: -10px;}
.hv9 h3{ font-size: 26px;}
.hv9 .note{ font-size: 18px; max-width: 400px;}
.hv9 .icon-box img,.hv9 .icon-box-img{ max-width: 176px;}
.hv9 .box-3 .txt-box{ top: -150px;}
.hv9 .box-4 .txt-box{ top: 100px;}
.hv9 .box-5 .txt-box{ top: 180px;}
.hv9 .box-6 .txt-box{ top: -60px;}
.hv9 .box-7 .txt-box{ top: 340px;}
.hv9 .box-8 .txt-box{ top: 380px;}
.hv9 .box-1 .we-honor5x{ bottom: 180px;}
.hv9.in .box-3 .txt-box, .hv9.in .box-2 .txt-box{ top: 40px;}
.hv9.in .box-8 .txt-box{ top: 400px;}
.hv9.in .box-7 .txt-box{ top: 100px;}
.hv9.in .box-7 .icon-box{ top: 600px;}
.hv9.in .box-12 .txt-box{ top: 0;}
.hv9.in .box-12 .connect-box img{ width: 140px;}
.hv9.in .box-12 .connect-box h4{ font-size: 16px;}
.hv9.in .box-12 .connect-box p{ font-size: 14px;}
.hv9.in .box-12 h3{ font-size: 24px;}
.hv9.in .box-12 .tip-box p.tip{ font-size: 12px;}
}
@media (max-width: 768px){
.hv9 .icon-box img,.hv9 .icon-box-img{ max-width: 140px;}
.hv9 .icon-box{ max-width: 640px;}
.hv9 .txt-box h2{ font-size: 42px;}
.hv9 .txt-box p, .hv9 .table>tbody>tr>td{ font-size: 16px;}
.hv9 td span{ font-size: 14px;}
.hv9 .icon-box span{ font-size: 14px;}
.hv9 .note{ font-size: 12px; max-width: 250px;}
.hv9 .box-3 .txt-box{ top: -120px;}
.hv9 .box-4 .txt-box{ top: 80px;}
.hv9 .box-5 .txt-box{ top: 130px;}
.hv9 .box-6 .txt-box{ top: -35px; width: 60%; left: 44%;}
.hv9 .box-7 .txt-box{ top: 250px;}
.hv9 .box-7 .icon-box{ top: 200px;}
.hv9 .box-8 .txt-box{ top: 280px;}
.hv9 .box-9 .txt-box{ padding-top: 16%;}
.hv9 .box-1 .we-honor5x{ bottom: 80px; max-width: 200px;}
.hv9.in .txt-box p, .hv9.in .box-12 .connect-box h4, .hv9.in .box-12 .tip-box{ font-size: 14px;}
.hv9.in .icon-box span, .hv9.in .box-12 .connect-box p{ font-size: 12px;}
.hv9.in .txt-box h2{ font-size: 36px;}
.hv9.in .box-8 .txt-box{ top: 300px;}
.hv9.in .icon-box img, .hv9.in .icon-box-img{ max-width: 100px;}
.hv9.in .txt-box p.note{ font-size: 12px;}
.hv9.in .box-7 .txt-box{ top: 40px;}
.hv9.in .box-7 .icon-box{ top: 450px;}
.hv9.in .box-12 .txt-box>img{ max-width: 400px;}
.hv9.in .box-12 .connect-box img{ width: 100px;}
.hv9.in .box-12 .txt-box{ top: -50px;}
}
@media (max-width: 640px){
.hv9 .txt-box h2{ font-size: 36px; line-height: 1.25; padding-bottom: 5%;}
.hv9 h3{ font-size: 24px; line-height: 1.25; padding-bottom: 5%; text-align: left;}
.hv9 .txt-box{ position: relative;}
.hv9 .icon-box img,.hv9 .icon-box-img{ max-width: 240px;}
.hv9 .box-2>img{ margin-top: -50px;}  
.hv9 .box-3 .txt-box,.hv9 .box-7 .icon-box,.hv9 .box-8 .txt-box,.hv9 .box-4 .txt-box{ top: inherit;}
.hv9 .box-2 .txt-box,.hv9 .box-8 .txt-box,.hv9 .box-4 .txt-box,.hv9 .box-5 .txt-box,.hv9 .box-6 .txt-box,.hv9 .box-7 .txt-box{ padding-top: 60px;}
.hv9 .note{ max-width: 100%; width: 90%; bottom: 1%;}
.hv9 .icon-box span{ margin-top: -10px; font-size: 16px;}
.hv9 .box-4>img{ margin-top: -80px;}
.hv9 .box-5 .txt-box,.hv9 .box-6 .txt-box,.hv9 .box-7 .txt-box{ top: inherit; left: inherit; text-align: center;}
.hv9 .box-5{ background: #2133bb;}
.hv9 .box-5>img{ margin-top: -280px;}
.hv9 .box-6 .txt-box{ width: 100%;}
.hv9 .box-6{ background: #2c3aa3;}
.hv9 .box-6>img{ margin-top: -350px;}
.hv9 .box-7,.hv9 .box-8,.hv9 .box-9{ background: #2c3aa3;}
.hv9 .box-7>img{ margin-top: -180px;}
.hv9 .box-7 .icon-box-img{ position: absolute; bottom: -350px; left: 20%;}
.hv9 .box-8>img{ margin-top: -400px;}
.hv9 .box-9>img{ margin-top: -220px;}
.hv9 .table{ text-align: left;}
.hv9 .box-10 .txt-box p{ max-width: 100%;}
.hv9 .box-8 .note{ bottom: 12%;}
.hv9 .box-9 .txt-box{ padding-top: 0;}
.hv9 .table>tbody>tr>td{ font-size: 14px;}
.hv9 td span{ font-size: 12px;}
.hv9 .box-10 .note{ text-align: left;}
.hv9 .box-1 .we-honor5x{ bottom: inherit; left: inherit; position: relative; max-width: 100%; margin-top: -50px;}
.hv9.in .box-3 .txt-box, .hv9.in .box-2 .txt-box{ top: inherit; padding: 40px 0;}
.hv9.in .box-3{ background-color: #05043e;}
.hv9.in .box-2{ background-color: #020151;}
.hv9.in .box-8>img{ margin-top: 0;}
.hv9.in .box-8 .txt-box{ top: inherit; margin-top: -320px; padding-bottom: 60px;}
.hv9.in .box-8{ background-color: #2442e0;}
.hv9.in .box-9{ background-color: #2341dd;}
.hv9.in .box-9 .txt-box{ padding-top: 40px;}
.hv9.in .box-7 .txt-box{ top: 0;}
.hv9.in .box-7{ background-color: #173899;}
.hv9.in .box-7 .icon-box{ top: 320px;}
.hv9.in .box-4{ background-color: #265aeb;}
.hv9.in .box-4>img{ margin-top: 0;}
.hv9.in .box-11 h3{ font-size: 20px; padding-bottom: 20px; line-height: 1;}
.hv9.in .box-11{ text-align: center;}
.hv9.in .box-11 h4{ font-size: 18px;}
.hv9.in .box-11 p{ padding-top: 10px;}
.hv9.in .box-12{ background-color: #021490;}
.hv9.in .box-12 .txt-box{ top: inherit; padding-top: 60px;}
.hv9.in .box-12 .txt-box>img{ width: 100%;}
.hv9.in .box-12 .connect-box{ margin-top: -40px; padding-bottom: 40px;}
.hv9.in .box-12 hr{ margin-top: 8%;}
.hv9.in .box-12 .connect-box img{ max-width: 180px; width: 100%;}
.hv9.in .box-11 .txt-box>div.row-new.in-the-box{ text-align: left;}
.hv9.in .box-11{ padding: 40px 0;}
.hv9.in .box-12 .connect-box h4{ font-size: 20px; font-weight: 700;}
.hv9.in .box-12 .tip-bo{ font-size: 18px;}
.hv9.in .box-12 .connect-box p{ font-size: 14px;}
.hv9.in .box-12 .tip-box{ font-size: 16px; bottom: 40px;}
.hv9.in .box-12 .connect-box .row-new div{ padding-bottom: 20px;}
}
@media (max-width: 380px){
.hv9.in .box-7 .icon-box{ top: 280px;}
.hv9.in .box-12 h3{ padding: 0 20px;}
.hv9.in .box-12 .connect-box img{ max-width: 140px;}
}
@media (max-width: 360px){
.hv9 .box-5>img{ margin-top: -200px;}
.hv9 .box-7 .icon-box-img{ left: 15%;}
.hv9 .box-6>img{ margin-top: -250px;}
.hv9 .box-7>img{ margin-top: -140px;}
.hv9 .box-8>img{ margin-top: -300px;}
.hv9 .box-8 .note{ bottom: 8%;}
.hv9 .box-9>img{ margin-top: -180px;}
.hv9.in .box-8 .txt-box{ margin-top: -250px;}   
}
@media (max-width: 320px){
.hv9 .box-7 .icon-box-img{ left: 10%; bottom: -280px;}
.hv9.in .box-7 .icon-box{ top: 250px;}
.hv9.in .box-12 .connect-box img{ max-width: 120px;}
.hv9.in .box-12 .connect-box{ padding-bottom: 80px;}
}

/*
* Honor 8 Pro (.h8p)
*/
.h8p{ width: 100%; overflow: hidden; background: #000; color: #fff; text-align: center;}
.h8p .box .container{ max-width: 940px;}
.h8p .box-1 h1{ font: 90px "bignoodletitlingregular"; font-style: italic; padding-bottom: 4%;}
.h8p .box-3 .txt-box{ position: absolute;}
.h8p .box-1 .txt-box{ margin-top: -100px;}
.h8p .we-honor5x .banner-btnstyle{ color: #fff; border-color: #fff;}
.h8p .box-2 .container{ max-width: 100%; padding: 100px 0;}
.h8p .box-2 .icon-box span i{ font-style: normal;}
.h8p .icon-box span{ display: block; font-size: 20px; text-transform: uppercase;}
.h8p h2 { font: 80px "bignoodletitlingregular"; padding-bottom: 20px;}
.h8p h2 small{ color: #4d72da; text-transform: uppercase; display: block; font: 24px "Century Gothic", Arial, CenturyGothic, AppleGothic, sans-serif; padding-bottom: 20px;}
.h8p p{ font-size: 22px;}
.h8p .note{ font-size: 16px; margin: -100px auto 0; max-width: 400px;}
.h8p .box-5{ margin-top: -200px;}
.h8p .box-5 .note{ margin-top: -300px;}
.h8p .box-4 .txt-box,.h8p .box-6 .txt-box{ top: 100px;}
.h8p .box-7 .container,.h8p .box-8 .container{ padding: 80px 0;}
.h8p .box-7{ background: #011631;}
.h8p .table>tbody>tr>td{ width: 50%; vertical-align: middle; padding: 30px 5%;  border-top: 0 none; text-align: left;}
.h8p .table>tbody>tr>td p{ font-size: 16px; padding-bottom: 10px;}
.h8p .table>tbody>tr{ background: #232323;}
.h8p .table-striped>tbody>tr:nth-of-type(odd){ background: #444a4d;}
.h8p .table-striped>tbody>tr>td:nth-of-type(odd){ border-right: 4px solid #a2a5a6;}
@media (max-width: 1680px){
.h8p .box-3>img{ padding-top: 100px;}
}
@media (max-width: 1440px){
.h8p .box-3>img{ padding-top: 150px;}
.h8p .box-5 .note{ margin-top: -240px;}
}
@media (max-width: 1280px){
.h8p .box-4 .txt-box,.h8p .box-6 .txt-box{ top: 60px;}
}
@media (max-width: 1024px){
.h8p .box-1 h1{ font-size: 72px;}
.h8p .box-1 .txt-box{ margin-top: -60px;}
.h8p .icon-box span{ font-size: 16px;}
.h8p .box-2 .container{ padding: 50px 0;}
.h8p h2{ font-size: 56px; padding-bottom: 10px;}
.h8p h2 small{ font-size: 20px; padding-bottom: 10px;}
.h8p .icon-box img{ max-width: 100px;}
.h8p p{ font-size: 16px;}
.h8p .box-5 .note{ margin-top: -160px;}
.h8p .note{ font-size: 14px;}
}
@media (max-width: 768px){
.h8p .box-1 h1{ font-size: 56px;}
.h8p .box-5{ margin-top: 0;}
.h8p .box-4 .txt-box, .h8p .box-6 .txt-box{ top: 40px;}
}
@media (max-width: 640px){
.h8p .box .container{ max-width: 92%; padding: 50px 0;}
.h8p .icon-box img{ max-width: 90px;}
.h8p .box-1 h1{ font-size: 38px;}
.we-honor5x .banner-btnstyle{ width: 80%; height: 50px; line-height: 54px;}
.h8p .box-2{ text-align: left;}
.h8p .box-2 .icon-box span,.h8p .box-2 .icon-box img{ float: left;}
.h8p .box-2 .icon-box span i{ display: table-cell; vertical-align: middle; height: 90px; max-width: 240px; padding-left: 10px;}
.h8p .box-2 .col-sm-2{ clear: both;}
.h8p .box-3 .txt-box{ position: relative;}
.h8p .box-3>img{ padding-top: 0;}
.h8p .note{ font-size: 12px; text-align: left; margin-top: -40px;}
.h8p .box-2 .icon-box span{ font-size: 16px;}
.h8p .icon-box span{ font-size: 14px;}
.h8p .box-4 .txt-box, .h8p .box-6 .txt-box{ top: 0;}
.h8p h2{ font-size: 42px;}
.h8p h2 small{ font-size: 16px;}
.h8p .box-5 .note{ margin-top: -140px;}
.h8p .box-8 h2{ font-size: 32px;}
.h8p .table>tbody>tr>td{ width: auto;}
.h8p .table>tbody>tr>td p{ font-size: 14px;}
.h8p .table-striped>tbody>tr>td:nth-of-type(odd){ border-right-width: 2px}
}
@media (max-width: 320px){
.h8p .icon-box img{ max-width: 80px;}
.h8p .box-2 .icon-box span i{ max-width: 210px;}
}

/* 
*Honor Beer 2 (.hb2)
*/
.hb2{ width: 100%; overflow: hidden; background: #fff; color: #525252; text-align: center;}
.hb2 h2{ font-size: 40px; padding-bottom: 16px;}
.hb2 p{ font-size: 16px; padding-top: 12px;}
.hb2 .container{ max-width: 940px;}
.hb2 .txt-box,.hb2 .box-4 .icon-box,.hb2 .note-box{ position: absolute;}
.hb2 .box-1 .txt-box{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/hb2-img-01.png') repeat-y 0 0; width: 505px; right: 0; bottom: 200px; padding: 40px 0 40px 40px; text-align: left; color: #231f20;}
.hb2 .box-1 h2,.hb2 .box-1 p{ font: italic 700 34px CenturyGothic, AppleGothic, sans-serif;}
.hb2 .box-1 p{ font-size: 20px; font-style: normal; font-weight: 400;}
.hb2 .box-2,.hb2 .box-4,.hb2 .box-6{ color: #fff;}
.hb2 .txt-box{ bottom: -230px;}
.hb2 .box-2 .note{ position: absolute; right: 40px; bottom: 20px; font-size: 20px; width: 384px;}
.hb2 .box-2 .note span{ display: block;}
.hb2 .box-4 .icon-box{ top: 400px; width: 390px; left: -100px;}
.hb2 .icon-box span{ display: block; font-size: 16px;}
.hb2 .note-box{ color: #000; text-align: left; max-width: 520px; bottom: 20px; left: 36px;}
.hb2 .box-6 .note-box span{ font-size: 14px; padding-right: 10px;}
.hb2 .box-6 .note-box p{ font-size: 12px; padding-top: 0;}
.hb2 .box-2{ background: #000024;}
.hb2 .box-3{ background: #f7f7f7;}
.hb2 .box-4{ background: #18213e;}
.hb2 .box-5{ background: #f4efe9;}
.hb2 .box-6{ background: #7c7c7c;}
@media (max-width: 1680px){
.hb2 .txt-box{ bottom: -200px;}
.hb2 .box-4 .icon-box{ top: 300px;}
}
@media (max-width: 1536px){
.hb2 .box-1 h2{ font-size: 28px;}
.hb2 .box-1 p{ font-size: 18px;}
.hb2 .box-1 .txt-box{ max-width: 420px; bottom: 150px;}
.hb2 .box-1 .txt-box img{ max-width: 300px;}
}
@media (max-width: 1440px){
.hb2 .txt-box{ bottom: -180px;}
.hb2 .note-box{ max-width: 380px;}
.hb2 .box-4{ padding-top: 40px;}
}
@media (max-width: 1280px){
.hb2 .txt-box{ bottom: -150px;}
.hb2 .box-1 .txt-box{ max-width: 380px;}
.hb2 .box-1 h2{ font-size: 24px;}
.hb2 .box-1 p{ font-size: 16px; padding-top: 12px;}
.hb2 .box-2 .note{ width: 300px; font-size: 16px;}
.hb2 p{ padding-top: 0;}
.hb2 .box-4 .icon-box{ max-width: 300px; left: 0; top: 240px;}
}
@media (max-width: 1024px){
.hb2 .box{ padding-top: 40px;}
.hb2 .box-1 .txt-box img{ max-width: 240px;}
.hb2 .box-1 h2{ font-size: 22px;}
.hb2 .box-1 .txt-box{  max-width: 340px; bottom: 60px;}
.hb2 h2{ font-size: 34px;}
.hb2 .box-2 .note{ max-width: 220px;}
.hb2 .txt-box{ bottom:-120px;}
.hb2 .box-4{ padding-top: 80px;}
.hb2 .box-4 .icon-box{ max-width: 210px; left: 140px; top: 180px;}
.hb2 .icon-box span{ font-size: 12px;}
.hb2 .note-box{ max-width: 320px;}
}
@media (max-width: 768px){
.hb2 .box{ padding-top: 60px;}
.hb2 .box-2,.hb2 .box-4{ padding-top: 80px;}
.hb2 .box-1 .txt-box{ bottom: 20px; max-width: 280px;}
.hb2 .box-1 h2{ font-size: 18px;}
.hb2 .box-1 p{ font-size: 14px;}
.hb2 .box-1 .txt-box img{ max-width: 200px;}
.hb2 h2{ font-size: 28px;}
.hb2 p{ font-size: 14px;}
.hb2 .box-2 .note{ font-size: 14px;}
.hb2 .txt-box{ bottom: -80px;}
.hb2 .box-4 .icon-box{ top: 120px; left: 80px;}
.hb2 .note-box{ max-width: 100%; position: relative; bottom: inherit; text-align: center; padding: 20px 0; left: inherit; margin: 0 auto;}

}
@media (max-width: 640px){
.hb2 .box-1 .txt-box{ background: none; left: 120px; top: 70px; max-width: 100%; padding: 0;}
.hb2 .box-1 .txt-box img{ max-width: 160px;}
.hb2 .box-1 h2{ padding-bottom: 8px;}
.hb2 .box-1 p{ font-size: 12px;}
.hb2 .box{ padding-top: 0;}
.hb2 .box .txt-box{ position: relative; bottom: inherit; margin-top: 60px;}
.hb2 .container{ max-width: 92%;}
.hb2 .box-2 .note{ max-width: 100%; width: 100%; right: inherit; bottom: inherit; margin-top: 100px;}
.hb2 .box-2 .note img{ max-width: 220px;}
.hb2 .box>img{ margin-top: -160px;} 
.hb2 .box-4 .icon-box{ top: inherit; left: inherit; max-width: 100%; width: 100%; margin-top: 40px;}
.hb2 .box-4 .icon-box img{ max-width: 60px;}
.hb2 .icon-box span{ font-size: 14px;}
}
@media (max-width: 375px){
.hb2 .box-1 .txt-box{ top: 60px; left: 100px;}
.hb2 .box-2 .note{ margin-top: 80px;}
.hb2 .box-4 .icon-box img{ max-width: 50px;}
}
@media (max-width: 320px){
.hb2 .box-4 .icon-box{ margin-top: 20px;}
.hb2 .box-1 h2{ font-size: 14px; padding-bottom: 0;}
.hb2 .box-1 .txt-box img{ max-width: 140px;}
.hb2 .box-1 .txt-box{ top: 50px; left: 80px;}
.hb2 .box-1 p{ padding-top: 8px;}
.hb2 .box>img{ margin-top: -130px;}
.hb2 .box-2 .note{ margin-top: 70px;}
}

/*
*Honor8pro Tester 页面(.h8pt)
*/
.h8pt{ width: 100%; overflow: hidden; background: #000; color: #fff;}
.h8pt h2{ font: 80px "bignoodletitlingregular"; padding-bottom: 20px;}
.h8pt h3{ font: 48px "bignoodletitlingregular";}
.h8pt p{ font-size: 22px; padding-bottom: 20px;}
.h8pt .txt-box{ position: absolute; max-width: 760px; top: 80px; left: -2%;}
.h8pt b,.h8pt h3{ color: #00b7e6;}
.h8pt .box-2{ padding-top: 20px;}
.h8pt .box-3{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/h8pt-img-03.jpg') 0 0 no-repeat; padding-bottom: 80px;}
.h8pt .box-3 .container{ max-width: 780px;}
.h8pt .form-wrap{ background: #fff; border-radius: 20px;}
.h8pt .form-box{ padding: 50px 100px 0;}
.h8pt .form-box li{ padding-bottom: 10px;}
.h8pt .form-box p.note{ font-size: 14px; color: #333; padding-bottom: 0;}
.h8pt .form-box p.note i{ color: #ed1b24;}
.h8pt .form-box li>div{ padding: 10px 0 5px 0; color: #000;}
.h8pt .form-box li>div>i{ color: #ed1b24;}
.h8pt .form-box input[type="text"],.h8pt #gender,.h8pt .check-box,.h8pt #features{ height: 50px; line-height: 50px;}
.h8pt .form-box input[type="text"],.h8pt #gender,.h8pt #features{ width: 100%; padding: 0 10px; font-size: 18px; background: #fafafa; text-align: left; border: 1px solid #bbb;}
.h8pt .form-box .dropdown-menu>li>a{ font-size: 18px;}
.h8pt textarea{ width: 100%; resize:none; font-size: 18px; line-height: 24px; height: 72px; overflow-y:auto; padding: 10px; background: #fafafa; border: 1px solid #bbb;}
.h8pt label{ color: #333; padding-top: 10px; font-size: 12px;}
.h8pt .checkBox{ padding-top: 10px;}
.h8pt .checkBox a,.h8pt .checkBox a:hover,.h8pt .checkBox a:active,.h8pt .checkBoxa a:visited{ color:#333;}
.h8pt .dropdown-menu{ width: 100%;}
.h8pt .btn-box{ margin-top: 30px; text-align: center; padding:50px 0 50px; border-bottom-left-radius:20px;  border-bottom-right-radius:20px; background: #02b5e0; background-image:-webkit-linear-gradient(to bottom, #02b5e0, #0078d1); background-image:linear-gradient(to bottom,#02b5e0,#0078d1);}
.h8pt .sign-up,.h8pt .sign-up:hover,.h8pt .sign-up:active,.h8pt .sign-up:visited{ display: block; width: 200px; border-radius: 10px; border:2px #fff solid; color: #fff; margin: 0 auto; height: 48px; line-height: 52px; text-align: center; font: 24px "bignoodletitlingregular";}
.h8pt #gender:after,.h8pt #features:after{ content: ""; width: 0; height: 0; position: absolute; right: 15px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #8aa8bd transparent;}
.h8pt .box-4 .txt-box{ max-width: 500px; top: 120px;}
.h8pt .box-4 h2{ padding: 30px 0; font-size: 64px;}
.h8pt .we-honor5x .banner-btnstyle{ color: #fff; border-color: #fff;}
.h8pt .alert-success{ margin: 0; font-size: 16px; text-align: center;}
.h8pt .form-success{ background: #000; padding-top: 80px;}
.h8pt .birthday .col-xs-1{ line-height: 50px; text-align: center;}
.h8pt .box-5{ background-color: #0654b9; text-align: center; padding: 40px 0;}
.h8pt .box-5 h2{ font-size: 56px;}
.h8pt .box-5 a span{ display: block; color: #fff; padding-top: 10px; font-size: 24px; text-transform: uppercase;}
.h8pt .box-5 a:hover{ cursor: default;}
.h8pt .box-5 a.on:hover{ cursor: pointer;}
.h8pt .box-5 a.on span{ color: #6c264f;}
.h8pt .box-6{ background:url('/content/dam/honor/se/products/smartphone/honor8pro/img/BGpattern.jpg') 0 0 repeat-y; padding: 80px 0 20px; text-align: center;}
.h8pt .box-6 h2,.h8pt .box-7 h2{ color: #00b7e6;}
.h8pt .box-6 h3{ padding: 40px 0; font:700 42px "Century Gothic", Arial, CenturyGothic, AppleGothic, sans-serif;}
.h8pt .box-6 .tester-box{ text-align: left;}
.h8pt .box-6 .tester-box span{ display: block; margin-top: 20px;}
.h8pt .box-6 .tester-box span.tester-name{ color: #00b7e6; font-size: 32px;}
.h8pt .box-6 .tester-box p{ font-size: 16px; margin-top: 10px;}
.h8pt .box-6 .tester-box span.line{ background-color: #fff; height: 1px; max-width: 20%;}
.h8pt .box-7,.h8pt .box-9{ background-color: #27163a; padding: 80px 0;}
.h8pt .box-7 h2{ text-align: center; height: 30px;}
.h8pt .box-7 h3,.h8pt .box-7 p{ max-width: 496px;}
.h8pt .box-7 h3{ color: #fff; font:42px "Century Gothic", Arial, CenturyGothic, AppleGothic, sans-serif; padding-bottom: 20px; text-transform: uppercase;}
.h8pt .box-7 .ksp-box>div,.h8pt .video-container{ padding-top: 120px;}
.h8pt .box-7 p{ padding-top: 20px; height: 200px;}
.h8pt .ksp-btn-box a{ display: none; width: 200px; height: 45px; border-radius: 10px; border: 2px #fff solid; font: 24px/49px "bignoodletitlingregular"; text-align: center; color: #fff;
overflow: hidden; text-overflow: ellipsis; margin: 2px 5px; cursor: pointer; text-decoration:none;}
.h8pt .video-container .ksp-btn-box a{ margin: 0 auto;}
.h8pt div.on .ksp-btn-box a{ display: block;}
.h8pt .ksp-btn-box{ height: 50px; overflow: hidden;}
.h8pt .box-6 .tester-box>div{ padding-bottom: 60px;}
.h8pt .video-container h3,.h8pt .video-container p{ text-align: center; max-width: 100%; height: auto;}
.h8pt .video-box{ position: absolute; left: 0; top: 0; width: 100%; padding: 5.416666666666667% 9.16666666666667% 3.489583333333333% 8.8%;}
.h8pt .box-8 .txt-box{ top: 140px;}
.h8pt .tester-info-box{ border: 2px solid #fff; padding: 40px 80px; margin-bottom: 40px;}
.h8pt .tester-info-box h2{ padding-bottom: 0; font-size: 56px; padding-top: 10px;}
.h8pt .tester-info-box h3{ font-size: 48px; color: #fff;}
.h8pt .box-9 h4{ font-size: 22px; font-weight: 700; padding-bottom: 40px; text-align: center;}
.h8pt .box-9 p,.h8pt .box-9 .text-center,.h8pt .box-9 .img-text-box{ padding-bottom: 40px;}
.h8pt .box-9 .tester-container{ padding-bottom: 80px;}
.h8pt .box-9 .img-text-box  p{ padding-bottom: 20px;}
.h8pt .box-9 b,.h8pt .box-10 b,.h8pt .box-10 a{ color: #fff;}
.h8pt .box-10 .fb-btn,.h8pt .box-10 .t-btn{ font-size: 48px; margin-right: 20px;}
.h8pt .box-10 .tip{ position: absolute; right: 10%; bottom: 20px;}
.h8pt .box-10 .tip a{ text-decoration: underline;}
.h8pt .box-10 .txt-box{ top: 120px;}
.h8pt .box-9 .text-box{ padding-left: 20%; padding-bottom: 40px; text-align: left;}
.h8pt .box-9 .text-box p,.h8pt .box-9 .text-box li{ padding-bottom: 10px;}
@media (max-width: 1680px){
.h8pt .box-10 .txt-box{ top: 66px;}
}
@media (max-width: 1536px){
.h8pt .box-4 .txt-box{ top: 80px;}
.h8pt .box-4 h2{ padding: 20px 0;}
.h8pt .box-10 .txt-box{ top: 40px;}
.h8pt .box-10 .tip{ right: 8%;}
}
@media (max-width: 1440px){
.h8pt .box-10 .txt-box{ top: 30px;}
.h8pt .box-8 .txt-box{ top: 100px;}
}
@media (max-width: 1366px){
.h8pt h2{ font-size: 72px;}
.h8pt p{ font-size: 20px;}
.h8pt h3{ font-size: 36px;}
.h8pt .box-4 h2{ font-size: 56px;}
.h8pt .box-5 h2{ font-size: 42px;}
.h8pt .box-5 a span{ font-size: 20px;}
.h8pt .box-6 h3,.h8pt .box-7 h3{ font-size: 32px;}
.h8pt .box-6 .tester-box span.tester-name{ font-size: 28px;}
.h8pt .box-7 .ksp-box>div,.h8pt .video-container{ padding-top: 80px;}
.h8pt .box-7 p{ height: 150px;}
.h8pt .box-10 .txt-box{ top: 40px;}
}
@media (max-width: 1280px){
.h8pt .txt-box{ left: 0; max-width: 680px; top: 60px;}
.h8pt .box-4 .txt-box{ top: 60px;}
.h8pt .box-10 .txt-box{ top: 60px;}
.h8pt .box-10 h2{ font-size: 56px;}
.h8pt .box-10 p,.h8pt .box-8 p{ font-size: 16px;}
}
@media (max-width: 1024px){
.h8pt .txt-box{ max-width: 560px; left: 40px; top: 40px;}
.h8pt h2{ font-size: 56px;}
.h8pt p{ font-size: 18px;}
.h8pt h3{ font-size: 28px;}
.h8pt .box-4 h2{ font-size: 42px; padding: 10px 0;}
.h8pt .box-4 .txt-box{ top: 60px; max-width: 380px; left: 80px;}
.h8pt .box-4 .txt-box img{ width: 200px; padding-bottom: 10px;}
.h8pt .we-honor5x .banner-btnstyle{ width: 168px;}
.h8pt .box-5 h2{ font-size: 36px;}
.h8pt .box-5 a span{ font-size: 20px;}
.h8pt .box-6 h3,.h8pt .box-7 h3{ font-size: 28px;}
.h8pt .box-6 .tester-box span.tester-name{ font-size: 24px;}
.h8pt .box-6 .tester-box p{ font-size: 12px;}
.h8pt .box-7 p{ height: 135px;}
.h8pt .box-8 .txt-box{ top: 60px;}
.h8pt .box-10 .txt-box{ top: 40px;}
.h8pt .box-10 h2, .h8pt .box-8 h2{ font-size: 48px;}
.h8pt .box-10 p, .h8pt .box-8 p{ font-size: 14px;}
}
@media (max-width: 768px){
.h8pt .box-2{ padding: 80px 0 40px;}
.h8pt .box-2 .txt-box{ top: inherit; left: 40px; max-width: 100%; position: relative;}
.h8pt .box-2 img{ margin-top: -486px;}
.h8pt .box-2 h2{ max-width: 500px;}
.h8pt .box-2 p{ max-width: 360px;}
.h8pt .box-3 .container{ max-width: 100%;}
.h8pt .box-4 .txt-box{ position: absolute; top: 30px; left: 60px; max-width: 280px;}
.h8pt .box-4 h2{ font-size: 32px;}
.h8pt .we-honor5x .banner-btnstyle{ width: 124px;}
.h8pt .box-5 h2{ font-size: 32px;}
.h8pt .box-5 a span{ font-size: 18px;}
.h8pt .box-6 h3,.h8pt .box-7 h3{ font-size: 24px;}
.h8pt .box-6 .tester-box span.tester-name{ font-size: 20px;}
.h8pt .box-8 .txt-box,.h8pt .box-10 .txt-box{ max-width: 400px;}
.h8pt .box-10 h2, .h8pt .box-8 h2{ font-size: 36px; padding-bottom: 0;}
.h8pt .box-10 p, .h8pt .box-8 p{ font-size: 12px;}
.h8pt .box-10 .txt-box{ top: 20px;}
.h8pt .box-10 p{ padding-bottom: 5px;}
.h8pt .box-10 .tip{ height: 48px; line-height: 48px;}
}
@media (max-width: 640px){
.h8pt .box-2{ text-align: center; padding-bottom: 0;}
.h8pt .box-2 .txt-box{ left: 5%; max-width: 90%;}
.h8pt .box-2 img{ margin-top: 0;}
.h8pt .box-2 h2{ font-size: 36px;}
.h8pt .box-2 h2,.h8pt .box-2 p{ max-width: 100%;}
.h8pt .box-3{ padding: 0; background: #fff;}
.h8pt .box-3 .container{ padding: 0;}
.h8pt .form-wrap{ border-radius: 0;}
.h8pt .form-box{ padding: 10% 5% 0;}
.h8pt .btn-box{ border-radius:0; padding: 0 0 10%; background: #fff;}
.h8pt .sign-up, .h8pt .sign-up:hover, .h8pt .sign-up:active, .h8pt .sign-up:visited{ border-color: #0078d1; color: #0078d1;}
.h8pt .box-4 .txt-box{ position: relative; top: inherit; left: inherit; width: 90%; max-width: 100%; margin: 0 auto; text-align: center; padding:0 0 20px;}
.h8pt .we-honor5x .banner-btnstyle{ width: 100%;}
.h8pt .box-5 .col-xs-6{ padding-bottom: 30px;}
.h8pt .container{ max-width: 94%;}
.h8pt .box-7 .ksp-box>div.on a{ width: 94%;}
.h8pt .box-7 h2{ height: 100px;}
.h8pt .box-6 .tester-box span.tester-name{ font-size: 18px;}
.h8pt .box-6 .tester-box,.h8pt .box-7{ text-align: center;}
.h8pt .box-6 .tester-box span.line{ margin: 20px auto 0;}
.h8pt .box-7 p,.h8pt .ksp-btn-box{ height: auto;}
.h8pt .box-6 .tester-box p{ height: 110px; overflow: hidden;}
.h8pt .box-8 img,.h8pt .box-10 img{ max-width: 1200px; margin-left: -730px;}
.h8pt .box-8 .txt-box,.h8pt .box-10 .txt-box{ position: relative; top: inherit; left: inherit; text-align: center; padding-top: 40px;}
.h8pt .box-10 p, .h8pt .box-8 p{ font-size: 16px;}
.h8pt .box-8{ background-color: #2a183e;}
.h8pt .box-10{ background-color: #111a37;}
.h8pt .tester-info-box{ padding: 20px 0;}
.h8pt .box-9{ text-align: center; padding: 0;}
.h8pt .box-10 .tip{ right: 0; padding: 0 5%; width: 100%; text-align: center;}
.h8pt .col-xs-12{ padding-bottom: 20px;}
.h8pt .box-9 .text-box{ padding-left: 10%;}
}
@media (max-width: 380px){
.h8pt .box-8 img, .h8pt .box-10 img{ margin-left: -750px;}
}
@media (max-width: 320px){
.h8pt .box-8 img, .h8pt .box-10 img{ margin-left: -620px; max-width: 1000px;}
}

/* 
*Maintenance(系统维护页)
*/
.maintenance{ width: 100%; overflow: hidden; color: #fff; background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/maintenance_1.jpg') 0 0 no-repeat; padding: 10% 0; text-align: center;}
.maintenance .container{ max-width: 960px;}
.maintenance h1{ font: 48px "bignoodletitlingregular";}
.maintenance h1 small{ display: block; font-size: 100%; color: #fff; padding: 5% 0;}
@media (max-width: 640px){
.maintenance{ background-image: url('/content/dam/honor/se/products/smartphone/honor8pro/img/maintenance_1_m.jpg');}
.maintenance .container{ padding: 0 5%;}
.maintenance .col-xs-6{ padding-bottom: 5%;}
}

/* 
*Trade in (.tradeIn) 
*/
.tradeIn{ width: 100%; overflow: hidden; background: #fff; color: #333; text-align: center; font-size: 22px;}
.tradeIn h2{ font: 90px/1 "bignoodletitlingregular";}
.tradeIn .box{ padding: 100px 0;}
.tradeIn .box-1{ padding: 0;}
.tradeIn .box-2 h2,.tradeIn .box-4 h2{ color: #06abe5;}
.tradeIn .box-3,.tradeIn .box-5{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/TradeIn-02.jpg') 0 0 repeat-x #0092db;}
.tradeIn .box-3,.tradeIn .box-5,.tradeIn .box-7 h2{ color: #fff;}
.tradeIn .box-3 .row-new{ padding: 80px 0;}
.tradeIn .box-3 h3{ padding: 40px 0 16px; font-size: 24px; font-weight: 700; text-transform: uppercase;}
.tradeIn .box-3 .row-new>div,.tradeIn .box-4 .row-new>div{ padding: 0 20px;}
.tradeIn .box-4{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/TradeIn-06.png') top right no-repeat #fff; text-align: left;}
.tradeIn .box-4 h2{ margin-top: 200px;}
.tradeIn h2 i{ color: #f3013b; font-style: normal;}
.tradeIn .box-4 a{ width: 300px;  height: 60px; line-height: 66px; margin-top: 60px;}
.tradeIn .box-5 ul{ padding-top: 60px;}
.tradeIn .box-5 li{ border-right: 2px solid #f3f5f4; padding: 10px 40px; margin-bottom: 20px;}
.tradeIn .box-5 li div{ background: #f5f5f5; padding: 40px 20px;}
.tradeIn .box-5 li h3{ color: #4e4e4e; font-size: 22px; font-weight: 700;}
.tradeIn .box-5 li h4{ color: #000; font-size: 36px; font-weight: 700; padding-top: 20px;}
.tradeIn .box-6{ background: #f30040; color: #fff; padding: 0;}
.tradeIn .box-6 h2{ height: 120px; line-height: 146px; font-size: 72px;}
.tradeIn .box-6 h2 a,.tradeIn .box-6 h2 i{ color: #fff;}
.tradeIn .box-7{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/TradeIn-08.png') top left no-repeat #fff; text-align: left;}
.tradeIn .box-7 h2{ margin: 40px 200px 0 -200px;}
.tradeIn .box-7 ol{ padding-left: 20px;}
.tradeIn .box-7 li{ list-style-type: decimal; padding-bottom: 30px;}
.tradeIn .box-7 li,.tradeIn .box-7 li h3{ font-weight: 700;}
.tradeIn .box-7 li p{ font-weight: 400;}
.tradeIn .box-8{ padding: 0 0 40px;}
.tradeIn .box-8 h3{ font-weight: 700; font-size: 22px;}
.tradeIn .box-8 img{ padding: 40px 0;}
.tradeIn .box-8 p{ font-size: 16px; padding-bottom: 10px;}
@media (max-width: 1680px){
.tradeIn .box-7 h2{ margin: 40px 80px 0 -80px;}
.tradeIn .box-7 ol{ padding-left: 160px;}
}
@media (max-width: 1536px){
.tradeIn .box-4 a{ width: 260px;}
.tradeIn .box-7 ol{ padding-left: 200px;}
}
@media (max-width: 1440px){
.tradeIn h2{ font-size: 64px;}
.tradeIn{ font-size: 18px;}
.tradeIn .box-3 h3,.tradeIn .box-5 li h3{ font-size: 20px;}
.tradeIn .box-3 .row-new>div, .tradeIn .box-4 .row-new>div{ padding: 0 30px;}
.tradeIn .box-4{ background-position: 400px 0;}
.tradeIn .box-5 li h4{ font-size: 28px;}
.tradeIn .box-6 h2{ font-size: 56px; height: 100px; line-height: 120px;}
.tradeIn .box-7{ background-position:  -140px 0;}
.tradeIn .box-7 ol{ padding-left: 160px;}
.tradeIn .box-7 h2{ margin: 100px 40px 0 -40px;}
.tradeIn .box-8{ padding: 20px 0;}
.tradeIn .box-8 img{ padding: 20px 0; max-width: 600px;}
.tradeIn .box-8 h3{ font-size: 20px;}
.tradeIn .box-3 .row-new{ padding: 40px 0;}
}
@media (max-width: 1366px){
.tradeIn .box-3 .row-new{ padding-bottom: 0;}
}
@media (max-width: 1280px){
.tradeIn .box-7 h2{ margin: 100px 0 0;}
.tradeIn .box-7{ background-position: -180px 0;}
.tradeIn{ font-size: 16px;}
.tradeIn .box-8 p{ font-size: 14px;}
}
@media (max-width: 1024px){
.tradeIn .box-7{ background-position:-280px 0;}
.tradeIn .box-7 h2{ margin: 60px -40px 0 40px;}
.tradeIn .box-7 li h3,.tradeIn .box-8 h3{ font-size: 18px;}
}
@media (max-width: 768px){
.tradeIn h2{ font-size: 56px;}
.tradeIn .box-3 .row-new>div, .tradeIn .box-4 .row-new>div{ padding: 0 20px;}
.tradeIn .box-3 img{ max-width: 120px;}
.tradeIn .box{ padding: 60px 0;}
.tradeIn .box-3 h3, .tradeIn .box-5 li h3{ font-size: 18px;}
.tradeIn .box-4 h2{ margin-top: 80px;}
.tradeIn .box-4 a{ width: 200px; margin-top: 20px; font-size: 20px;}
.tradeIn .box-4{ background-position: 100px 0;}
.tradeIn .box-5 li div{ padding: 20px 10px;}
.tradeIn .box-5 li h4{ font-size: 24px;}
.tradeIn .box-5 ul{ padding-top: 40px;}
.tradeIn .box-6,.tradeIn .box-1{ padding: 0;}
.tradeIn .box-6 h2{ font-size: 42px;}
.tradeIn .box-7{ background-position: -360px 0;}
.tradeIn .box-7 li{ padding-bottom: 14px;}
.tradeIn .box-7 h2{ margin: 80px -20px 0 20px;}
}
@media (max-width: 640px){
.tradeIn .box-3{ padding-bottom: 0;}
.tradeIn .box-3 .row-new>div{ margin-bottom: 60px;}
.tradeIn .box-3 img{ max-width: 140px;}
.tradeIn .box-3 h3, .tradeIn .box-5 li h3{ font-size: 20px;}
.tradeIn{ font-size: 18px;}
.tradeIn h2{ font-size: 48px;}
.tradeIn .container{ max-width: 92%;}
.tradeIn .box-4{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/TradeIn-06-phone.png') 0 bottom no-repeat;}
.tradeIn .box-4 h2{ margin-top: 0;}
    .tradeIn .box-4 .row-new>div{ margin-bottom: 40px;}
    .tradeIn .box-4 a{ width: 80%; color: #fff; border-color: #fff; font-size: 28px; margin: 40px auto 0; display: block;}
    .tradeIn .box-4 .row-new>div.col-sm-4{ padding-right: 100px;}
    .tradeIn .box-5 li{ margin-bottom: 10px; border-right: 0; padding: 0 40px;}
    .tradeIn .box-5 li h4{ font-size: 32px;}
    .tradeIn .box-7{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/TradeIn-08-phone.png') 0 0 no-repeat; background-size: 100%; margin-top: 40px; border-bottom: 2px dashed #f5f5f5;}
    .tradeIn .box-7 h2{ margin: -30px 0 40px 0; width: 50%; padding-left: 20px;}
    .tradeIn .box-7 ol{ padding: 20px 20px 0 40px;}
    .tradeIn .box-8 img{ max-width: 100%;}
    .tradeIn .box-6 h2{ font-size: 36px;}
}
@media (max-width: 380px){
.tradeIn .box-4 a{ font-size: 24px;}
.tradeIn .box-7 h2{ margin: -36px 0 20px 0;}
}
@media (max-width: 320px){
.tradeIn h2{ font-size: 42px;}
.tradeIn .box-3 img{ max-width: 100px;}
.tradeIn .box-6 h2{ font-size: 30px; height: 80px; line-height: 100px;}
.tradeIn .box-7 h2{ margin: -42px 0 10px 0;}
}

/* 
*SK GAMING (.sk_gaming) 
*/
.sk_gaming{ width: 100%; overflow: hidden; background: #fff; color: #fff; text-align: center;}
.sk_gaming h2{ font-size: 96px/1 "bignoodletitlingregular"; padding: 20px 0 60px;}
.sk_gaming p{ font-size: 24px;}
.sk_gaming .box-1,.sk_gaming .box-5,.sk_gaming .box-5 input{ background-color: #112044;}
.sk_gaming .container{ padding: 80px 0;}
.sk_gaming .box-1 p,.sk_gaming .box-4 h3{ font-weight: 700;}
.sk_gaming .box-4 h3{ padding-bottom: 10px;}
.sk_gaming .box-1 h4{ color: #3db3e7; font-size: 32px; font-weight: 700; padding-top: 20px;}
.sk_gaming .box-2,.sk_gaming .box-4,.sk_gaming .box-7{ background-color: #3db3e7;}
.sk_gaming .box-2 .txt-box{ padding: 20px 0;}
.sk_gaming .box-2 p,.sk_gaming .box-2 .txt-box{ text-align: left; padding-right: 40px;}
.sk_gaming .box-2 .txt-box i{ display: block; font-size: 128px; font-style: normal; font-weight: 700; height: 40px; line-height: 80px;}
.sk_gaming .box-2 .txt-box p{ font-size: 36px; padding: 20px 60px;}
.sk_gaming .box-4 .container{ padding-bottom: 60px;}
.sk_gaming .box-4 .txt-box{ padding: 80px 120px;}
.sk_gaming .box-4 .container{ overflow: hidden;}
.sk_gaming .box-4 ul,.sk_gaming .box-4 .txt-box{ background-color: #222c50;}
.sk_gaming .box-4 ul{ width: 9999px; position: relative;}
.sk_gaming .box-4 li{ float: left;}
.sk_gaming .box-4 .play-box{ height: 30px; margin: 20px auto 40px;}
.sk_gaming .box-4 .play-box span{ border: 2px solid #fff; margin:20px 20px 0 0; display: inline-block; width: 30px; height: 30px; border-radius: 100%; cursor: pointer;}
.sk_gaming .box-4 .play-box span.on{ background-color: #fff;}
.sk_gaming .box-5 .container{ max-width: 800px;}
.sk_gaming .box-5 p{ padding:50px 0;}
.sk_gaming .box-5 li{ padding-bottom: 40px; text-align: left;}
.sk_gaming .box-5 li.text-center,.sk_gaming .box-5 .btn-box{ text-align: center;}
.sk_gaming .box-5 li .title{ padding-bottom: 10px; font-size: 18px;}
.sk_gaming .box-5 input[type="text"]{ border-radius: 10px; height: 60px; line-height: 60px; font-size: 18px; padding: 0 20px; border: 2px solid #fff; color: #fff; width: 100%;}
.sk_gaming .box-5 input[type="text"]::-webkit-input-placeholder{ color: #fff;} 
.sk_gaming .box-5 input[type="text"]:-moz-placeholder{ color: #fff;}
.sk_gaming .box-5 input[type="text"]::-moz-placeholder{ color: #fff;}
.sk_gaming .box-5 input[type="text"]:-ms-input-placeholder{ color: #fff;}
.sk_gaming .box-5 .error{ border-color: #ff0 !important;}
.sk_gaming .show-text{ display: block; display: none; color: #ff0;}
.sk_gaming .alert-success{ background-color: #BEDB39; color: #000; border: none;}
.sk_gaming .box-5 input[type="checkbox"]{ height: 18px; width: 18px; position: absolute; left: 0; top: 0;}
.sk_gaming .box-5 label{ color: #fff; font-size: 16px; padding-left: 40px;}
.sk_gaming .box-5 a,.sk_gaming .box-7 a{ color: #fff; text-decoration: underline; text-decoration: underline; height: 50px; line-height: 50px; font-size: 16px;}
.sk_gaming .box-5 .btn-box a,.sk_gaming .box-7 a{ border: 2px solid #fff; border-radius: 10px; padding: 0 60px; display: inline-block; text-decoration: none; font: 24px/56px "bignoodletitlingregular";}
.sk_gaming .box-6{ background-color: #fff; color: #112044; font-weight: 700;}
.sk_gaming .box-6 p{ padding: 40px 0;}
.sk_gaming .box-6 a{ color: #112044; text-decoration: underline;}
.sk_gaming .box-7 h3{ color: #222c50; font-weight: 700; margin-top: -40px; font-size: 36px; padding-bottom: 60px;}
.sk_gaming .box-7 .txt-box{ padding: 20px 0;}
.sk_gaming .box-7 .txt-box p,.sk_gaming .box-7 .txt-box h4{ padding-top: 20px;}
.sk_gaming .box-7 .txt-box h4{ font-size: 24px; font-weight: 700;}
.sk_gaming .box-7 .btn-box{ padding-top: 40px;}
.sk_gaming .box-7 a{ padding: 0 20px;}
.sk_gaming .modal-dialog .fa{ font-size: 64px; color: #3db3e7; padding-bottom: 20px;}
.sk_gaming.deezer{ color: #000;}
.sk_gaming.deezer h2,.sk_gaming.deezer .box-2 i{ color: #3eb3e8;}
.sk_gaming.deezer .box-1,.sk_gaming .box-4 ul,.sk_gaming.deezer .box-4 .txt-box,.sk_gaming.deezer .box-4 .play-box span.on,.sk_gaming.deezer .box-5, .sk_gaming.deezer .box-5 input{ background: #3eb3e8; color: #fff;}
.sk_gaming.deezer h4{ color: #222c50;}
.sk_gaming.deezer .box-2{ background: #fff url("/content/dam/honor/se/products/smartphone/honor8pro/img/honor_meets_deezer-03.jpg") no-repeat center center;}
.sk_gaming.deezer .box-2 p, .sk_gaming.deezer .box-2 .txt-box{ text-align: center; padding-right: 0;}
.sk_gaming.deezer .box-2 .txt-box p{ padding: 0 120px;}
.sk_gaming.deezer .box-2 .txt-box{ padding: 60px 0;}
.sk_gaming.deezer .box-2 img{ padding-bottom: 40px;}
.sk_gaming.deezer .box-4{ background: #fff;}
.sk_gaming.deezer .box-4 .play-box span{ border-color: #3eb3e8;}
.sk_gaming.deezer .box-5 h2,.sk_gaming.deezer .box-7 h2,.sk_gaming.deezer .box-7,.sk_gaming.deezer .box-7 h4{ color: #fff;}
.sk_gaming.deezer .box-7 .txt-box p{ padding: 20px 0;}
.sk_gaming.deezer .box-7 .txt-box h4{ padding-top: 62px;}
@media (max-width: 1280px){
.sk_gaming .modi-img{ margin-top: -1px;}
}
@media(min-width: 1280px){
.sk_gaming .modal-dialog{ width: 1000px;}
}
@media(max-width: 1024px){
.sk_gaming p,.sk_gaming .box-7 .txt-box h4{ font-size: 18px;}
.sk_gaming .box-1 h4,.sk_gaming .box-2 .txt-box p{ font-size: 24px;}
.sk_gaming .box-2 .txt-box p,.sk_gaming.deezer .box-2 .txt-box p{ padding: 0 40px;}
.sk_gaming h2{ font-size: 64px; padding-bottom: 40px;}
.sk_gaming .box-4 h3{ font-size: 20px;}
.sk_gaming .container{ padding: 40px 0;}
.sk_gaming .box-2 .txt-box i{ font-size: 90px; height: 20px; line-height: 40px;}
.sk_gaming .box-2 .txt-box i.text-left{ line-height: 80px;}
.sk_gaming .box-4 .txt-box{ padding: 60px 80px;}
.sk_gaming .box-4 .play-box{ margin: 10px auto 20px;}
.sk_gaming .box-7 h3{ font-size: 24px; padding-bottom: 20px;}
.sk_gaming .modi-img{ margin-top: -6px;}
}
@media (min-width: 768px) and (max-width: 1023px){
.modi-img-2{ margin-top: 4px;}
}
@media (max-width: 768px){
.sk_gaming .modi-img{ margin-top: -12px;}
.sk_gaming .box-2 p, .sk_gaming .box-2 .txt-box{ padding-right: 10px;}
.sk_gaming .box-4 .play-box span{ height: 24px; width: 24px;}
.sk_gaming .box-5 li{ padding-bottom: 30px;}
}
@media (max-width: 640px){
.sk_gaming .container{ width: 90%;}
.sk_gaming .box-1 h3{ background-color: #3db3e7; font: 32px "bignoodletitlingregular"; padding: 30px 0;}
.sk_gaming .box-1 h3 span{ color: #112044;}
.sk_gaming h2{ font-size: 48px;}
.sk_gaming .box-2 p, .sk_gaming .box-2 .txt-box{ padding-right: 0; text-align: center;}
.sk_gaming .box-4 .txt-box{ padding: 40px 20px;}
.sk_gaming .col-sm-4{ padding-bottom: 20px;}
.sk_gaming .box-7 .col-sm-4,.sk_gaming.deezer .box-7 .col-sm-6{ border-bottom: 2px solid #fff;}
.sk_gaming .box-7 h3,.sk_gaming .box-6 p{ padding-bottom: 0;}
.sk_gaming .box-7 .btn-box{ padding-top: 20px;}
.sk_gaming.deezer .box-2 .txt-box{ padding: 40px 0;}
}
@media (max-width: 320px){
.sk_gaming .box-1 h3{ font-size: 28px;}
}

/* 
*STF (.stf) 
*/
.stf{ width: 100%; overflow: hidden; background: url("/content/dam/honor/se/products/smartphone/honor8pro/img/stf-01.jpg") #040d2c no-repeat 0 0; color: #fff; text-align: center; font-size: 18px;}
.stf h2{ font: 64px/1 "bignoodletitlingregular"; text-shadow: 2px 2px 10px #3fafff; padding-top: 12px;}
.stf .box{ padding: 20px 0;}
.stf .box-1{ text-align: left;}
.stf .box-1 ul{ text-align: right;}
.stf .box-1 li{ display: inline-block; margin-left: 10px;}
.stf a{ color: #fff;}
.stf a:hover{ color: #cdcfd9;}
.stf .box-1 li a{ border-radius: 100%; line-height: 40px; height: 40px; width: 40px; border: 1px solid #fff; display: block; text-align: center; font-size: 20px;}
.stf .box-1 li a:hover{ border-color: #cdcfd9;}
.stf .box-1 .text-box{ text-align: center;}
.stf .box-1 h3{ text-shadow: 2px 2px 10px #3fafff;}
.stf .count-down{ font-size: 56px; border-bottom: 1px solid #fff; padding: 20px;}
.stf .count-down,.stf .input-box{ max-width: 480px; margin: 0 auto;}
.stf .count-down p{ font-size: 16px;}
.stf .count-down .col-xs-offset-1{ margin-left: 4.166666665%;}
.stf .input-box{ margin-top: 100px; max-width: 720px; background: none;}
.stf .input-box input[type="text"],.stf .input-box .main,.stf .input-box .pre-order{ height: 50px; line-height: 50px;}
.stf .input-box input[type="text"]{ width: 550px; font-size: 16px; padding: 0 20px; border:0 none; border-left: 1px solid #ddd; float: left;}
.stf .input-box .checkBox{ margin: 20px 0;}
.stf .input-box .checkBox label{ color: #fff; display: block; padding-left: 30px;}
.stf .input-box .checkBox input{ position: absolute; top: 0; left: 0;}
.stf .input-box .pre-order{ display: block; width: 200px; background-color: #00a6f1; color: #fff; text-transform: uppercase; font-size: 14px; text-align: center; margin: 0 auto;}
.stf .input-box .main{ font-size: 16px; width: 180px; float: left; border: 0 none;}
.stf .wrapper-dropdown-3{ padding: 0 20px; border: 0 none;}
.stf .wrapper-dropdown-3 .dropdown li a{ padding: 0 20px;}
.stf .wrapper-dropdown-3.active .dropdown{ max-height: 300px; overflow-y: auto;}
.stf .show-text{ color: #fff600; text-align: left;}
.stf .box-3{ padding: 160px 0;}
.stf.stf_live .box-3{ padding: 40px 0;}
.stf .video-box{ max-width: 680px; margin: 20px auto; background-color: #ccc;}
.stf .box-3 .btn-box{ padding-top: 40px;}
.stf .box-3 .btn-box>div{ height: 60px; line-height: 60px;}
.stf .box-3 .btn-box span{ padding-left: 10px;}
.stf .back-top{ position: fixed; right: 40px; bottom: 40px; display: none;}
@media (max-width: 640px){
.stf{ background-image: url('/content/dam/honor/se/products/smartphone/honor8pro/img/stf-01-p.jpg'); background-size: 100%;}
.stf .box{ padding: 40px 0;}
.stf .box-1,.stf .box-1 ul{ text-align: center;}
.stf .box-1 ul{ padding: 20px 0;}
.stf .box-1 li{ margin: 0 16px 0 0;}
.stf h2{ font-size: 48px; padding-top: 20px;}
.stf .box-1 .text-box img{ max-width: 50%;}
.stf .input-box{ padding: 0 4%; margin-top: 60px;}

.stf .input-box a{ width: 30%;}
.stf .box-3 .btn-box{ padding-top: 20px;}
.stf .box-3 .btn-box>div{ height: auto;}
.stf .box-3 .btn-box span{ display: block; padding-left: 0;}
.stf .count-down{ font-size: 42px;}
.stf .count-down p{ font-size: 14px;}
.stf .input-box .main,.stf .input-box input[type="text"],.stf .input-box .pre-order{ width: 100%; float: none; margin-bottom: 20px;}
.stf .wrapper-dropdown-3 .dropdown li a{ width: 100%;}
.stf.stf_live{ display: none;}
.stf.stf_live .box-3{ padding: 0;}
}
@media (max-width: 320px){
.stf{ font-size: 14px;}
.stf h2{ font-size: 36px;}
.stf .box{ padding: 20px 0;}
.stf .count-down{ font-size: 32px;}
.stf .input-box .main,.stf .input-box input[type="text"]{ font-size: 14px;}
.stf .input-box a{ font-size: 12px;}
.stf .box-3 .btn-box>div{ line-height: 40px;}
}

/* 
*honor9 (.h9) 
*/
.h9{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 16px; color: #fff;}
.h9 h2{ font: 90px/1.2 "bignoodletitlingregular";}
.h9 h3{ font-size: 32px; padding-bottom: 30px; text-transform: uppercase;}
.h9 p{ font-size: 24px;}
.h9 a{ color: #6bf; text-decoration: underline;}
.h9 a:hover{ color: #008eff;}
.h9 .box{ background-color: #fff;}
.h9 .text-box{ position: absolute;}
.h9 .icon-box .col-xs-6{ margin-bottom: 40px;}
.h9 .box-1 .text-box{ top: 200px; max-width: 800px;}
.h9 .box-1 .text-box,.h9 .box-6 .text-box,.h9 .box-7 .text-box,.h9 .box-11 .text-box{ left: 200px;}
.h9 .learn-more{ text-align: center; position: absolute; bottom: 40px; width: 100%; text-decoration: none;}
.h9 .learn-more:hover{ color: #fff;}
.h9 .learn-more span{ display: block; font-weight: 700;}
.h9 .learn-more i{ font-size: 32px;}
.h9 .box-1 .learn-more{ bottom: 240px;}
.h9 .close-this{ color: #ccc; font-size: 32px; width: 30px; height: 30px; line-height: 30px; text-align: center; position: absolute; z-index: 999; display: none;}
.h9 .close-this:hover{ color: #aaa;}
.h9 .close-this.fixed{ position: fixed; top: 30px;}
.h9 .icon-box{ text-align: center; padding: 40px 0; text-transform: uppercase; max-width: 600px;}
.h9 .icon-box img{ width: 100px;}
.h9 .icon-box p{ padding-top: 10px; font-size: 18px;}
.h9 .box-2 .text-box,.h9 .box-5 .text-box,.h9 .box-13 .text-box{ text-align: center; top: 140px;}
.h9 .box-3 .text-box,.h9 .box-8 .text-box,.h9 .box-12 .text-box{ max-width: 800px; right: 100px;}
.h9 .box-3 .text-box{ bottom: 200px;}
.h9 .box-4 .container{ text-align: center; padding: 80px 0;}
.h9 .box-4 .container,.h9 .box-5 .text-box,.h9 .box-8 .text-box,.h9 .box-13 .text-box,.h9 .box-14{ color: #000;}
.h9 .box-6 .text-box,.h9 .box-11 .text-box{ top: 200px; max-width: 680px;}
.h9 .box-7 .text-box{ top: 400px; max-width: 680px;}
.h9 .box-8 .text-box{ top: 300px;}
.h9 .box-9 .text-box{ top: 300px; right: 200px; max-width: 680px;}
.h9 .box-10 .text-box{ text-align: center; color: #fff; bottom: 120px;}
.h9 .box-11 .text-box{ top: 300px;}
.h9 .box-12 .text-box{ top: 400px;}
.h9 .box-13 .text-box{ top: 600px;}
.h9 .box-14{ padding: 80px 0 60px; font-size: 18px;}
.h9 .box-14 li{ padding-bottom: 20px;}
.h9 .box-14 span{ padding-right: 10px;}
.h9 .slideBox{ height: 0; overflow: hidden;}
.h9 .slide-down-box{ position: absolute; width: 100%; z-index: 1; top: 0;}
.h9 .box-0 .col-sm-6{ padding: 0;}
.h9 .box-0 i{ position: absolute; font-size: 48px; width: 100%; text-align: center; top: 43%; font-size: 72px;}
.h9 .box-0 a{ color: #0099ff;}
.h9 .box-0 a:hover{ color: #0082d9;}
.h9 .box-0 .play-icon{ position: absolute;}
.h9 .slide-img-box .show-box{ max-width: 800px;}
.h9 .slide-img-box .show-box{ width: 100%; margin: 120px auto 0;}
.h9 .slide-img-box ul{ width: 999999px; right: 60px;}
.h9 .slide-img-box li{ float: left; padding: 0 60px;}
.h9 .slide-img-box .play-box,.h9 .slide-img-box-2 .play-box{ text-align: center; padding-top: 30px;}
.h9 .slide-img-box-2 .play-box{ padding-bottom: 40px;}
.h9 .slide-img-box .play-box span,.h9 .slide-img-box-2 .play-box span,.h9 .kv-box .play-box span{ background: #fff; border: 1px solid #3eb3e8; display: inline-block; width: 14px; height: 14px; border-radius: 100%; margin-right: 10px; cursor: pointer; }
.h9 .slide-img-box .play-box span.on,.h9 .slide-img-box-2 .play-box span.on,.h9 .kv-box .play-box span.on{ background: #3eb3e8;}
.h9 .slide-img-box-2 ul{ width: 999999px;}
.h9 .slide-img-box-2 li{ float: left;}
/*global 媒体评价*/
.h9 .box-19{ background-color: #04091c; text-align: center; padding: 5% 0;}
.h9 .box-19 p{ font-size: 18px; padding: 40px 20px 0;}
/*意大利KV轮播*/
/*.h9 .kv-box ul{ width: 999999px;}*/
.h9 .kv-box li{ float: left;}
.h9 .kv-box .play-box{ text-align: center; position: absolute; bottom: 20px; width: 100%;}
/*西欧6国Honor 9 样式补充调整*/
.h9.europe h2{ font: 700 64px "Century Gothic", Arial, CenturyGothic, AppleGothic, sans-serif; text-transform: capitalize; padding-bottom: 30px;}
.h9.europe h2.bigger{ font: 400 96px "bignoodletitlingregular"; padding: 0;}
.h9.europe p{ padding-top: 10px; font-size: 18px;}
.h9.europe .we-box-0 .we-honor5x{ position: absolute; bottom: 350px; left: 5%;}
.h9.europe .we-honor5x .banner-btnstyle{ color: #fff; border-color: #fff;}
.h9.europe .we-box-0{ color: #000; font-size: 24px;}
.h9.europe .we-box-0 .we-icon-box{ padding: 40px 0;}
.h9.europe .we-box-0 .we-icon-box>div{ display: table;}
.h9.europe .we-box-0 .we-icon-box span{ height: 60px; display: table-cell; vertical-align: middle; padding-left: 20px;}
.h9.europe .box-1 .text-box{ top: 140px;}
.h9.europe .box-4 .text-box,.h9.europe .we-box-7 .text-box,.h9.europe .box-9 .text-box{ left: 200px; position: absolute;}
.h9.europe .box-4 .text-box,.h9.europe .we-box-7 .text-box,.h9.europe .box-9 .text-box{ max-width: 800px;}
.h9.europe .box-4 .text-box{ color: #000; bottom: 80px;}
.h9.europe .learn-more{ bottom: 20px !important;}
.h9.europe .box-6 .text-box,.h9.europe .box-15 .text-box{ max-width: 900px;}
.h9.europe .box-6 .icon-box{ padding-top: 40px; padding-bottom: 0;}
.h9.europe .box-6 .text-box{ top: 80px;}
.h9.europe .we-box-7 .text-box{ bottom: 160px;}
.h9.europe .color000{ color: #000;}
.h9.europe .we-box-7.color000 .text-box{ bottom: inherit; top: 300px;}
.h9.europe .box-9 .text-box{ right: inherit; top: 160px;}
.h9.europe .we-box-2 .text-box{ top: 280px;}
.h9.europe .box-12 .text-box{ top: 200px;}
.h9.europe .box-15 .text-box{ top: 80px;}
.h9.europe .we-box-3{ background: #3e72ff; text-align: center; padding: 80px 0 40px;}
.h9.europe .we-box-4{ background: #f2f2f2; padding: 80px 0;}
.h9.europe .we-box-4 h2{ color: #000; text-align: center;}
.h9.europe .table{ background: #193fa4;}
.h9.europe .table p{ font-size: 18px;}
.h9.europe .table-striped>tbody>tr:nth-of-type(odd){ background: #3e72ff;}
.h9.europe .table>thead>tr>th,.h9.europe .table>tbody>tr>th, .h9.europe .table>tfoot>tr>th, .h9.europe .table>thead>tr>td, .h9.europe .table>tbody>tr>td, .h9.europe .table>tfoot>tr>td{ border: 0 none;}
.h9.europe td{ padding: 40px; width: 50%;}
.h9.europe .table-striped td:nth-of-type(odd){ border-right: 2px solid #f2f2f2;}
.h9.europe .we-box-5 h2{ text-align: center; color: #00b2e6;}
.h9.europe .we-box-5{ padding: 120px 0; color: #000; text-align: center;}
.h9.europe .we-box-5 .honor-sign-up{ text-align: left; padding: 40px 0;}
.h9.europe .we-box-5 input[type="text"], .h9.europe .wrapper-dropdown-3{ height: 60px; line-height: 60px; width: 100%; padding: 0 20px; border: 2px solid #00b2e6; background-color: #fff;}
.h9.europe .honor-sign-up .wrapper-dropdown-3 .dropdown li a{ line-height: 40px;}
.h9.europe .checkBox label{ padding-left: 30px; width: 100%;}
.h9.europe .checkBox input{ position: absolute; top: 0; left: 0;}
.h9.europe .we-box-5 .we-honor5x{ padding: 40px 0;}
.h9.europe .we-box-5 .we-honor5x .banner-btnstyle{ color: #00b2e6; border-color: #00b2e6;}
.h9.europe .show-text{ text-align: left;}
.h9.europe .close-this.fixed{ top: 100px;}
@media (max-width: 1680px){
.h9 h2{ font-size: 72px;}
.h9 h3{ font-size: 24px; padding-bottom: 20px;}
.h9 p{ font-size: 18px;}
.h9 .icon-box{ padding: 20px 0;}
.h9 .icon-box img{ width: 90px;}
.h9 .icon-box p{ font-size: 16px;}
.h9 .learn-more{ bottom: 20px;}
.h9 .box-1 .learn-more{ bottom: 200px;}
.h9 .box-3 .text-box, .h9 .box-8 .text-box, .h9 .box-12 .text-box{ max-width: 720px;}
.h9 .box-7 .text-box{ max-width: 580px;}
.h9.europe h2{ font-size: 48px; padding-bottom: 10px;}
.h9.europe h2.bigger{ font-size: 72px;}
.h9.europe .box-4 .text-box, .h9.europe .we-box-7 .text-box, .h9.europe .box-9 .text-box{ max-width: 680px;}
.h9.europe .box-6 .text-box, .h9.europe .box-15 .text-box{ max-width: 780px;}
.h9.europe td{ padding: 20px;}
.h9.europe .we-box-0{ font-size: 20px;}
.h9.europe .we-box-0 .we-honor5x{ bottom: 300px;}
.h9 .box-19 p{ font-size: 16px;}
}
@media (max-width: 1600px){
.h9.europe .box-4 .text-box, .h9.europe .we-box-7 .text-box, .h9.europe .box-9 .text-box{ max-width: 640px;}
.h9 .box-3 .text-box, .h9 .box-8 .text-box, .h9 .box-12 .text-box{ max-width: 660px;}
}
@media (max-width: 1536px){
.h9 .box-13 .text-box{ top: 500px;}
.h9 .box-6 .text-box{ top: 100px;}
.h9 .box-6 .text-box, .h9 .box-11 .text-box,.h9 .box-7 .text-box{ max-width: 540px;}
.h9 .box-3 .text-box, .h9 .box-8 .text-box, .h9 .box-12 .text-box{ max-width: 640px;}
.h9.europe .box-1 .text-box, .h9.europe .box-6 .text-box, .h9.europe .box-7 .text-box, .h9.europe .box-11 .text-box,.h9.europe .box-4 .text-box, .h9.europe .we-box-7 .text-box, .h9.europe .box-9 .text-box{ left: 100px;}
.h9.europe .we-box-0 .we-honor5x{ bottom: 250px;}
}
@media (max-width: 1440px){
.h9 h2{ font-size: 64px;}
.h9 h3{ font-size: 18px;}
.h9 .icon-box img{ width: 60px;}
.h9 .icon-box p,.h9 .learn-more span{ font-size: 14px;}
.h9 .box-3 .text-box{ bottom: 120px;}
.h9 .box-6 .text-box, .h9 .box-11 .text-box,.h9 .box-7 .text-box{ max-width: 480px;}
.h9 .box-7 .text-box{ top: 300px;}
.h9 .box-1 .learn-more{ bottom: 170px;}
.h9 .box-3 .text-box, .h9 .box-8 .text-box, .h9 .box-12 .text-box{ max-width: 580px;}
.h9 .box-13 .text-box{ top: 450px;}
.h9 .box-9 .text-box{ max-width: 580px; top: 200px;}
.h9 .box-9 .text-box{ right: 100px;}
.h9 .box-11 .text-box{ top: 200px;}
.h9 .box-0 i{ top: 41%;}
.h9.europe .icon-box{ max-width: 560px;}
.h9.europe .box-3 .text-box, .h9.europe .box-8 .text-box, .h9.europe .box-12 .text-box{ right: 60px;}
.h9.europe .we-box-7.color000 .text-box{ top: 200px;}
.h9.europe .box-12 .text-box{ top: 120px;}
}
@media (max-width: 1366px){
.h9.europe .box-4 .text-box, .h9.europe .we-box-7 .text-box, .h9.europe .box-9 .text-box{ max-width: 520px;}
.h9.europe .we-box-7 .text-box{ bottom: 100px;}
.h9.europe .we-box-2 .text-box{ top: 220px;}
.h9.europe .box-9 .text-box{ top: 100px;}
.h9.europe h2{ font-size: 36px;}
.h9.europe h2.bigger{ font-size: 64px;}
.h9.europe .we-box-0 .we-honor5x{ bottom: 220px;}
}
@media (max-width: 1280px){
.h9 h2{ font-size: 56px;}
.h9 .box-1 .learn-more{ bottom: 160px;}
.h9 .icon-box img{ width: 50px;}
.h9 .box-1 .text-box{ max-width: 480px;}
.h9 .box-3 .text-box{ bottom: 80px;}
.h9 .box-6 .text-box, .h9 .box-11 .text-box, .h9 .box-7 .text-box{ max-width: 420px;}
.h9 .learn-more i{ font-size: 32px;}
.h9 .box-3 .text-box, .h9 .box-8 .text-box, .h9 .box-12 .text-box{ max-width: 520px;}
.h9 .box-8 .text-box{ top: 200px;}
.h9 .box-13 .text-box{ top: 400px;}
.h9 .box-14{ font-size: 16px;}
.h9 .box-4 .container,.h9 .box-14{ padding: 60px 0;}
.h9 .box-0 i{ font-size: 64px;}
.h9 .box-2 .text-box, .h9 .box-5 .text-box{ top: 80px;}
.h9.europe .we-box-7.color000 .text-box{ top: 140px;}
.h9.europe .box-6 .text-box, .h9.europe .box-15 .text-box{ max-width: 680px;}
.h9.europe .box-15 .text-box{ top: 60px;}
.h9.europe .we-box-4,.h9.europe .we-box-5{ padding: 100px 0;}
}
@media ( max-width: 1024px){
.h9 .box-1 .text-box, .h9 .box-6 .text-box, .h9 .box-7 .text-box, .h9 .box-11 .text-box{ left: 100px;}
.h9 .box-1 .text-box{ top: 100px;}
.h9 .box-1 .learn-more{ bottom: 120px;}
.h9 .box-2 .text-box, .h9 .box-5 .text-box{ top: 100px;}
.h9 h2{ font-size: 48px;}
.h9 p,.h9.europe p,.h9.europe .table p{ font-size: 16px;}
.h9 .box-3 .text-box, .h9 .box-8 .text-box, .h9 .box-12 .text-box{ max-width: 440px;}
.h9 .box-3 .text-box, .h9 .box-8 .text-box, .h9 .box-12 .text-box{ right: 40px;}
.h9 .icon-box img{ width: 40px; height: 40px;}
.h9 h3{ padding-bottom: 10px;}
.h9 .icon-box .col-xs-6{ margin-bottom: 20px;}
.h9 .box-6 .text-box{ top: 60px;}
.h9 .box-7 .text-box{ top: 200px;}
.h9 .box-6 .text-box, .h9 .box-11 .text-box, .h9 .box-7 .text-box{ max-width: 380px;}
.h9 .box-8 .text-box,.h9 .box-11 .text-box{ top: 100px;}
.h9 .box-9 .text-box{ right: 40px; max-width: 480px; top: 150px;}
.h9 .box-10 .text-box{ bottom: 80px;}
.h9 .box-12 .text-box{ top: 200px;}
.h9 .box-13 .text-box{ top: 300px;}
.h9 .box-0 i{ font-size: 56px;}
.h9 .slide-img-box .show-box{ max-width: 600px;}
.h9 .slide-img-box li{ padding: 0 40px;}
.h9 .slide-img-box ul{ right: 40px;}
.h9 .slide-img-box .show-box{ margin-top: 80px;}
.h9 .slide-img-box .play-box,.h9 .slide-img-box-2 .play-box{ padding-top: 25px;}
.h9 .slide-img-box-2 .play-box{ padding-bottom: 25px;}
.h9.europe h2{ font-size: 32px; padding-bottom: 6px;}
.h9.europe h2.bigger{ font-size: 48px;}
.h9 .icon-box p{ font-size: 14px;}
.h9.europe .box-1 .text-box, .h9.europe .box-6 .text-box, .h9.europe .box-7 .text-box, .h9.europe .box-11 .text-box, .h9.europe .box-4 .text-box, .h9.europe .we-box-7 .text-box, .h9.europe .box-9 .text-box{ left: 50px;}
.h9.europe .icon-box{ max-width: 400px;}
.h9.europe .we-box-0{ font-size: 16px;}
.h9.europe .we-box-0 .we-icon-box{ padding: 20px;}
.h9.europe .box-4 .text-box, .h9.europe .we-box-7 .text-box, .h9.europe .box-9 .text-box{ max-width: 460px;}
.h9.europe .box-4 .text-box{ bottom: 40px;}
.h9.europe .box-6 .text-box{ top: 40px;}
.h9.europe .box-3 .text-box, .h9.europe .box-8 .text-box, .h9.europe .box-12 .text-box{ right: 40px;}
.h9.europe .we-box-2 .text-box{ top: 140px;}
.h9.europe .box-9 .text-box{ top: 60px;}
.h9.europe td{ padding: 10px 20px;}
.h9.europe .we-box-3{ padding: 40px 0 20px;}
.h9.europe .we-box-5 h2 img{ max-height: 50px; width: auto;}
.h9.europe .box-6 .text-box, .h9.europe .box-15 .text-box{ max-width: 580px;}
.h9.europe .we-box-0 .we-honor5x{ bottom: 100px; max-width: 250px;}
.h9 .box-19 img{ max-width: 220px;}
.h9 .box-19 p{ font-size: 14px; padding: 20px 10px 0;}
}
@media (max-width: 768px){
.h9 h2{ font-size: 36px;}
.h9 p{ font-size: 14px;}
.h9 .box-1 .learn-more{ bottom: 100px;}
.h9 .box-1 .text-box, .h9 .box-6 .text-box, .h9 .box-7 .text-box, .h9 .box-11 .text-box{ left: 40px;}
.h9 .box-1 .text-box{ max-width: 380px;}
.h9 .box-1 .text-box,.h9 .box-2 .text-box, .h9 .box-5 .text-box{ top: 80px;}
.h9 .box-3 .text-box{ bottom: 40px;}
.h9 .box-3 .text-box, .h9 .box-8 .text-box, .h9 .box-12 .text-box,.h9 .box-6 .text-box, .h9 .box-11 .text-box, .h9 .box-7 .text-box{ max-width: 320px;}
.h9 .icon-box p{ font-size: 12px;}
.h9 .box-1 .text-box, .h9 .box-6 .text-box, .h9 .box-7 .text-box, .h9 .box-11 .text-box{ left: 30px;}
.h9 .box-4 .container, .h9 .box-14{ padding: 40px 0;}
.h9 .box-7 .text-box{ top: 140px;}
.h9 .box-8 .text-box,.h9 .box-8 .text-box, .h9 .box-11 .text-box{ top: 60px;}
.h9 .box-9 .text-box{ max-width: 320px; top: 80px;}
.h9 .box-10 .text-box{ bottom: 50px;}
.h9 .box-13 .text-box{ top: 220px;}
.h9 .box-9 .text-box{ top: 40px;}
.h9 .box-0 i{ font-size: 48px; top: 40%;}
.h9 .slide-img-box .show-box{ max-width: 500px;}
.h9 .slide-img-box li{ padding: 0 20px;}
.h9 .slide-img-box ul{ right: 20px;}
.h9 .slide-img-box .show-box{ margin-top: 40px;}
.h9.europe .we-box-0 .we-icon-box{ padding: 20px 0;}
.h9.europe .we-box-0{ font-size: 12px;}
.h9.europe h2{ font-size: 24px;}
.h9.europe h2.bigger{ font-size: 32px;}
.h9.europe p, .h9.europe .table p{ font-size: 14px;}
.h9.europe .box-1 .text-box{ top: 80px;}
.h9.europe .box-2 .text-box, .h9.europe .box-5 .text-box{ top: 40px;}
.h9.europe .box-4 .text-box, .h9.europe .we-box-7 .text-box, .h9.europe .box-9 .text-box{ max-width: 320px;}
.h9.europe .box-6 .icon-box{ padding-top: 10px;}
.h9.europe .box-6 .text-box{ top: 20px;}
.h9.europe .we-box-7 .text-box{ bottom: 40px;}
.h9.europe .we-box-7.color000 .text-box{ top: 40px;}
.h9.europe .box-12 .text-box{ top: 60px;}
.h9.europe .box-9 .text-box{ top: 20px;}
.h9.europe .box-6 .text-box, .h9.europe .box-15 .text-box{ max-width: 420px;}
.h9.europe .box-15 .text-box{ top: 20px;}
.h9.europe p{ padding-top: 0;}
.h9.europe .we-box-4, .h9.europe .we-box-5{ padding: 80px 0;}
.h9.europe .table p{ font-size: 14px;}
.h9.europe td{ width: auto;}
.h9.europe .we-box-5 h2 img{ max-height: 40px;}
.h9.europe .close-this.fixed{ top: 80px;}
.h9.europe .we-box-0 .we-honor5x{ bottom: 50px;}
.h9 .box-19 img{ max-width: 180px;}
}
@media (max-width: 640px){
.h9{ text-align: center;}
.h9 img{ width: 100%;}
.h9 .icon-box img{ margin: 0 auto;}
.h9 .box-1 .text-box, .h9 .box-6 .text-box, .h9 .box-7 .text-box, .h9 .box-11 .text-box, .h9 .box-2 .text-box, .h9 .box-5 .text-box,.h9 .box-3 .text-box, .h9 .box-8 .text-box, .h9 .box-12 .text-box,.h9 .box-9 .text-box,.h9 .box-10 .text-box,.h9 .box-13 .text-box{ left: 5%; max-width: 90%; width: 100%;}
.h9 .box-1 .text-box, .h9 .box-2 .text-box{ top: 50px;}
.h9 .learn-more{ left: 0;}
.h9 .learn-more{ bottom: 10px;}
.h9 .box-1 .learn-more{ bottom: 90px;}
.h9 .learn-more span{ font-size: 16px;}
.h9 .box-3 .text-box{ bottom: 60px;}
.h9 .box-5 .text-box{ top: 130px;}
.h9 .box-6 .text-box{ top: 40px;}
.h9 .box-4 .container, .h9 .box-14{ padding: 40px 5%;}
.h9 .box-7 .text-box,.h9 .box-8 .text-box,.h9 .box-16 .text-box,.h9 .box-13 .text-box,.h9 .box-15 .text-box{ position: relative; color: #000; top: inherit; padding-top: 40px;}
.h9 .box-8 .text-box, .h9 .box-16 .text-box{ padding-bottom: 20px;}
.h9 .box-17{ background: #000;}
.h9 .box-17 .text-box{ position: relative; bottom: inherit; padding: 40px 0;}
.h9 .box-12 .text-box{ top: inherit; padding-top: 20%;}
.h9 .box-13{ background: #ececec;}
.h9 .box-18{ background: #060c24;}
.h9 .box-18 .text-box{ position: relative; bottom: inherit; margin-top: -160px; padding-bottom: 40px;}
.h9 .box-14{ text-align: left; font-size: 14px;}
.h9 .slide-img-box li{ padding: 0;}
.h9 .slide-img-box ul{ right: 0;}
.h9 .slide-img-box .play-box span,.h9 .slide-img-box-2 .play-box span,.h9 .kv-box .play-box span{ height: 10px; width: 10px; border-width: 1px;}
.h9.europe .we-box-0 .we-honor5x{background-color: #000; max-width: 100%;bottom: 40px;width: 90%;}
.h9.europe .we-honor5x .banner-btnstyle{ width: 100%;}
.h9.europe .box{ background-color: #000;}
.h9.europe p, .h9.europe .table p{ font-size: 16px;}
.h9.europe .icon-box img{ width: auto; height: auto;}
.h9.europe .we-box-0{ font-size: 18px; background-color: #fff;}
.h9.europe .text-box{ position: relative!important; top: inherit !important; left: inherit !important; right: inherit !important; bottom: inherit !important; margin: 0 auto; padding: 20px 0; max-width: 100%; width: 100%;}
.h9.europe .container,.h9.europe .box-4 .text-box, .h9.europe .we-box-7 .text-box, .h9.europe .box-9 .text-box,.h9.europe .box-1 .text-box,.h9.europe .box-3 .text-box,.h9.europe .box-6 .text-box,.h9.europe .box-11 .text-box,.h9.europe .box-12 .text-box{ max-width: 90%;}
.h9.europe .we-box-0 .we-icon-box img{ height: auto; width: 40px;}
.h9.europe h2{ font-size: 32px;}
.h9.europe h2.bigger{ font-size: 48px;}
.h9.europe h3{ font-size: 24px;}
.h9.europe .container.visible-xs p{ padding: 20px 0;}
.h9.europe .box-4 .text-box,.h9.europe .box-4 .container,.h9.europe .box-5 .text-box,.h9.europe #c5.color000,.h9.europe #c6.color000,.h9.europe .box-16 .text-box,.h9.europe #p2.color000,.h9.europe .box-15 .text-box{ color: #fff;}
.h9.europe #d2{ background-color: #333;}
.h9.europe #d3{ background-color: #666;}
.h9.europe #d4{ background-color: #808080;}
.h9.europe .box-4 .container{ padding: 0;}
.h9.europe #c0,.h9.europe #c1{ background-color: #4d5363;}
.h9.europe #c2{ background-color: #717581;}
.h9.europe #c3{ background-color: #828691;}
.h9.europe #c4{ background-color: #9597a4;}
.h9.europe #c5{ background-color: #a6a9b2;}
.h9.europe #c6{ background-color: #b7bac3;}
.h9.europe #a0,.h9.europe #a1{ background-color: #010a59;}
.h9.europe #a2{ background-color: #414785;}
.h9.europe #a3{ background-color: #536ebb;}
.h9.europe #p2{ background-color: #2f2f2f;}
.h9.europe #d{ background-color: #3d9fc4;}
.h9.europe #b{ background-color: #02214d;}
.h9.europe #f{ background-color: #124499;}
.h9.europe .box-14,.h9.europe .we-box-5{ background-color: #fff; padding: 40px 0;}
.h9.europe .we-box-3{ background-color: #3e72ff;}
.h9.europe .we-box-4{ background-color: #f2f2f2;}
.h9.europe .we-box-4 .container{ max-width: 100%;}
.h9.europe .we-box-5 .col-sm-6:first-child{ padding-bottom: 20px;}
.h9.europe table{ text-align: left;}
.h9.europe .close-this.fixed{ top: 30px;}
.h9.europe .slide-img-box .play-box{ padding-bottom: 25px; background-color: #fff;}
.h9 .box-19 .col-xs-12{ margin-bottom: 40px;}
.h9 .box-19 p{ padding: 10px 10px 0;}
.h9 .box-19 img{ max-width: 220px;}
}
@media (max-width: 380px){
.h9 h2{ font-size: 32px;}
.h9 p{ font-size: 12px;}
.h9 .icon-box{ padding: 10px 0;}
.h9 .box-1 .text-box, .h9 .box-2 .text-box{ top: 50px;}
.h9 .box-0 i{ top: 39%;}
.h9.europe h2{ font-size: 28px;}
.h9.europe h2.bigger{ font-size: 36px;}
.h9.europe h3{ font-size: 18px;}
.h9.europe .we-box-0 .we-honor5x{ bottom: 20px;}
}
@media (max-width: 320px){
.h9 h2{ font-size: 24px;}
.h9 h3{ font-size: 14px;}
.h9 .box-1 .text-box, .h9 .box-2 .text-box{ top: 30px;}
.h9 .box-3 .text-box{ bottom: 40px;}
.h9 .box-4 .container, .h9 .box-14{ padding-top: 20px; padding-bottom: 20px;}
.h9 .box-5 .text-box{ top: 100px;}
.h9 .box-6 .text-box{ top: 20px;}
.h9 .box-9 .text-box{ top: 20px;}
.h9 .box-16 .text-box{ top: inherit;}
.h9 .box-18 .text-box{ margin-top: -120px;}
.h9 .box-14 li{ padding-bottom: 10px;}
.h9 .box-0 i{ font-size: 36px;}
}
/*
*Honor 9 Focus On Fun (.h9_fof) 
*/
.h9_fof{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 24px; color: #000; text-align: center;}
.h9_fof h2{ font: 72px/1.2 "bignoodletitlingregular"; color: #3e72ff;}
.h9_fof h3{ font-size: 36px; font-weight: 700;}
.h9_fof .box{ padding: 5% 0;}
.h9_fof .box-1{ padding: 0; background-color: #3f72ff;}
.h9_fof .box-1 .phone-pic{ position: absolute; bottom: 0; right: 20%;}
.h9_fof .box-1 .icon-box{ font-size: 16px; color: #fff; text-align: left; max-width: 864px; padding: 10px 0;}
.h9_fof .box-1 .icon-box li{ display: block; margin-right: 3%; text-align: center; width: 22%; float: left;}
.h9_fof .box-1 .icon-box span{ display: block;}
.h9_fof .box-2{ background-color: #f2eff0;}
.h9_fof .box-2 .embed-responsive{ margin: 60px 0;}
.h9_fof .box-4{ background-color: #3e73ff; text-align: left;}
.h9_fof .box-4 .row-new>div{ float: right;}
.h9_fof .box-4,.h9_fof .box-4 h2,.h9_fof .box-4 a{ color: #fff;}
.h9_fof .box-4 a{ border-color: #fff;}
.h9_fof .box-4 .col-sm-5-new{ padding-top: 80px;}
.h9_fof .we-honor5x,.h9_fof .box-4 h2{ padding-top: 40px;}
.h9_fof .box-4 .we-honor5x .banner-btnstyle{ display: block; margin-top: 10px;}
.h9_fof .box-5{ padding: 120px 0; color: #000; text-align: center; font-size: 18px; color: #333;}
.h9_fof .box-5 .honor-sign-up{ text-align: left; padding: 40px 0;}
.h9_fof .box-5 input[type="text"], .h9_fof .wrapper-dropdown-3{ height: 60px; line-height: 60px; width: 100%; padding: 0 20px; width: 100%; border: 2px solid #3e72ff; background-color: #fff;}
.h9_fof .honor-sign-up .wrapper-dropdown-3 .dropdown li a{ line-height: 40px;}
.h9_fof .checkBox label{ padding-left: 30px; width: 100%;}
.h9_fof .checkBox input{ position: absolute; top: 0; left: 0;}
.h9_fof .box-5 .we-honor5x{ padding: 40px 0; text-align: center;}
.h9_fof .box-5 .we-honor5x .banner-btnstyle{ color: #3e72ff; border-color: #3e72ff;}
.h9_fof .show-text{ text-align: left;}
.h9_fof .box-5 h2 img{ max-width: 70px;}
.h9_fof .condition{ color: #000; text-decoration: underline; margin: 20px 0; display: block;}
@media (max-width: 1600px){
.h9_fof .box-1 .phone-pic{ right: 18%;}
.h9_fof .box-2 .embed-responsive{ margin: 40px 0;}
}
@media (max-width: 1440px){
.h9_fof .box-1 .phone-pic{ max-width: 180px;}
}
@media (max-width: 1366px){
.h9_fof h2{ font-size: 56px;}
.h9_fof{ font-size: 18px;} 
.h9_fof h3{ font-size: 24px;}
.h9_fof .box-5 h2 img{ max-height: 50px;}
.h9_fof .box-5{ font-size: 16px; padding: 100px 0;}
}
@media (max-width: 1024px){
.h9_fof h2{ font-size: 48px;}
.h9_fof .box-1 .phone-pic{ max-width: 140px; right: 14%;}
.h9_fof .box-1 .icon-box{ font-size: 14px; max-width: 740px;}
.h9_fof .box-2 .embed-responsive{ margin: 20px 0;}
}
@media (max-width: 768px){
.h9_fof .box-4 .col-sm-5-new{ padding-top: 40px;}
.h9_fof .we-honor5x, .h9_fof .box-4 h2{ padding-top: 20px;}
.h9_fof .box-1 .icon-box{ max-width: 560px; font-size: 14px;}
.h9_fof .box-1 .phone-pic{ max-width: 120px; right: 12%;}
}
@media (max-width: 640px){
.h9_fof .container{ max-width: 90%; margin: 0 auto;}
.h9_fof .box{ padding: 10% 0;}
.h9_fof .box-1{ padding: 0;}
.h9_fof .box-1 .container{ max-width: 100%;}
.h9_fof .box-1 .icon-box{ top: inherit; position: relative; background-color: #3e72ff; padding: 5%; font-size: 18px;}
.h9_fof .box-1 .icon-box li{ display: block; margin: 0 0 10px; width: auto; float: none; text-align: left;}
.h9_fof .box-1 .icon-box span{ display: inline;}
.h9_fof .box-1 .icon-box li:last-child{ margin-bottom: 0;}
.h9_fof .box-1 .icon-box img{ max-height: 100%;}
.h9_fof .box-4{ text-align: center;}
.h9_fof .box-4 .row-new>div{ float: none;}
.h9_fof .box-4 .we-honor5x .banner-btnstyle{ display: inline-block; width: 100%;}
.h9_fof .box-5 .col-sm-6:first-child{ padding-bottom: 20px;}

}
/* 
*honor6A PRO (.h6a-pro) 
*/
.h6a-pro{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 24px; color: #fff; text-align: center;}
.h6a-pro h2{ font: 90px/1.2 "bignoodletitlingregular"; color: #ffc000;}
.h6a-pro p{ padding-bottom: 10px;}
.h6a-pro .box-1 .icon-box,.h6a-pro .box-1 .icon-box-2,.h6a-pro .box-1 .we-honor5x{ max-width: 600px; position: absolute; left: 5%;}
.h6a-pro .box-1 .icon-box{ bottom: 370px;}
.h6a-pro .icon-box p{ padding: 10px 0 0; font-size: 16px;}
.h6a-pro .box-1 .icon-box-2{ bottom: 40px; color: #000; font-size: 48px;}
.h6a-pro .box-1 .icon-box-2 span{ padding-left: 10px;}
.h6a-pro .box-2,.h6a-pro .box-4 .container,.h6a-pro .box-5 .container{ padding-bottom: 4%;}
.h6a-pro .box-2{ padding-top: 4%;}
.h6a-pro .box-2 p,.h6a-pro .box-4 p,.h6a-pro .box-8 p,.h6a-pro .box-9 h2,.h6a-pro .box-10,.h6a-pro.h6a .box-9 h2{ color: #000;}
.h6a-pro .text-box{ position: absolute; top: 300px;}
.h6a-pro .box-5{ background-color: #fcc300; padding-top: 30px;}
.h6a-pro .box-5 h2,.h6a-pro.h6a .box-5 h2{ color: #fff;}
.h6a-pro .box-5 p{ text-shadow: 1px 5px 8px #ff6c00}
.h6a-pro p.tip{ padding-top: 20px; font-size: 70%;}
.h6a-pro .box-6{ background-color: #e18800;}
.h6a-pro .box-8 small{ display: block; color: #ffc000; font-size: 70%;}
.h6a-pro .box-8 .text-box{ top: inherit; text-align: left; padding-left: 30%; margin-top: 5%;}
.h6a-pro .box-9{ padding: 40px 0;}
.h6a-pro .box-9 .table{ background: #193fa4; text-align: left; margin-top: 20px;}
.h6a-pro .box-9 .table p{ font-size: 18px; padding: 0;}
.h6a-pro .box-9 .table-striped>tbody>tr:nth-of-type(odd){ background: #3e72ff;}
.h6a-pro .box-9 .table>thead>tr>th,.h6a-pro .box-9 .table>tbody>tr>th, .h6a-pro .box-9 .table>tfoot>tr>th, .h6a-pro .box-9 .table>thead>tr>td, .h6a-pro .box-9 .table>tbody>tr>td, .h6a-pro .box-9 .table>tfoot>tr>td{ border: 0 none;}
.h6a-pro .box-9 td{ padding: 40px; width: 50%;}
.h6a-pro .box-9 .table-striped td:nth-of-type(odd){ border-right: 2px solid #f2f2f2;}
.h6a-pro .box-10 h2{ text-align: center; color: #00b2e6;}
.h6a-pro .box-10{ padding: 120px 0; font-size: 18px;}
.h6a-pro .box-10 .honor-sign-up{ text-align: left; padding: 40px 0;}
.h6a-pro .box-10 input[type="text"], .h6a-pro .box-10 .wrapper-dropdown-3{ height: 60px; line-height: 60px; width: 100%; padding: 0 20px; width: 100%; border: 2px solid #00b2e6; background-color: #fff;}
.h6a-pro .box-10 .honor-sign-up .wrapper-dropdown-3 .dropdown li a{ line-height: 40px;}
.h6a-pro .box-10 .checkBox label{ padding-left: 30px; width: 100%; font-size: 16px; color: #333;}
.h6a-pro .box-10 .checkBox input{ position: absolute; top: 0; left: 0;}
.h6a-pro .box-10 .we-honor5x{ padding: 40px 0;}
.h6a-pro .box-10 .we-honor5x .banner-btnstyle{ color: #00b2e6; border-color: #00b2e6;}
.h6a-pro.h6a h2,.h6a-pro.h6a .box-8 small,.h6a-pro.h6a .box-10 .we-honor5x .banner-btnstyle{ color: #22d2e9;}
.h6a-pro.h6a .box-5{ background-color: #22d2e9;}
.h6a-pro.h6a .box-5 p{ text-shadow:none;}
.h6a-pro.h6a .box-10 input[type="text"], .h6a-pro.h6a .box-10 .wrapper-dropdown-3,.h6a-pro.h6a .box-10 .we-honor5x .banner-btnstyle{ border-color: #22d2e9;}
.h6a-pro .show-text{ text-align: left;}
.h6a-pro .box-1 .we-honor5x{ bottom: 250px; left: 8%;}
.h6a-pro .box-1 .we-honor5x .banner-btnstyle{ border-color: #ffc000; color: #ffc000;}
.h6a-pro.h6a .box-1 .we-honor5x .banner-btnstyle{ border-color: #22d2e9; color: #22d2e9;}
.h6a_gr, .h6a_gr .box-1 .banner-btnstyle{ font-family: Arial, Helvetica, sans-serif;}
.h6a_gr .box-1 .banner-btnstyle{ font-size: 75%; line-height: 45px;}
.h6a_gr h2{ font-size: 200% !important; font-family: Arial, Helvetica, sans-serif; font-weight: 700;}
.h6a_gr .box-8 small{ font-weight: 700;}
@media (max-width: 1680px){
.h6a-pro .box-1 .icon-box{ bottom: 310px;}
.h6a-pro .box-1 .icon-box-2 img{ max-width: 120px;}
.h6a-pro .box-1 .icon-box-2{ font-size: 36px;}
.h6a-pro .text-box{ top: 200px;}
.h6a-pro .box-1 .we-honor5x{ bottom: 210px;}
}
@media (max-width: 1536px){
.h6a-pro .box-1 .icon-box{ bottom: 280px;}
.h6a-pro .box-1 .we-honor5x{ bottom: 190px; left: 5%;}
}
@media (max-width: 1440px){
.h6a-pro{ font-size: 20px;}
.h6a-pro h2{ font-size: 80px;}
.h6a-pro .box-1 .icon-box{ bottom: 260px;}
.h6a-pro .box-1 .icon-box-2 img{ max-width: 80px;}
.h6a-pro .icon-box img{ max-width: 80px;}
.h6a-pro .box-9 td{ padding: 20px;}
.h6a-pro .box-9 .table p{ font-size: 16px;}
.h6a-pro .box-1 .we-honor5x{ bottom: 180px;}
.h6a-pro .box-8 .text-box{ padding-left: 35%;}
}
@media (max-width: 1366px){
.h6a-pro .box-1 .icon-box{ bottom: 250px;}
.h6a-pro .box-1 .we-honor5x{ bottom: 170px;}
}
@media (max-width: 1280px){
.h6a-pro .box-1 .icon-box{ bottom: 230px;}
.h6a-pro .text-box{ top: 150px;}
.h6a-pro .box-10{ padding: 100px 0;}
.h6a-pro .box-1 .we-honor5x{ bottom: 160px;}
}
@media (max-width: 1024px){
.h6a-pro{ font-size: 18px;}
.h6a-pro h2{ font-size: 64px;}
.h6a-pro .icon-box img{ max-width: 50px;}
.h6a-pro .icon-box p{ font-size: 14px;}
.h6a-pro .box-1 .icon-box, .h6a-pro .box-1 .icon-box-2{ max-width: 480px;}
.h6a-pro .box-1 .icon-box{ bottom: 190px;}
.h6a-pro .box-1 .icon-box-2 img{ max-width: 60px;}
.h6a-pro .box-1 .icon-box-2{ font-size: 28px;}
.h6a-pro .text-box{ top: 100px;}
.h6a-pro .box-10 h2 img{ max-height: 50px; width: auto;}
.h6a-pro .box-1 .we-honor5x{ bottom: 120px;}
}
@media (max-width: 768px){
.h6a-pro{ font-size: 16px;}
.h6a-pro h2{ font-size: 56px;}
.h6a-pro .icon-box p{ font-size: 12px;}
.h6a-pro .box-1 .icon-box{ bottom: 170px;}
.h6a-pro .icon-box img{ max-width: 44px;}
.h6a-pro .box-1 .icon-box, .h6a-pro .box-1 .icon-box-2{ max-width: 360px;}
.h6a-pro .box-1 .icon-box-2 img{ max-width: 50px;}
.h6a-pro .box-1 .icon-box-2{ font-size: 24px;}
.h6a-pro .box-1 .icon-box-2{ bottom: 30px;}
.h6a-pro .text-box{ top: 60px;}
.h6a-pro .box-10 h2 img{ max-height: 40px;}
.h6a-pro .box-1 .we-honor5x{ position: relative; bottom: inherit; left: inherit; max-width: 100%; margin-bottom: 20px;}
}
@media (max-width: 640px){
.h6a-pro h2{ font-size: 48px;}
.h6a-pro .box-1 .icon-box, .h6a-pro .box-1 .icon-box-2{ position: relative; bottom: inherit; max-width: 100%; left: inherit;}
.h6a-pro .box-1 .icon-box{ background-color: #1e252b; top: -50px; padding-bottom: 40px;}
.h6a-pro .icon-box p{ font-size: 16px;}
.h6a-pro .icon-box img,.h6a-pro .box-1 .icon-box-2 img{ max-width: 60px;}
.h6a-pro .box-1 .icon-box>div{ min-height: 140px;}
.h6a-pro .box-1 .icon-box-2{ padding-bottom: 20px;}
.h6a-pro .container{ max-width: 92%; margin: 0 auto;}
.h6a-pro .text-box{ position: relative; top: inherit;}
.h6a-pro .box-3,.h6a-pro .box-7{ background-color: #000; padding-top: 60px;}
.h6a-pro .box-9 .table p{ font-size: 14px;}
.h6a-pro .box-9 td{ width: auto;}
.h6a-pro .box-10{ padding: 40px 0;}
.h6a-pro .box-10 .col-sm-6:first-child{ padding-bottom: 20px;}
.h6a-pro.h6a .box-1 .icon-box{ padding: 30px 0; background-color: #23d1e9;}
.h6a-pro.h6a .box-1 .icon-box>div{ min-height: auto;}
.h6a-pro .box-8 .text-box{ padding-left: 0; text-align: center;}
.h6a_gr .box-1 .banner-btnstyle{ font-size: 100%;}
}
@media (max-width: 380px){
.h6a-pro .icon-box p{ font-size: 14px;}
.h6a-pro h2{ font-size: 36px;}
.h6a-pro .box-3, .h6a-pro .box-7{ padding-top: 40px;}
.h6a-pro .box-5{ padding-top: 16px;}
.h6a-pro p.tip{ padding-top: 10px;}
.h6a-pro .box-1 .icon-box>div{ min-height: 120px;}
}
@media (max-width: 320px){
.h6a-pro .icon-box img,.h6a-pro .box-1 .icon-box-2 img{ max-width: 50px;}
.h6a-pro .box-1 .icon-box>div{ min-height: 110px;}
.h6a-pro .box-1 .icon-box-2{ font-size: 20px;}
.h6a-pro{ font-size: 14px;}
.h6a-pro .box-9 .table p{ font-size: 12px;}
}

/* 
*honor 9 I Love sharing (.h9_ils) 
*/
.h9_ils{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 28px; text-align: center;}
.h9_ils h2{ font: 90px/1.2 "bignoodletitlingregular";}
.h9_ils,.h9_ils a{ color: #fff;}
.h9_ils .text-box{ position: absolute; width: 100%;}
.h9_ils .box-2{ background-color: #031738;}
.h9_ils .box-2 .text-box{ margin-top: 15%; z-index: 2;}
.h9_ils .box-2 h2,.h9_ils .box-2 .icon-box{ padding-top: 100px;}
.h9_ils .box-2 .icon-box img{ max-width: 250px;}
.h9_ils .box-2 .icon-box span{ padding-right: 10px; font-weight: 700;}
.h9_ils .box-2 .icon-box p{ padding: 40px 10px;}
.h9_ils .box-4 .text-box{ margin-top: -30%;}
.h9_ils .box-4 h3{ padding-bottom: 30px; font-weight: 700; font-size: 32px;}
.h9_ils .box-4 .embed-responsive{ background-color: #000;}
.h9_ils .box-5 .text-box .row-new{ background-color: #fff; padding: 10px 0; margin-bottom: 10px;}
.h9_ils .box-5 .text-box a{ border-right: 1px solid #999; padding: 0 5px;}
.h9_ils .box-5 .text-box a.no-bor{ border-width: 0;}
.h9_ils .box-6{ background-color: #1d3362; font: 120px/0 "bignoodletitlingregular"; padding: 40px 0;}
.h9_ils .box-7{ background-color: #fafafa; padding: 60px 0; color: #000; }
.h9_ils .box-7 a{ color: #000;}
@media (max-width: 1440px){
.h9_ils{ font-size: 24px;}
.h9_ils h2{ font-size: 64px;}
.h9_ils .box-2 .text-box{ margin-top: 10%;}
.h9_ils .box-2 h2, .h9_ils .box-2 .icon-box{ padding-top: 60px;}
.h9_ils .box-2 .icon-box img{ max-width: 200px;}
.h9_ils .box-4 h3{ font-size: 28px;}
.h9_ils .box-6{ font-size: 90px;}
.h9_ils .box-6 img{ max-height: 60px;}
}
@media (max-width: 1024px){
.h9_ils{ font-size: 18px;}
.h9_ils .box-2 h2, .h9_ils .box-2 .icon-box{ padding-top: 40px;}
.h9_ils .box-2 .icon-box img{ max-width: 180px;}
.h9_ils .box-4 h3{ font-size: 24px; padding-bottom: 20px;}
.h9_ils .box-5 .text-box{ margin-top: -180px;}
.h9_ils .box-6{ font-size: 72px; padding: 30px 0;}
.h9_ils .box-6 img{ max-height: 40px;}
}
@media (max-width: 768px){
.h9_ils .box-2 .icon-box img{ max-width: 120px;}
.h9_ils .box-2 h2, .h9_ils .box-2 .icon-box{ padding-top: 30px;}
.h9_ils h2{ font-size: 56px;}
.h9_ils{ font-size: 16px;}
.h9_ils .box-4 h3{ font-size: 20px;}
.h9_ils .box-2 .icon-box p{ padding: 20px 10px;}
.h9_ils .box-5 .text-box{ margin-top: -250px;}
}
@media( max-width: 640px){
.h9_ils .container{ padding: 0 5%;}
.h9_ils .box-2 .text-box,.h9_ils .box-5 .text-box{ position: relative;}
.h9_ils h2{ font-size: 48px;}
.h9_ils .box-2>img{ margin-top: -200px;}
.h9_ils .box-4 .text-box{ width: 90%;}
.h9_ils .box-5{ background-color: #3d549a; padding-bottom: 20px;}
.h9_ils .box-5 .text-box{ margin-top: -160px;}
.h9_ils .box-6{ font-size: 56px; padding: 20px 0;}
.h9_ils .box-7{ padding: 40px 0;}
}
@media (max-width: 320px){
.h9_ils{ font-size: 14px;}
.h9_ils h2{ font-size: 36px;}
.h9_ils .box-2 h2, .h9_ils .box-2 .icon-box{ padding-top: 20px;}
.h9_ils .box-2 .icon-box img{ max-width: 100px;}
.h9_ils .box-2>img{ margin-top: -160px;}
.h9_ils .box-4 h3{ font-size: 16px; padding-bottom: 10px;}
.h9_ils .box-6{ font-size: 42px;}
.h9_ils .box-6 img{ max-height: 30px;}
}
/* 
*honor Brand 3 (.hb3) 
*/
.hb3{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 32px; text-align: left; color: #fff;}
.hb3 h2{ font: 300%/1.2 "bignoodletitlingregular";}
.hb3 h1{ font: 500%/1.2 "bignoodletitlingregular";}
.hb3 .we-honor5x .banner-btnstyle{ color: #fff; border-color: #fff;}
.hb3 .color-black{ color: #000;}
.hb3 .text-box,.hb3 .icon-box{ position: absolute; top: 100px;}
.hb3 .text-box p{ margin-bottom: 20px;}
.hb3 .container .text-box{ width: 100%;}
.hb3 .box-1 .text-box{ top: inherit; text-align: center; margin-bottom: 20%; margin-top: -52%;}
.hb3 .pull-left{ left: 6%;}
.hb3 .icon-box span{ text-transform: uppercase; padding-left: 10px;}
.hb3 .box-2 .icon-box{ color: #000; text-align: left; max-width: 50%;}
.hb3 .box-2 .icon-box li{ margin-bottom: 20px;}
.hb3 .note{ position: absolute; bottom: 2%; text-align: left; padding: 0 5%; font-size: 80%;}
.hb3 .box-4 .text-box,.hb3 .box-6 .text-box{ max-width: 52.6%;}
.hb3 .box-4 .text-1, .hb3 .box-4 .text-2{ position: absolute; left: 10%;  max-width: 47.3%; text-align: left; margin-top: 115%;}
.hb3 .box-4 .text-2{ margin-top: 155%;}
.hb3 .box-3 .text-box{ max-width: 57.9%;}
.hb3 .box-5 .text-box{ max-width: 50%;}
.hb3 .box-5 .col-sm-6{ padding: 0;}
.hb3 .box-5 .col-sm-6 p{ position: absolute; padding: 0 5%; margin-top: 100%;}
.hb3 .box-5 .col-sm-6 p.note,.hb3 .box-7 p.note{ margin-top: 0;}
.hb3 .box-5 .icon-box{ max-width: 32%; margin-top: 40%;}
.hb3 .box-5 .icon-box li{ display: table; vertical-align: bottom; padding-bottom: 60px;}
.hb3 .box-5 .icon-box img,.hb3 .box-5 .icon-box span{ display: table-cell;}
.hb3 .box-5 .icon-box span{ padding-left: 20px; vertical-align: bottom;}
.hb3 .box-6 .text-box-2{ margin-top: 60px; text-align: center; max-width: 50%;}
.hb3 .box-6 .text-box-2 h4{ font-size: 300%;}
.hb3 .box-6 .text-box-2 small{ color: #000; font-size: 50%;}
.hb3 .box-6 .text-box-2 .col-xs-6{ border-right: 1px solid #aaa;}
.hb3 .no-bor{ border-width: 0 !important;}
.hb3 .box-6 .text-box-2 p,.hb3 .box-8 .text-box-2{ font-size: 56.25%;}
.hb3 .box-7 p{ margin-top: 65%; position: absolute; padding: 0 5%;}
.hb3 .box-8{ margin-top: -1px;}
.hb3 .box-8 .text-box-2{ position: absolute; bottom: 2%; padding: 0 5%;}
.hb3 .box-8 p.note{ bottom: 9%;}
.hb3 .box-8 .text-box-2 hr{ border-top: 2px solid #000;}
.hb3 .box-8 .text-box-2 img{ max-height: 24px;}
.hb3 .box-8 .text-box-2 span{ padding: 0 5px;}
@media (max-width: 1680px){
.hb3{ font-size: 28px;}
.hb3 .box-1 .text-box img{ max-width: 800px;}
.hb3 .box-2 .icon-box img{ max-width: 90px;}
.hb3 .box-5 .icon-box img{ max-height: 54px;}
.hb3 .box-3 .text-box img{ max-width: 640px;}
.hb3 .box-8 .text-box-2 hr{ border-top-width: 1px;}
}
@media (max-width: 1440px){
.hb3{ font-size: 24px;}
.hb3 .box-1 .text-box{ margin-top: -48%;}
.hb3 .box-1 .text-box img{ max-width: 680px;}
.hb3 .box-2 .icon-box img{ max-width: 80px;}
.hb3 .box-5 .icon-box img{ max-height: 50px;}
.hb3 .box-3 .text-box img{ max-width: 550px;}
}
@media (max-width: 1024px){
.hb3{ font-size: 18px;}
.hb3 .box-1 .text-box img{ max-width: 480px;}
.hb3 .box-2 .icon-box img{ max-width: 50px;}
.hb3 .text-box p{ margin-bottom: 10px;}
.hb3 .box-5 .icon-box img{ max-height: 30px;}
.hb3 .box-5 .icon-box li{ padding-bottom: 40px;}
.hb3 .box-3 .text-box img{ max-width: 360px;}
.hb3 .box-8 .text-box-2 img{ max-height: 14px;}
}
@media (max-width: 768px){
.hb3{ font-size: 14px;}
.hb3 .box-2 .icon-box img{ max-width: 44px;}
.hb3 .box-2 .icon-box{ top: 40px;}
.hb3 .box-1 .text-box img{ max-width: 390px;}
.hb3 .box-2 .icon-box li{ margin-bottom: 14px;}
.hb3 .box-5 .icon-box span{ padding-left: 10px;}
.hb3 .box-8 p.note{ bottom: 14%; max-width: 46%;}
.hb3 .box-8 .text-box-2{ bottom: 0;}
}
@media (max-width: 640px){
.hb3 .pull-left{ left: 5%;}
.hb3 .box-1 .text-box img{ max-width: 240px;}
.hb3 h1{ font-size: 48px;}
.hb3 .we-honor5x .banner-btnstyle{ width: 200px;}
.hb3 .box-2{ padding-bottom: 140px;}
.hb3 .box-2 .icon-box li{ display: table;}
.hb3 .box-2 .icon-box img,.hb3 .box-2 .icon-box span{ display: table-cell; vertical-align: middle;}
.hb3 .text-box, .hb3 .icon-box{ top: 30px;}
.hb3 .box-3 .text-box{ max-width: 80%;}
.hb3 .box-3 .text-box img{ max-width: 220px;}
.hb3 .box-4 .text-1{ margin-top: 106%;}
.hb3 .box-4 .text-2{ max-width: 80%; margin-top: 150%;}
.hb3 .box-9{ background-color: #071a29; text-align: center;}
.hb3 .box-9 > img{ margin-top: -20%;}
.hb3 .box-5{ background-color: #0b151f;}
.hb3 .box-5 .icon-box li{ padding-bottom: 20px;}
.hb3 .box-9 .text-box,.hb3 .box-5 .text-box,.hb3 .box-5 .icon-box,.hb3 .box-6 .text-box{ position: relative; left: 10%; max-width: 100%; width: 80%;}
.hb3 .box-5 .icon-box{ margin-top: 5%;}
.hb3 .box-5 > img{ margin-top: -40%;}
.hb3 .box-5 .row-new{ text-align: center;}
.hb3 .box-5 .col-sm-6 > img{ margin-top: -1px;}
.hb3 .box-6{ background-color: #c3e6f9;}
.hb3 .box-6 .text-box-2{ max-width: 70%; margin-top: 40px;}
.hb3 .box-6 > img{ margin-top: -40%;}
.hb3 .box-7{ padding-bottom: 60px; background-color: #f2f2f2;}
.hb3 .box-10{ padding-top: 100px; background-color: #dce9f1;}
.hb3 .box-8{ padding: 150px 0 240px; background-color: #d4f0fc;}
.hb3 .box-8 p.note{ max-width: 100%; bottom: 24%;}
.hb3 .box-8 .text-box{ max-width: 90%;}
.hb3 .box-8 .text-box-2{ bottom: 2%;}
}
@media (max-width: 380px){
.hb3{ font-size: 12px;}
.hb3 .box-2{ padding-bottom: 180px;}
.hb3 .box-7 > img{ margin-top: -1px;}
}
@media (max-width: 360px){
.hb3 h1{ font-size: 36px;}
.hb3 .box-1 .text-box img{ max-width: 180px;}
}
@media (max-width: 320px){
.hb3 .box-2{ padding-bottom: 200px;}
.hb3 .note{ bottom: 1%;}
.hb3 .box-7 p{ margin-top: 60%;}
.hb3 .box-8{ padding-bottom: 280px;}
.hb3 .box-8 p.note{ bottom: 28%;}
}
/* 
*Transformers (.transformers) 
*/
.transformers{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 18px; text-align: center; color: #fff;}
.transformers .text-box{ position: absolute; width: 100%; margin-top: 2%;}
.transformers .box-1{ position: relative;}
.transformers .box-1 .top-link{border:2px solid #fff;border-radius: 10px; display:inline-block; position: absolute; top:60%; left:4%; padding:10px 40px 5px 40px;color: #fff;font-family:"bignoodletitlingregular";}
.transformers h3,.transformers h4{ font-size: 150%;}
.transformers h4{ font-weight: 700; padding-bottom: 10px;}
.transformers h2{ font-size: 250%; font-weight: 700; padding-bottom: 40px;}
.transformers h2, .transformers h3, .transformers .box-3, .transformers .box-4 h4{ color: #ffc730;}
.transformers .box-3 .form-box,.transformers .turntable-box .note-box{ padding: 40px; background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/Transformers-04.png') 0 0  repeat; max-width: 100%; text-align: center; display: inline-block; border-radius: 10px; position: absolute;  min-width: 800px; left: 15%; display: none; z-index: 9999; margin-top: 28%;}
.transformers .box-3 .form-box > .row-new{ margin-bottom: 20px; }
.transformers .box-3 p,.transformers .box-3 span{ font-size: 14px;}
.transformers .video-wrap{ position: absolute; width: 100%; text-align: center;}
.transformers .video-box{ max-width: 47%; margin: 17.3% auto 0; background-color: #434343;}
.transformers .box-3 input{  background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/Transformers-06.png') 0 0  repeat; border: 0 none; color: #000; height: 40px; line-height: 40px; font-size: 18px; padding: 0 20px;}
.transformers .box-3 input, .transformers .box-4 a, .transformers .receive-gg-code{ border-radius: 5px;}
.transformers .box-3 span{ text-align: left; line-height: 40px;}
.transformers .box-3 .gg-code-box span{ line-height: 20px;}
.transformers .box-3 #gg-play{ cursor: default;}
.transformers .box-3 .form-box h3, .transformers .box-4 h4{ padding-bottom: 20px;}
.transformers .receive-gg-code, .transformers .box-4 a{ display: inline-block; padding: 0 40px; height: 50px; line-height: 50px; background-color: #e5b32d; color: #000; font-weight: 700; font-size: 125%; margin: 20px 0; text-decoration: none;}
.transformers .social-box{ position: absolute; right: 5%; top: 5%;}
.transformers .social-box a{ color: #fff; display: inline-block; width: 60px; height: 60px; line-height: 60px; border-radius: 10px; font-size: 40px;}
.transformers .social-box a.tw-btn{ background-color: #038be6; margin-right: 20px;}
.transformers .social-box a.fb-btn{ background-color: #035db8;}
.transformers .box-4{ padding: 80px 0; color: #000;}
.transformers .box-4 p{ padding-bottom: 60px;}
.transformers .box-4 ol{ text-align: left; max-width: 80%; margin: 0 auto;}
.transformers .box-4 li{ list-style-type: decimal;}
.transformers .redeem img{ position: absolute; left: 44.95%; top: 40.46%; z-index: 2;}
.transformers .fa-close{ position: absolute; right: 0; top: 0; font-size: 150%; cursor: pointer; width: 40px; height: 40px; line-height: 40px;}
.transformers .box-3 .note{ position: absolute; max-width: 600px; bottom: 20px; right: 20px; text-align: left; color: #fff;}
.transformers .turntable-box li{ position: absolute; cursor: pointer;}
.transformers .turntable-box li.t-1{ left: 40%; margin-top: 16%;}
.transformers .turntable-box li.t-2{ left: 52.98%; margin-top: 15%;}
.transformers .turntable-box li.t-3{ left: 57.03%; margin-top: 27%;}
.transformers .turntable-box li.t-4{ left: 46%; margin-top: 35%;}
.transformers .turntable-box li.t-5{ left: 34%; margin-top: 28.5%;}
.transformers .turntable-box .note-box{ display: none; position: absolute; min-width: 400px; z-index: 1000;}
.transformers .turntable-box .on .note-box{ display: block;}
.transformers .turntable-box .fa-close{ display: none;}
.transformers .turntable-box li.t-1 .note-box{ left: -320%; top: -110%;}
.transformers .turntable-box li.t-2 .note-box{ left: 70%; top: -90%;}
.transformers .turntable-box li.t-3 .note-box{ left: 56%; top: 50%;}
.transformers .turntable-box li.t-4 .note-box{ left: 54%; top: 50%;}
.transformers .turntable-box li.t-5 .note-box{ left: -186%; top: 10%;}
@media (max-width: 1680px){
.transformers .box-3 .form-box{ margin-top: 20%;}
.transformers .turntable-box li.t-1 .note-box{ left: -370%;}
.transformers .turntable-box li.t-5 .note-box{ left: -220%;}
.transformers .redeem img{ max-width: 152px;}
.transformers .turntable-box li.t-1 img,.transformers .turntable-box li.t-3 img{ max-width: 101px;}
.transformers .turntable-box li.t-2 img{ max-width: 130px;}
.transformers .turntable-box li.t-4 img{ max-width: 110px;}
.transformers .turntable-box li.t-5 img{ max-width: 165px;}
}
@media (max-width: 1600px){
.transformers .redeem img{ max-width: 145px;}
.transformers .turntable-box li.t-1 img,.transformers .turntable-box li.t-3 img{ max-width: 96px;}
.transformers .turntable-box li.t-2 img{ max-width: 124px;}
.transformers .turntable-box li.t-4 img{ max-width: 105px;}
.transformers .turntable-box li.t-5 img{ max-width: 158px;}
}
@media (max-width: 1440px){
.transformers{ font-size: 16px;}
.transformers .social-box a{ width: 40px; height: 40px; line-height: 40px; font-size: 24px;}
.transformers .box-4{ padding: 60px 0;}
.transformers h2{ padding-bottom: 20px;}
.transformers .box-4 p{ padding-bottom: 20px;}
.transformers .turntable-box li.t-1 .note-box{ left: -430%;}
.transformers .turntable-box li.t-5 .note-box{ left: -250%;}
.transformers .redeem img{ max-width: 130px;}
.transformers .turntable-box li.t-1 img,.transformers .turntable-box li.t-3 img{ max-width: 86px;}
.transformers .turntable-box li.t-2 img{ max-width: 112px;}
.transformers .turntable-box li.t-4 img{ max-width: 95px;}
.transformers .turntable-box li.t-5 img{ max-width: 142px;}
}
@media(max-width: 1366px){
.transformers .box-3 .form-box{ margin-top: 14%;}
.transformers .redeem img{ max-width: 124px;}
.transformers .turntable-box li.t-1 img,.transformers .turntable-box li.t-3 img{ max-width: 82px;}
.transformers .turntable-box li.t-2 img{ max-width: 106px;}
.transformers .turntable-box li.t-4 img{ max-width: 90px;}
.transformers .turntable-box li.t-5 img{ max-width: 135px;}
}
@media(max-width: 1280px){
.transformers .turntable-box li.t-1 .note-box{ left: -480%; top: -150%;}
.transformers .turntable-box li.t-2 .note-box{ top: -130%;}
.transformers .turntable-box li.t-5 .note-box{ left: -280%;}
.transformers .redeem img{ max-width: 116px;}
.transformers .turntable-box li.t-1 img,.transformers .turntable-box li.t-3 img{ max-width: 77px;}
.transformers .turntable-box li.t-2 img{ max-width: 99px;}
.transformers .turntable-box li.t-4 img{ max-width: 84px;}
.transformers .turntable-box li.t-5 img{ max-width: 126px;}
}
@media (max-width: 1024px){
.transformers, .transformers .box-3 p,.transformers .box-3 span{ font-size: 12px;}
.transformers h4{ padding-bottom: 0;}
.transformers .social-box{ top: 1%; right: 1%;}
.transformers .social-box a.tw-btn{ margin-right: 10px;}
.transformers .box-3 .form-box{ padding: 30px;}
.transformers .box-3 .form-box{ min-width: 600px;}
.transformers .box-4{ padding: 40px 0;}
.transformers .box-3 .form-box h3, .transformers .box-4 h4{ padding-bottom: 10px;}
.transformers .box-3 .form-box > .row-new{ margin-bottom: 12px;}
.transformers .box-3 .form-box{ left: 18%; margin-top: 10%;}
.transformers .box-3 .note{ max-width: 480px;}
.transformers .turntable-box li.t-1 .note-box{ left: -620%; top: -170%;}
.transformers .turntable-box li.t-2 .note-box{ top: -140%;}
.transformers .turntable-box li.t-5 .note-box{ left: -360%; top: 5%;}
.transformers .turntable-box .fa-close{ display: block;}
.transformers .redeem img{ max-width: 93px;}
.transformers .turntable-box li.t-1 img,.transformers .turntable-box li.t-3 img{ max-width: 61px;}
.transformers .turntable-box li.t-2 img{ max-width: 80px;}
.transformers .turntable-box li.t-4 img{ max-width: 67px;}
.transformers .turntable-box li.t-5 img{ max-width: 101px;}
}
@media (max-width: 768px){
.transformers .text-box{ margin-top: 1%;}
.transformers .box-3 .form-box{ padding: 30px; left: 10%; margin-top: 8%;}
.transformers .turntable-box .note-box{ min-width: 300px; padding: 30px;}
.transformers .turntable-box li.t-2 .note-box{ top: -160%;}
.transformers .redeem img{ max-width: 70px;}
.transformers .turntable-box li.t-1 img,.transformers .turntable-box li.t-3 img{ max-width: 46px;}
.transformers .turntable-box li.t-2 img{ max-width: 60px;}
.transformers .turntable-box li.t-4 img{ max-width: 50px;}
.transformers .turntable-box li.t-5 img{ max-width: 76px;}
.transformers .box-1 .top-link{top:88%;left:35%;}
}
@media(max-width: 640px){
.transformers .video-box{ max-width: 74.6875%; margin-top: 30.6%;}
.transformers .text-box{ max-width: 90%; left: 5%;}
.transformers .box-2{ padding-bottom: 20%; background-color: #000;}
.transformers .box-2 .text-box{ margin-top: 80%;}
.transformers .social-box{ top: inherit; right: inherit; bottom: 18%; width: 100%;}
.transformers .social-box a.tw-btn{ margin-right: 20px;}
.transformers .box-3 .form-box{ padding: 30px; left: 5%; min-width: inherit; max-width: 90%;}
.transformers .box-3{ background-color: #000;}
.transformers .box-3 input{ height: 50px; line-height: 50px;}
.transformers .box-3 .gg-code-box span{ line-height: 40px;}
.transformers .box-3 .form-box p{ text-align: left;}
.transformers .box-3 .gg-code-box a{ margin-top: 20px;}
.transformers .box-4 .container{ max-width: 90%;}
.transformers .box-3 .note{ right: inherit; left: 5%; max-width: 90%;}
.transformers .redeem img{ max-width: 60px; left: 42.95%; top: 40.46%;}
.transformers .turntable-box li.t-1 img,.transformers .turntable-box li.t-3 img{ max-width: 52px;}
.transformers .turntable-box li.t-2 img{ max-width: 64px;}
.transformers .turntable-box li.t-4 img{ max-width: 56px;}
.transformers .turntable-box li.t-5 img{ max-width: 84px;}
.transformers .turntable-box li.t-1{ left: 32%; margin-top: 52%;}
.transformers .turntable-box li.t-2{ left: 56%; margin-top: 48%;}
.transformers .turntable-box li.t-3{ left: 64%; margin-top: 72%;}
.transformers .turntable-box li.t-4{ left: 44%; margin-top: 88%;}
.transformers .turntable-box li.t-5{ left: 20%; margin-top: 77%;}
.transformers .turntable-box .note-box{ min-width: 180px;}
.transformers .turntable-box li.t-1 .note-box{ left: -200%;}
.transformers .turntable-box li.t-2 .note-box{ left: -20%;}
.transformers .turntable-box li.t-3 .note-box{ top: 20%; left: -50%;}
.transformers .turntable-box li.t-5 .note-box{ left: -80%; top: -320%;}
}
@media (max-width: 380px){
.transformers .redeem img{ left: 41.8%;}
.transformers .turntable-box li.t-1 img,.transformers .turntable-box li.t-3 img{ max-width: 44px;}
.transformers .turntable-box li.t-2 img{ max-width: 56px;}
.transformers .turntable-box li.t-4 img{ max-width: 48px;}
.transformers .turntable-box li.t-5 img{ max-width: 70px;}
.transformers .turntable-box li.t-3 .note-box{ top: -300%; left: -100%;}
.transformers .turntable-box li.t-5 .note-box{ left: -120%;}
.transformers .box-1 .top-link{left:30%;}
}
@media (max-width: 360px){
.transformers .box-3 .form-box{ margin-top: 2%;}
.transformers .redeem img{ max-width: 50px; left: 42.8%;}
.transformers .turntable-box li.t-1 img,.transformers .turntable-box li.t-3 img{ max-width: 40px;}
.transformers .turntable-box li.t-2 img{ max-width: 52px;}
.transformers .turntable-box li.t-4 img{ max-width: 42px;}
.transformers .turntable-box li.t-5 img{ max-width: 64px;}
.transformers .turntable-box li.t-1 .note-box{ left: -260%; top: -220%;}
.transformers .turntable-box li.t-2 .note-box{ left: -50%;}
}
@media (max-width: 320px){
.transformers .box-3{ padding-bottom: 60px;}
.transformers .box-3 .form-box{ padding: 20px;}
.transformers .redeem img{ top: 35.9%;}
.transformers .turntable-box li.t-2 .note-box{ top: -200%;}
.transformers .turntable-box li.t-3 .note-box{ top: 50%; left: -160%;}
.transformers .turntable-box li.t-4 .note-box{ left: -50%;}
.transformers .turntable-box li.t-5 .note-box{ left: -80%;}
}
/* 
*Honor 6A I like sharing (.h6a_ils) 
*/
.h6a_ils{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 42px; line-height: 1.25; text-align: center; color: #fff;}
.h6a_ils-body{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/H6AILS-02.jpg') repeat-y 0 0; background-size: cover; padding-top: 10%;}
.h6a_ils-body .box{ padding: 4% 0;}
.h6a_ils, .h6a_ils h2, .h6a_ils h3, .h6a_ils h4{ font-family: "bignoodletitlingregular";}
.h6a_ils .text-box{ position: absolute; width: 100%;}
.h6a_ils h2{ font-size: 220%;}
.h6a_ils h3{ font-size: 140%; padding-bottom: 2%;}
.h6a_ils h4{ font-size: 120%;}
.h6a_ils .box-1 .text-box{ margin-top: -10%;}
.h6a_ils .box-1 h2{ padding-top: 4%;}
.h6a_ils .box-2{ padding: 0 5%;}
.h6a_ils .box-2 .col-sm-1{ margin: 4% 2%;}
.h6a_ils .box-2 p{ padding-top: 10%;}
.h6a_ils .video-box{ background: #1a1a1a; margin: 0 18.6% 0 19.6%;}
.h6a_ils .video-box-bg { margin-top: -53.6%;}
.h6a_ils .box-3{ padding: 10% 0;}
.h6a_ils .box-3 h2{ margin-bottom: 2%;}
.h6a_ils .box-4 h2{ max-width: 60%; margin: 0 auto;}
.h6a_ils .box-4 > img{ margin-top: -5%;}
.h6a_ils .icon-wall{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/H6AILS-10.png') no-repeat 0 0; background-size: contain; padding: 3% 20% 0;}
.h6a_ils .icon-wall li{ display: inline-block; margin: 0 10px 8% 0;}
.h6a_ils .icon-wall li img{ border: 2px solid #fff; background-color: #fff;}
.h6a_ils .icon-wall img{ height: 60px;}
.h6a_ils .box-5 a{ color: #000; margin-right: 6%; line-height: 175%;}
.h6a_ils .box-5 a,.h6a_ils .box-6 h2{ font-size: 300%;}
.h6a_ils .box-6 h2{ padding-bottom: 4%;}
.h6a_ils .box-6 a{ color: #fff;}
.h6a_ils .box-6 a img{ margin-left: 10px;}
@media (max-width: 1680px){
.h6a_ils{ font-size: 32px;}
.h6a_ils .box-2 .col-sm-3 img{ height: 190px;}
.h6a_ils .box-2 .col-sm-1 img{ height: 102px;}
.h6a_ils .icon-wall img{ height: 50px;}
.h6a_ils .box-5 a{ margin-right: 2%; line-height: 188%;}
.h6a_ils .box-6 h2{ padding-bottom: 2%;}
.h6a_ils .box-6 a img{ height: 50px;}
}
@media (max-width: 1536px){
.h6a_ils .icon-wall img{ height: 40px;}
}
@media (max-width: 1440px){
.h6a_ils .container{ width: 950px;}
.h6a_ils .box-5 a{ line-height: 170%; margin-right: 6%;}
}
@media (max-width: 1280px){
.h6a_ils{ font-size: 28px;}
.h6a_ils .container{ width: 730px;}
.h6a_ils .box-2 .col-sm-3 img{ height: 172px;}
.h6a_ils .box-2 .col-sm-1 img{ height: 90px;}
.h6a_ils .icon-wall img,.h6a_ils .box-6 a img{ height: 36px;}
}
@media (max-width: 1024px){
.h6a_ils{ font-size: 24px;}
.h6a_ils .box-2 .col-sm-3 img{ height: 138px;}
.h6a_ils .box-2 .col-sm-1 img{ height: 60px;}
.h6a_ils-body .box-1{ padding: 6% 0;}
.h6a_ils .icon-wall img, .h6a_ils .box-6 a img{ height: 30px;}
}
@media (max-width: 768px){
.h6a_ils{ font-size: 22px;}
.h6a_ils .container{ width: 480px;}
.h6a_ils .box-1 .text-box{ margin-top: -26%;}
.h6a_ils-body .box-1{ padding: 10% 0;}
.h6a_ils .box-2 .col-sm-3 img{ height: 100px;}
.h6a_ils .box-2 .col-sm-1 img{ height: 50px;}
.h6a_ils .box-4 > img{ margin-top: -10%;}
.h6a_ils .icon-wall{ background-repeat: repeat-y;}
.h6a_ils .icon-wall ul{ margin-top: -1%;}
.h6a_ils .icon-wall li{ margin-bottom: 6%;}
.h6a_ils .box-5 a{ line-height: 156%; margin-right: 14%;}
.h6a_ils .box-5 a, .h6a_ils .box-6 h2{ font-size: 275%;}
}
@media ( max-width: 640px){
.h6a_ils .container{ width: 90%;}
.h6a_ils .box-1 .text-box{ margin-top: 0;}
.h6a_ils .text-box{ position: relative;}
.h6a_ils img.visible-xs{ display: inline-block !important;}
.h6a_ils-body{ background-image: url('/content/dam/honor/se/products/smartphone/honor8pro/img/H6AILS-02-MB.jpg'); padding-top: 0;}
.h6a_ils .box-1 h3{ padding-top: 8%;}
.h6a_ils .box-1 h4{ padding-bottom: 8%;}
.h6a_ils .box-2 p{ font-size: 150%;}
.h6a_ils .box-1 img{ height: 180px;}
.h6a_ils .box-2 .col-sm-3 img{ height: 200px;}
.h6a_ils .box-2 .col-sm-1 img{ height: 100px;}
.h6a_ils .box-2 .col-sm-1{ margin: 10% 0;}
.h6a_ils .box-3 h2{ padding: 0 20%; font-size: 150%; margin: -22% 0 14%;}
.h6a_ils .video-box{ margin: 0 8.8%;}
.h6a_ils .video-box-bg{ margin-top: -47.6%;}
.h6a_ils .box-4 > img{ margin-top: 0;}
.h6a_ils .box-4 h2{ max-width: 80%;}
.h6a_ils .icon-wall{ background: none; padding: 0 10%; margin-top: -255%;}
.h6a_ils .icon-wall ul{ margin-top: 0;}
.h6a_ils .icon-wall li img{ height: 60px;}
.h6a_ils-body .box-5{ margin-top: 68%;}
.h6a_ils-body .box-5 .text-box{ position: absolute;}
.h6a_ils .box-5 a{ line-height: 180%;}
.h6a_ils .box-6{ padding: 10% 5%;}
.h6a_ils .box-6 h2{ font-size: 200%;}
}
@media (max-width: 380px){
.h6a_ils .icon-wall li img{ height: 50px;}
.h6a_ils .box-5 a{ line-height: 162%; margin-right: 20%;}
}
@media (max-width: 320px){
.h6a_ils h3{ font-size: 120%;}
.h6a_ils .box-1 img{ height: 140px;}
.h6a_ils .box-2 .col-sm-3 img{ height: 160px;}
.h6a_ils .box-3 h2{ font-size: 125%;}
.h6a_ils .icon-wall li img{ height: 46px;}
.h6a_ils .box-5 a{ font-size: 250%;}
.h6a_ils .box-6 h2{ font-size: 180%;}
}
/* 
*Honor 6A Testers (.h6a_t) 
*/
.h6a_t{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 36px; line-height: 1.25; text-align: center; color: #fff;}
.h6a_t h2,.h6a_t .box-4,.h6a_t.h6a_t_v2 .box-4 h3,.h6a_t.h6a_t_v2 .box-5 h3{ font-family: "bignoodletitlingregular";}
.h6a_t a{ color: #fff;}
.h6a_t .box-2{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/6a_testers-02.jpg') repeat-y 0 0; background-size: cover; padding: 4% 0;}
.h6a_t .box-2 p{ padding-top: 40px;}
.h6a_t .box-3{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/6a_testers-04.jpg') repeat-y 0 0; background-size: cover; padding: 4% 0 0;}
.h6a_t .box-4{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/6a_testers-05.jpg') repeat-y 0 0; background-size: cover; padding: 2% 5%;}
.h6a_t .box-4 span{ padding-left: 10px;}
.h6a_t .form-box{ background-color: #efefef; color: #000; padding: 5%; text-align: left; border-radius: 10px; font-size: 16px; max-width: 768px;}
.h6a_t .i-form{ height: 860px;}
.h6a_t .form-box li{ padding-bottom: 16px;}
.h6a_t .form-box input{ height: 40px; line-height: 40px; padding: 0 10px; width: 100%;}
.h6a_t .form-box .tip-text{ font-size: 14px; color: #999;}
.h6a_t .form-box .btn-box{ text-align: center; margin-top: 5%;}
.h6a_t .form-box .f-t{ font-size: 18px; height: 40px; display: table-cell; vertical-align: middle;}
.h6a_t .form-box span{ margin-right: 20px; height: 40px; line-height: 40px; display: inline-block; cursor: pointer;}
.h6a_t .form-box span i{ margin-right: 5px;}
.h6a_t .form-box .fa-circle-o{ color: #999;}
.h6a_t .form-box .fa-check-circle{ color: #666;}
.h6a_t .form-box #submit-t{ background-color: #00b2e6; color: #fff; padding: 0 20px; min-width:200px; display: inline-block; height: 45px; border-radius: 10px; font: 24px/52px "bignoodletitlingregular";}
.h6a_t .tc-link{ font-size: 18px; color: #333; height: 40px; line-height: 40px; margin-top: 30px; display: inline-block; text-decoration: underline;}
.h6a_t.h6a_t_v2 h2{ font-size: 280%; line-height: 1.25; display: inline-block; border-bottom: 6px solid #000; padding-bottom: 1%; margin-bottom: 5%;}
.h6a_t.h6a_t_v2 .box-2{ padding: 0; background: #06070b;}
.h6a_t.h6a_t_v2 .box-2 h2{ background-color: #026397; padding: 3% 0 1%; display: block; border-bottom: 0; margin-bottom: 0;}
.h6a_t.h6a_t_v2 .box-2 .row-new{ padding: 2% 0;}
.h6a_t.h6a_t_v2 .box-2 h4{ font-size: 80%; padding-top: 5%;}
.h6a_t.h6a_t_v2 .box-3{ color: #000;}
.h6a_t.h6a_t_v2 .bj{ font-weight: 700; font-size: 125%; padding-top: 4%;}
.h6a_t.h6a_t_v2 .box-4{ font-family: "Century Gothic", Arial, CenturyGothic, AppleGothic, sans-serif; background: #143842 url('/content/dam/honor/se/products/smartphone/honor8pro/img/6a_testers_v2-10.jpg') 0 0 no-repeat; padding: 4% 0;}
.h6a_t.h6a_t_v2 .box-4 h2{ border-color: #fff;}
.h6a_t.h6a_t_v2 .box-4 .row-new{ text-align: left;}
.h6a_t.h6a_t_v2 .box-4 h3{ font-size: 175%;}
.h6a_t.h6a_t_v2 .box-4 p{ height: 240px; margin-top: 60px; font-size: 75%;}
.h6a_t.h6a_t_v2 .box-4 .row-new .row-new>div{ padding: 2% 2% 5%;}
.h6a_t.h6a_t_v2 .ksp-btn-box{ height: 50px; overflow: hidden;}
.h6a_t.h6a_t_v2 .ksp-btn-box a{ display: block; width: 200px; height: 45px; border-radius: 10px; border: 2px #fff solid; font: 24px/49px "bignoodletitlingregular"; text-align: center; color: #fff;
overflow: hidden; text-overflow: ellipsis; margin: 2px 5px; cursor: pointer; text-decoration:none;}
.h6a_t.h6a_t_v2 .box-4 div.on .ksp-btn-box a{ display: block;}
.h6a_t.h6a_t_v2 .box-5 .text-box{ position: absolute; text-align: left; left: -20%; margin-top: 4%;}
.h6a_t.h6a_t_v2 .box-5 h2{ display: block; border-width: 0; margin-top: 15%; line-height: 1;}
.h6a_t.h6a_t_v2 .box-5 a{ color: #fff; border-color: #fff;}
.h6a_t.h6a_t_v2 .box-5 h3{ font-size: 175%; margin-top: 8%;}
@media (max-width: 1680px){
.h6a_t.h6a_t_v2{ font-size: 32px;}
.h6a_t.h6a_t_v2 .box-2 .row-new img{ max-width: 90px;}
.h6a_t.h6a_t_v2 .box-4 p{ height: 200px;}
.h6a_t.h6a_t_v2 .box-5 .text-box img{ max-width: 380px;}
.h6a_t.h6a_t_v2 .box-5 .text-box{ left: -10%;}
}
@media (max-width: 1440px){
.h6a_t,.h6a_t.h6a_t_v2,.h6a_t.h6a_t_v2 .box-4{ font-size: 26px;}
.h6a_t .box-2 .container>img{ max-width: 360px;}
.h6a_t .box-4{ font-size: 32px;}
.h6a_t .form-box{ padding-top: 0; } /*.h6a_t .i-form 专属*/
.h6a_t.h6a_t_v2 .box-5 .text-box img{ max-width: 300px;}
.h6a_t.h6a_t_v2 .box-5 .text-box{ left: -2%; margin-top: 8%;}
.h6a_t.h6a_t_v2 .box-5 h2{ margin-top: 8%;}
.h6a_t.h6a_t_v2 .box-5 h3{ margin-top: 6%;}
.h6a_t.h6a_t_v2 .box-4 p{ height: 160px; line-height: 1.68; margin-top: 40px;}
.h6a_t.h6a_t_v2 .box-4 h3{ font-size: 200%;}
}
@media (max-width: 1280px){
.h6a_t.h6a_t_v2,.h6a_t.h6a_t_v2 .box-4{ font-size: 22px;}
.h6a_t.h6a_t_v2 .box-2 .row-new img{ max-width: 60px;}
.h6a_t.h6a_t_v2 h2{ margin-bottom: 4%;}
.h6a_t.h6a_t_v2 .box-4 p{ font-size: 100%; height: 200px;}
.h6a_t.h6a_t_v2 h2{ border-width: 4px;}
}
@media (max-width: 1024px){
.h6a_t,.h6a_t.h6a_t_v2,.h6a_t.h6a_t_v2 .box-4{ font-size: 18px; line-height: 1.5;}
.h6a_t .box-2 .container>img{ max-width: 260px;}
.h6a_t .box-2 p{ padding-top: 20px;}
.h6a_t .box-4{ font-size: 24px;}
.h6a_t .box-4 a img{ max-width: 40px;}
.h6a_t.h6a_t_v2 .box-4 a img{ max-width: 100%;}
.h6a_t.h6a_t_v2 .box-4 p{ height: 180px;}
.h6a_t.h6a_t_v2 .box-5 .text-box img{ max-width: 200px;}
.h6a_t.h6a_t_v2 .box-5 .text-box{ margin-top: 4%; left: 0;}
}
@media (max-width: 768px){
.h6a_t,.h6a_t.h6a_t_v2,.h6a_t.h6a_t_v2 .box-4{ font-size: 16px;}
.h6a_t .box-2 .container>img{ max-width: 190px;}
.h6a_t .box-4{ font-size: 20px;}
.h6a_t .box-4 a img{ max-width: 30px;}
.h6a_t.h6a_t_v2 .box-2 h4{ font-size: 100%;}
.h6a_t.h6a_t_v2 .box-4 p{ height: 160px;}
.h6a_t.h6a_t_v2 .box-5 .text-box{ margin-top: 3%;}
.h6a_t.h6a_t_v2 .box-5 h3{ margin-top: 2%;}
}
@media (max-width: 640px){
.h6a_t .container,.h6a_t .box-4{ padding: 6% 5%;}
.h6a_t .box-4{ text-align: left;}
.h6a_t .box-4 a img{ max-width: 34px;}
.h6a_t .box-4 .col-xs-6{ padding-bottom: 10px;}
.h6a_t .box-4 span{ padding-left: 5px;}
.h6a_t .form-box{ margin: 5%;}
.h6a_t .form-box .f-t{ font-size: 16px;}
.h6a_t .form-box #submit-t{ width: 100%;}
.h6a_t .tc-link{ margin: 10px 0; font-size: 16px;}
.h6a_t .i-form{ height: 900px;}
.h6a_t.h6a_t_v2 .box-4 p{ height: auto; padding-bottom: 5%;}
.h6a_t.h6a_t_v2 .box-2 h2{ padding-top: 5%;}
.h6a_t.h6a_t_v2 .box-2 .col-xs-6{ padding-bottom: 5%;}
.h6a_t.h6a_t_v2 .box-2 .container{ padding-bottom: 2%;}
.h6a_t.h6a_t_v2 h2{ font-size: 250%; border-width: 2px;}
.h6a_t.h6a_t_v2 .bj{ font-size: 150%;}
.h6a_t.h6a_t_v2 .box-4,.h6a_t.h6a_t_v2 .box-4 .row-new{ text-align: center;}
.h6a_t.h6a_t_v2 .ksp-btn-box a{ margin: 0 auto;}
.h6a_t.h6a_t_v2 .box-4 .row-new .row-new>div{ margin-bottom: 10%;}
.h6a_t.h6a_t_v2 .box-4 h3{ padding-bottom: 4%; font-size: 220%;}
.h6a_t.h6a_t_v2 .box-5 .container{ padding: 0;}
.h6a_t.h6a_t_v2 .box-5 .text-box{ left: 5%;width: 90%; text-align: center; margin-top: 130%;}
.h6a_t.h6a_t_v2 .box-5 h2{ margin-top: 10%;}
.h6a_t.h6a_t_v2 .box-5 h3{ margin-top: 6%;}
}
@media (max-width: 380px){
.h6a_t .box-4{ font-size: 18px;}
}
@media (max-width: 320px){
.h6a_t .box-4{ font-size: 16px;}
.h6a_t .box-4 a img{ max-width: 30px;}
}
/* 
*Honor Holly 4 (.hh4) 
*/
.hh4{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 24px; line-height: 1.68; text-align: center; color: #fff; background-color: #38393d;}
.hh4 h2,.hh4 h3{ font-family: "bignoodletitlingregular";}
.hh4 h4{ font-size: 100%;}
.hh4 a{ color: #fff;}
.hh4 .text-box{ position: absolute; width: 100%;}
.hh4 p{ margin-top: 1%;}
.hh4 .box-2 .text-box{ margin-top: 150%;}
.hh4 .icon-box,.hh4 .icon-box h3{ margin-top: 6%;}
.hh4 h2{ color: #3587d0; font-size: 500%;}
.hh4 h2 small{ color: #3587d0; display: block;}
.hh4 h2.yellow,.hh4 h2.yellow small{ color: #ddff67;}
.hh4 .box-3{ text-align: left;}
.hh4 .box-3 .text-box{ max-width: 62%; margin-top: 26%;}
.hh4 .box-4 .text-box{ margin-top: 5%;}
.hh4 .box-5 .text-box,.hh4 .box-6 .text-box,.hh4 .box-8 .text-box,.hh4 .box-9 .text-box{ margin-top: 20%;}
.hh4 .box-7 .text-box{ text-align: left; color: #000; margin: 10% 0 0 35%; width: 65%;}
.hh4 .bz{ margin-top: 5%;}
.hh4 .box-10 .text-box{ margin-top: 40%;}
.hh4 .box-10 .text-box .pplist{ margin-top: 5%;}
.hh4 .box-10 .text-box .pplist .row-new{ margin-bottom: 2%; text-align: left;}
.hh4 .box-10 .bottom-link{ margin-top: 30%;}
.hh4 .box-10 .bottom-link span{ margin-right: 2%;}
.hh4 .box-10 .bottom-link img{ width: 40px;}
.hh4 .box-10 .bottom-link p{ font-size: 65%;}
@media (max-width: 1680px){
.hh4 .box-2 .text-box{ margin-top: 138%;}
.hh4 .box-3 .text-box{ margin-top: 18%;}
.hh4 .box-7 .text-box{ margin-top: 6%;}
.hh4 .box-10 .text-box{ margin-top: 30%;}
}
@media (max-width: 1600px){
.hh4{ font-size: 20px;}
.hh4 .box-2 .text-box{ margin-top: 130%;}
.hh4 .box-4 .text-box{ margin-top: 15%;}
}
@media (max-width: 1440px){
.hh4{ font-size: 18px;}
.hh4 .box-2 h3{ font-size: 20px;}
.hh4 .box-2 .text-box{ margin-top: 110%;}
.hh4 .box-2 .text-box>img{ max-width: 460px;}
.hh4 .box-2 .icon-box img{ max-width: 90px;}
.hh4 .box-10 .text-box{ margin-top: 20%;}
}
@media (max-width: 1280px){
.hh4{ font-size: 16px;}
.hh4 .box-2 .text-box{ margin-top: 100%;}
.hh4 .box-5 .text-box,.hh4 .box-6 .text-box,.hh4 .box-8 .text-box,.hh4 .box-9 .text-box{ margin-top: 16%;}
.hh4 .box-10 .bottom-link{ margin-top: 20%;}
}
@media (max-width: 1024px){
.hh4 .box-2 .text-box>img{ max-width: 320px;}
.hh4 .box-2 .icon-box img{ max-width: 60px;}
.hh4 h2{ line-height: 1;}
.hh4 .box-3 .text-box,.hh4 .box-10 .text-box,.hh4 .box-5 .text-box,.hh4 .box-6 .text-box,.hh4 .box-8 .text-box,.hh4 .box-9 .text-box{ margin-top: 12%;}
.hh4 .box-4 .text-box{ margin-top: 10%;}
.hh4 .box-7 .text-box{ margin-left: 40%; width: 60%;}
}
@media (max-width: 768px){
.hh4{ font-size: 14px;}
.hh4 .box-2 h3{ font-size: 18px;}
.hh4 .box-2 .text-box>img{ max-width: 250px;}
.hh4 .box-2 .icon-box img{ max-width: 48px;}
.hh4 .box-2 .text-box{ margin-top: 92%;}
.hh4 h2{ font-size: 380%;}
.hh4 .box-10 .text-box .pplist .row-new{ margin-bottom: 1%;}
.hh4 .box-10 .text-box{ margin-top: 8%;}
.hh4 .box-10 .bottom-link{ margin-top: 6%;}
.hh4 .box-10 .bottom-link img{ width: 32px;}
}
@media (max-width: 640px){
.hh4{ font-size: 12px; line-height: 1.5;}
.hh4 h2{ font-size: 280%;}
.hh4 .container{ padding: 0;}
.hh4 .text-box{ padding: 0 5%;}
.hh4 .box-2 .text-box>img{ max-width: 200px;}
.hh4 .box-2 .icon-box img{ max-width: 40px;}
.hh4 .box-2 .col-xs-6{ height: 90px;}
.hh4 .box-2 .text-box{ margin-top: 84%;}
.hh4 .box-3 .text-box,.hh4 .box-5 .text-box,.hh4 .box-6 .text-box,.hh4 .box-8 .text-box,.hh4 .box-9 .text-box{ margin-top: 8%;}
.hh4 .box-3 .text-box{ max-width: 86%;}
.hh4 .box-4 .text-box{ margin-top: 4%;}
.hh4 p,.hh4 .box-10 .text-box,.hh4 .box-10 .text-box .pplist{ margin-top: 0;}
.hh4 .icon-box{ margin-top: 10px;}
.hh4 .icon-box h3{ margin-top: 5px; font:12px "Century Gothic", Arial, CenturyGothic, AppleGothic, sans-serif;}
.hh4 .box-3 p{ max-width: 90%;}
.hh4 .bz{ margin-top: 2%;}
.hh4 .box-10 .bottom-link span{ display: inline-block;}
.hh4 .box-10 .bottom-link img{ width: 16px;}
.hh4 .box-10{ padding-bottom: 100px;}
}
@media (max-width: 380px){
.hh4 .box-2 .text-box{ margin-top: 68%;}
.hh4 .box-4 .text-box{ margin-top: -2%;}
.hh4 .box-9 .text-box{ margin-top: 0;}
.hh4 .box-10{ padding-bottom: 200px;}
}
@media (max-width: 320px){
.hh4 h2{ font-size: 200%;}
.hh4 .box-2 .text-box{ margin-top: 50%;}
.hh4 .box-8 .text-box{ margin-top: 2%;}
.hh4 .box-9 .text-box{ margin-top: -4%;}
.hh4 .box-10{ padding-bottom: 280px;}
}
/* 
*Honor 德国3周年 (.b2c_3y) 
*/
.b2c_3y{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 24px; line-height: 1.5; text-align: center; color: #000; background-color: #fff;}
.b2c_3y h2,.b2c_3y .box-3  h3,.b2c_3y .box-8 a{ font-family: "bignoodletitlingregular"; font-size: 300%;}
.b2c_3y .box-1{ z-index: 2;}
.b2c_3y .box-2{ margin-top: -7.4%;}
.b2c_3y .embed-responsive-16by9{ background-color: #eee;}
.b2c_3y .box-3{ background-color: #0b70b4; padding: 4% 5%; color: #fff;}
.b2c_3y .box-3 h3{ font-size: 300%; font-style: italic; font-weight: 700; margin-bottom: 0;}
.b2c_3y .box-3 h4{ text-transform: uppercase; font-size: 100%;}
.b2c_3y .box-3 h3,.b2c_3y .box-3 .icon-box{ padding-top: 4%; margin-top: 0;}
.b2c_3y .box-3 .icon-box img{ max-width: 180px;}
.b2c_3y .box-3 .icon-box p{ padding: 4% 5% 0; font-size: 100%;}
.b2c_3y .box-3 .bz{ position: absolute; bottom: 2%; left: 2%; font-size: 16px;}
.b2c_3y .box-4 .we-honor5x{ width: 100%; position: absolute; bottom: 2%;}
.b2c_3y .box-4 .we-honor5x a,.b2c_3y .box-10 a{ color: #fff; border-color: #fff;}
.b2c_3y .box-4 .we-honor5x a{ width: auto; height: auto; padding: 18px 20px 8px; line-height: 20px;}
.b2c_3y .box-padding{ padding-top: 4%;}
.b2c_3y .box-6 .row-new{ padding-top: 3%;}
.b2c_3y .box-6 .row-new a{ margin-right: 10px;}
.b2c_3y .box-7,.b2c_3y .box-9{ padding-bottom: 4%;}
.b2c_3y .box-8{ background-color: #243b64; padding-top: 1%;}
.b2c_3y .box-8 a{ color: #fff;}
.b2c_3y .box-8 img{ max-width: 80px;}
.b2c_3y .box-9{ background-color: #f2f2f2;}
.b2c_3y .box-9 a{ color: #000;}
.b2c_3y .box-10 .we-honor5x{ position: absolute; left: 5%; top: 60%;}
.b2c_3y .box-11 .we-icon-box{ padding: 3% 0; font-size: 18px;}
.b2c_3y .box-11 .we-icon-box>div{ display: table;}
.b2c_3y .box-11 .we-icon-box span{ height: 60px; display: table-cell; vertical-align: middle; padding-left: 20px; text-align: left;}
.b2c_3y .text-box{ position: absolute; text-align: left; color: #fff; max-width: 48%; left: 5%; top:10%;}
.b2c_3y .icon-box p{ font-size: 80%; margin-top: 10px;}
.b2c_3y .icon-box{ text-align: center; margin-top: 12%;}
.b2c_3y .box-13{ margin-top: -1px;}
.b2c_3y h3{ text-transform: uppercase; margin-bottom: 1%; font-size: 100%;}
@media (max-width: 1536px){
.b2c_3y{ font-size: 18px;}
.b2c_3y .box-3 h3, .b2c_3y .box-3 .icon-box{ padding-top: 2%;}
.b2c_3y .box-3 .bz{ font-size: 14px;}
.b2c_3y .box-3 .icon-box img{ max-width: 130px;}
.b2c_3y .icon-box img{ max-width: 80px;}
.b2c_3y .box-8 img{ max-width: 60px;}
.b2c_3y .box-11 .we-icon-box{ font-size: 16px;}
}
@media (max-width: 1024px){
.b2c_3y{ font-size: 16px;}
.b2c_3y .box-3{ padding: 6% 5%;}
.b2c_3y .box-3 .icon-box img{ max-width: 96px;}
.b2c_3y .box-8 img{ max-width: 52px;}
.b2c_3y .box-padding{ padding-top: 5%;}
.b2c_3y .box-7, .b2c_3y .box-9{ padding-bottom: 5%;}
.b2c_3y .box-10 a{ display: block; margin-bottom: 4%;}
.b2c_3y .icon-box img{ max-width: 60px;}
.b2c_3y .icon-box{ margin-top: 6%;}
.b2c_3y .box-6 img{ max-height: 52px;}
.b2c_3y .box-6 .row-new img{ max-height: 44px;}
}
@media(max-width: 768px){
.b2c_3y{ font-size: 14px;}
.b2c_3y .box-3 .icon-box img{ max-width: 70px;}
.b2c_3y .box-3 .bz{ font-size: 12px; bottom: 1%;}
.b2c_3y .box-4 .we-honor5x{ bottom: 1%;}
.b2c_3y .box-11 .we-icon-box{ font-size: 12px;}
.b2c_3y h2,.b2c_3y .box-3  h3{ font-size: 250%;}
.b2c_3y .icon-box img{ max-width: 44px;}
}
@media (max-width: 640px){
.b2c_3y{ font-size: 16px;}
.b2c_3y .box-3{ padding: 10% 5%;}
.b2c_3y .box-3  h3,.b2c_3y .box-padding h2,.b2c_3y .box-8 a{ font-size: 200%;}
.b2c_3y .box-3 h3, .b2c_3y .box-3 .icon-box{ padding-top: 6%; font-weight: 400;}
.b2c_3y .box-3 .icon-box > div{ margin-bottom: 5%;}
.b2c_3y .box-3 .icon-box img{ max-width: 120px;}
.b2c_3y .box-padding{ padding-top: 12%;}
.b2c_3y .container{ padding: 0 5%;}
.b2c_3y .box-6 .row-new{ padding-top: 6%;}
.b2c_3y .box-6{ padding-bottom: 12%;}
.b2c_3y .box-7{ background-color: #f2f2f2;}
.b2c_3y .box-7 .row-new > div{ margin-bottom: 4%;}
.b2c_3y .box-8{ padding-top: 3%;}
.b2c_3y .box-9{ padding: 6% 5%;}
.b2c_3y .box-10{ background-color: #000; padding-bottom: 8%;}
.b2c_3y .box-10 .we-honor5x{ position: static;}
.b2c_3y .box-10 a{ display: inline-block; margin-bottom: 2%;}
.b2c_3y .box-11 .we-icon-box{ font-size: 16px;}
.b2c_3y .we-icon-box img{ height: auto; width: 40px;}
.b2c_3y .text-box-2{ color: #fff; padding: 5%;}
.b2c_3y .box-12{ background-color: #010a59;}
.b2c_3y .box-13{ background-color: #00b2e6;}
.b2c_3y .box-14{ background-color: #000;}
.b2c_3y .text-box{ position: static; max-width: 100%; padding: 5%; text-align: center; left: inherit; top: inherit;}
.b2c_3y .icon-box img{ max-width: 68px;}
.b2c_3y .icon-box p{ font-size: 100%;}
.b2c_3y .learn-more{ position: absolute; bottom: 2%; width: 100%;}
.b2c_3y .learn-more span{ display: block; font-weight: 700; font-size: 100%;}
.b2c_3y .learn-more i{ font-size: 200%;}
.b2c_3y .box-3 .bz{ left: 5%;}
.b2c_3y .box-8 img{ max-width: 40px;}
.b2c_3y .text-box-2 h2{ line-height: 1;}
.b2c_3y .text-box-2 h3{ margin-bottom: 4%; font-size: 120%;}
.b2c_3y .box-12 .text-box,.b2c_3y .box-14 .text-box{ position: absolute; right: 0; bottom: 2%;}
.b2c_3y .box-12 .icon-box{ max-width: 120px;}
.b2c_3y .box-12 .icon-box > div{ margin-bottom: 20px;}
}
@media (max-width: 380px){
.b2c_3y h2{ font-size: 200%;}
.b2c_3y .box-padding{ padding-top: 8%;}
.b2c_3y .box-6{ padding-bottom: 8%;}
.b2c_3y .box-3 .icon-box img{ max-width: 108px;}
}
@media (max-width: 360px){
.b2c_3y .box-11 .we-icon-box{ font-size: 14px;}
}
@media (max-width: 320px){
.b2c_3y{ font-size: 14px;}
.b2c_3y .box-14 .text-box{ bottom: 0;}
}
/*
* Honor 7x (.h7x) 
*/
.h7x{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 24px; font-family: "Century Gothic", Arial, CenturyGothic, AppleGothic, sans-serif; line-height: 1.5; text-align: center; color: #fff; background-color: #fff;}
.h7x h2{ font-family: "bignoodletitlingregular"; font-size: 300%;}
.h7x .box-1 .btn{ position: absolute; margin: -30% 0 0 10%; width: 30%; }
.h7x .box-1 .btn a{ background-color: #182c82; color: #fff; display: inline-block; height: 54px; padding: 0 30px; font: 24px/54px "DINPro";}
.h7x .box-2{ padding: 8% 5% 5%;}
.h7x .t-color{ color: #3c3c3c;}
.h7x .box-2 span{ display: block; padding-top: 2%;}
.h7x .box-2 .row-new{ padding-bottom: 5%;}
.h7x .text-box{ position: absolute; margin-top: 10%;}
.h7x .icon-box{ margin-top: 5%;}
.h7x .icon-box span{ display: block; font-size: 80%; text-align: center; padding-top: 10px;}
.h7x .text-box.pull-right{ text-align: left; width: 68%; left: 56%;}
.h7x .box-8 .icon-box, .h7x .box-9 .icon-box, .h7x .box-13 h2{ text-align: center;}
.h7x .box-10 .icon-box > div{ margin-right: 10%;}
.h7x .box-13{ text-align: left; padding: 5% 0;}
.h7x .box-13 li{ padding-left: 80px;}
.h7x .box-13 li span{ width: 50px; display: block; position: absolute; top: 0; left: 0; text-align: right;}
.h7x .box-13 h2{ margin-top: 6%;}
.h7x .box-13 p{ margin-top: 2%;}
.h7x.h7x-in{ font-family: "DINPro";}
.h7x.h7x-in h2{ font-family: "BignoodletitlingIndia";}
.h7x.h7x-in .box-14 .text-box{ margin: 56% 10% 0% 60%; text-align: left;}
.h7x.h7x-in .box-13{ background-color: #eaebed; }
.h7x.h7x-in .box-13 .table-box{ max-width: 760px; margin: 4% auto;}
.h7x .in-line{ height: 1px; background-color: #aaa; max-width: 68%; margin: 5% auto;}
.h7x.h7x-in .box-8{ margin-top: -5%; }
.h7x.h7x-pl h2{ text-transform: uppercase; font-size: 220%; padding-bottom: 2%;}
.h7x.h7x-pl .box-3 .icon-box{ margin-top: 2%;}
.h7x.h7x-pl .box-10 .icon-box{ text-align: center;}
.h7x.h7x-pl  .box-10 .icon-box > div{ width: 40% !important;}
.h7x.h7x-pl .we-honor5x{ position: absolute; right: 12%; bottom: 5%;}
.h7x.h7x-pl .we-honor5x .banner-btnstyle{ color: #000; border-color: #000; width: auto; padding: 0 40px; height: 54px; line-height: 54px;}
.h7x.h7x_gr, .h7x.h7x_gr h2{ font-family: Arial, Helvetica, sans-serif;}
.h7x.h7x_gr h2{ font-size: 220%;}
@media (max-width: 1680px){
.h7x .text-box.pull-right{ width: 60%;}
.h7x.h7x-pl{ font-size: 20px;}
}
@media (max-width: 1536px){
.h7x{ font-size: 20px;}
.h7x .text-box.pull-right{ left: 52%;}
}
@media (max-width: 1440px){
.h7x, .h7x.h7x-pl{ font-size: 18px;}
.h7x .icon-box{ margin-top: 3%;}
.h7x .text-box.pull-right{ width: 54%; left: 50%;}
.h7x .box-3 .icon-box img{ width: 200px;}
.h7x .box-7 .icon-box img, .h7x .box-10 .icon-box img{ width: 120px;}
.h7x .box-8 .icon-box img{ width: 80px;}
.h7x .box-9 .icon-box img{ width: 60px;}
.h7x.h7x-pl .text-box.pull-right{ left: 52%; width: 50%;}
}
@media (max-width: 1366px){
.h7x.h7x-pl .text-box.pull-right { left: 54%;}
}
@media (max-width: 1280px){
.h7x .box-7 .text-box{ margin-top: 5%;}
.h7x .text-box.pull-right{ width: 50%;}
.h7x .box-5 > img { margin-top: -1px;}
}
@media (max-width: 1024px){
.h7x, .h7x.h7x-pl{ font-size: 16px;}
.h7x .text-box{ margin-top: 8%;}
.h7x .box-7 .text-box{ margin-top: 0;}
.h7x .box-3 .icon-box img{ width: 140px;}
.h7x .box-7 .icon-box img, .h7x .box-10 .icon-box img{ width: 80px;}
.h7x .box-8 .icon-box img{ width: 60px;}
.h7x .box-9 .icon-box img{ width: 50px;}
.h7x.h7x-in .box-7{ background-color: #ebeff8; padding-top: 6%; }
.h7x.h7x-pl .we-honor5x .banner-btnstyle{ height: 50px; line-height: 50px; padding: 0 20px; font-size: 18px;}
.h7x.h7x-pl .text-box.pull-right{ left: 50%;}
}
@media (max-width: 768px){
.h7x, .h7x.h7x-pl{ font-size: 14px;}
.h7x .text-box{ margin-top: 6%;}
.h7x .box-4 > img, .h7x .box-7 > img, .h7x .box-12 > img{ margin-top: -1px;}
.h7x .text-box.pull-right{ width: 48%; left: 52%;}
.h7x .box-3 .icon-box img{ width: 100px;}
.h7x .box-7 .text-box{ margin-top: -5%;}
.h7x .box-1 .btn a{ padding: 0 20px; font-size: 18px; height: 44px; line-height: 44px;}
.h7x.h7x-pl h2{ font-size: 168%;}
.h7x.h7x-pl .text-box.pull-right{ width: 46%; left: 54%;}
}
@media (width: 768px){
.h7x.h7x-in .box-7 .text-box{ margin-top: -2%;}
}
@media (min-width: 640px){
.h7x .box-10 .icon-box > div{ width: auto !important; }
}
@media (max-width: 640px){
.h7x .text-box{ left: 0; padding: 0 5%; margin-top: 15%;}
.h7x .text-box.pull-right, .h7x.h7x-pl .text-box.pull-right{ left: 0; width: 100%;}
.h7x .box-2{ padding: 8% 5% 0;}
.h7x .box-2 .row-new{ padding-bottom: 8%; font-size: 12px;}
.h7x .box-7 .text-box{ margin-top: 2%;}
.h7x .icon-box{ margin-top: 6%;}
.h7x .box-10 .text-box{ position: static; color: #3c3c3c; padding-bottom: 15%; text-align: center;}
.h7x .box-10 .icon-box > div{ margin: 0 0 8% 0;}
.h7x .box-10 .icon-box img{ margin: 0 auto;}
.h7x .box-13{ padding: 15% 5%;}
.h7x .box-13 li{ padding-left: 0;}
.h7x .box-13 li span{ text-align: left; position: static; width: auto; display: inline-block; padding-right: 10px;}
.h7x .box-13 h2{ margin-top: 15%;}
.h7x.h7x-in .box-14 .text-box{ margin: 29% 0% 0% 43%;}
.h7x.h7x-in  .box-13 h2:first-child{ margin-top: 0; }
.h7x .box-1 .btn{ width: 100%; margin: -84% 0 0 0; left: 0;}
.h7x.h7x-in .box-7{ background-color: #f0f7ff; }
.h7x.h7x-in .box-7 .text-box{ position: static; }
.h7x.h7x-pl .we-honor5x .banner-btnstyle{ height: 40px; line-height: 40px; font-size: 14px; padding: 0 20px; border-radius: 20px;}
.h7x.h7x-pl .we-honor5x{ right: 0; bottom: 2%;}
.h7x.h7x-pl .box-9 .pull-right{ margin-top: 5%;}
.h7x.h7x-pl  .box-10 .icon-box > div{ width: 50% !important;}
.h7x.h7x_gr h2{ font-size: 125%; font-weight: 700;}
}
@media (max-width: 380px){
.h7x h2{ font-size: 250%;}
.h7x .text-box{ margin-top: 12%;}
.h7x .box-10 .text-box{ padding-bottom: 12%;}
.h7x .box-13{ padding: 12% 5%;}
.h7x.h7x-in .box-14 .text-box{ margin-top: 20%;}
.h7x.h7x-pl{ font-size: 12px;}
}
@media (max-width: 360px){
.h7x{ font-size: 12px;}
.h7x.h7x-pl h2{ font-size: 150%; font-weight: 700;}
}
@media (max-width: 320px){
.h7x .box-9 .text-box{ margin-top: 2%;}
.h7x.h7x-in .box-9 .text-box{ margin-top: 8%; }
.h7x.h7x-pl .box-9{ background-color: #d0d4e1; padding-top: 30%;}
.h7x.h7x-pl .box-9 .pull-right{ margin-top: -18%;}
}
/*
* Honor Holly 4 Plus (.h4p) 
*/
.h4p{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; font-size: 24px; line-height: 1.5; text-align: left; color: #525252; background-color: #f3f3f3;}
.h4p h2{ font-family: "bignoodletitlingregular"; font-size: 260%; font-style: italic;}
.h4p .text-box{ position: absolute; width: 70%; margin-top: 30%;}
.h4p .text-box.pull-right{ left: 45%;}
.h4p .text-box.pull-left{ left: -15%;}
.h4p .notes{ font-size: 75%; margin-top: 5%;}
.h4p .box-6 .text-box.pull-right{ left: 55%; width: 65%; margin-top: 35%;}
.h4p .box-7 .text-box.pull-left{ width: 55%; margin-top: 35%;}
.h4p .box-8{ background: url('/content/dam/honor/se/products/smartphone/honor8pro/img/h4p-8.jpg') #c4c8c8 0 0 no-repeat; padding: 5% 0; text-align: center;}
.h4p .table-list{ text-align: left; padding: 2% 0;}
.h4p .table-list>div{ padding-bottom: 20px;}
.h4p .bot-box{ font-size: 16px;}
.h4p .bot-box img{ height: 20px;}
@media (max-width: 1680px){
    .h4p .box-6 .text-box.pull-right{ margin-top: 30%;}
}
@media (max-width: 1600px){
.h4p .box-6 .text-box.pull-right{ width: 58%; margin-top: 25%;}
}
@media (max-width: 1536px){
.h4p{ font-size: 20px;}
.h4p .text-box{ width: 60%; margin-top: 25%;}
.h4p .text-box.pull-left{ left: -5%;}
.h4p .box-6 .text-box.pull-right{ margin-top: 28%;}
.h4p .box-7 .text-box.pull-left{ width: 45%;}
}
@media (max-width: 1366px){
.h4p{ font-size: 18px;}
.h4p .text-box.pull-left{ left: 0;}
.h4p .text-box{ width: 55%; margin-top: 20%;}
.h4p .box-6 .text-box.pull-right{ width: 48%; margin-top: 25%;}
.h4p .box-7 .text-box.pull-left{ margin-top: 30%;}
}
@media (max-width: 1024px){
.h4p{ font-size: 16px;}
.h4p .text-box.pull-left{ left: 5%;}
.h4p .text-box.pull-right{ left: 42%;}
.h4p .box-6 .text-box.pull-right{ width: 40%; margin-top: 18%;}
.h4p .box-7 .text-box.pull-left{ width: 40%; margin-top: 24%;}
.h4p .bot-box{ font-size: 14px;}
}
@media (max-width: 768px){
.h4p, .h4p .bot-box{ font-size: 12px;}
.h4p .table-list>div{ padding-bottom: 10px;}
}
@media( max-width: 640px){
.h4p .box > img{ padding-top: 25%;}
.h4p .box-1 > img, .h4p .box-7 > img{ padding-top: 0 !important;}
.h4p .text-box{ width: 100% !important; padding: 0 5%; left: 0 !important; text-align: center; margin-top: 10% !important;}
.h4p .box-8{ padding: 10% 5%;}
.h4p .bot-box img{ height: 14px;}
}
@media (max-width: 380px){
.h4p .box > img{ padding-top: 40%;}
.h4p .box-5 > img{ padding-top: 30% !important;}
}
@media (max-width: 360px){
.h4p .box > img{ padding-top: 45%;}
}
@media (max-width: 320px){
.h4p .box > img{ padding-top: 55%;}
.h4p .box-7 > img{ padding-top: 20% !important;}
}

/*
* Honor V10 
*/
.hv10{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; text-align: left; color: #fff; background-color: #002d7b; font: 36px/1.5 "DINPro";}
.hv10 .container{ width: 80%;}
.hv10 h1, .hv10 h2, .hv10 h3, .hv10 h4, .hv10 .font-icon{ font-family: "bignoodletitlingregular";}
.hv10 h1{ font-size: 500%;}
.hv10 h2{ font-size: 225%; margin-bottom: 4%;}
.hv10 h3{ font-size: 100%;}
.hv10 h4{ font-size: 140%;}
.hv10 .text-box{ position: absolute; margin-top: 10%; width:100%;}
.hv10 .icon-box{ text-align: center; margin-top: 4%;}
.hv10 .icon-box p, .hv10 .box-15 p{ text-transform: uppercase; font-size: 80%; margin-top: 5%;}
.hv10 .box-1 .text-box{ margin-top: 32%;}
.hv10 .box-1 p{ margin-bottom: 5%;}
.hv10 .box-2 .text-box{ margin-top: 50%;}
.hv10 .box-3 h2, .hv10 .box-6 h2{ text-align: center;}
.hv10 .box-3 .text-box{ margin-top: 24%;}
.hv10 .box-4 .text-box{ margin-top: 6%;}
.hv10 .box-4 .icon-box p{ margin-top: 0;}
.hv10 .box-6 .text-box{ margin-top: 12%;}
.hv10 .font-icon{ font-size: 250%; font-weight: 400;}
.hv10 .box-7 .icon-box p, .hv10 .box-12 .icon-box p{ margin-top: -7%;}
.hv10 .box-8 .text-box{ margin-top: -30%;}
.hv10 .box-9 .text-box, .hv10 .box-10 .text-box{ text-align: right; max-width: 50%; margin-left: 50%;}
.hv10 .box-10 .text-box{ margin-top: 20%;}
.hv10 .box-11 .text-box{ margin-top: 55%; max-width: 55%;}
.hv10 sub{ bottom: 0; font-size: 50%;}
.hv10 .box-12 .text-box, .hv10 .box-13 .text-box{ max-width: 48%; margin: 20% 0 0 52%;}
.hv10 .box-14{ padding-bottom: 6%;}
.hv10 .box-14 li{ list-style-type: disc;}
.hv10 .box-14 .tip-1, .hv10 .box-14 .tip-2 li{ margin-bottom: 5%;}
.hv10 .box-15{ background-color: #ddeff9; padding: 5%; color: #090909; text-align: center;}
.hv10 .box-15 .row-new > div{ padding: 2%;}
.hv10.hv10-in .box-14 h2{ text-align: center; padding-top: 10%;}
.hv10 .box-14 .table-box{ padding-bottom: 4%;}
.hv10 .box-14 .right-box{ position: absolute; right: 0; top: 0;}
.hv10.hv10-in .notifyMe, .hv10 .box-1 .learnMore{ position:  absolute; display:  inline-block; padding: 0 2%; background: #000; color:  #fff; top: 58%; left: 32%; text-transform:  uppercase; height: 50px; line-height: 50px; font-size: 75%;}
.hv10 .box-1 .learnMore{ top: 70%; left: 25%;}
@media (max-width: 1680px){
.hv10{ font-size: 26px;}
}
@media (max-width:1536px){
.hv10 .icon-box img{ max-width: 128px;}
.hv10 .box-4 .icon-box img{ max-width: 100% !important;}
.hv10.hv10-in .notifyMe, .hv10 .box-1 .learnMore{ height: 40px; line-height: 40px;}
}
@media (max-width:1440px){
.hv10 .box-2 .text-box{ max-width: 80%; margin-top: 42%;}
.hv10 .box-14 .tip-1, .hv10 .box-14 .tip-2 li{ margin-bottom: 3%;}
.hv10 .icon-box img{ max-width: 116px;}
.hv10 h3 img{ max-height: 56px;}
}
@media(max-width:1280px){
.hv10{ font-size: 20px;}
.hv10 .icon-box img{ max-width: 100px;}
.hv10 .box-7 .icon-box p, .hv10 .box-12 .icon-box p{ margin-top: -4%;}
}
@media (max-width:1024px){
.hv10{ font-size:18px;}
}
@media (max-width:768px){
.hv10{ font-size: 14px;}
.hv10 .icon-box img{ max-width: 60px;}
}
@media (max-width:750px) {
.hv10 h3{ font-size: 150%;}
.hv10 .box-15{ padding: 8% 5%;}
.hv10 .box-15 .col-xs-6{ height: 140px;}
.hv10 .box-2 .text-box{ max-width: 100%; margin-top: 100%;}
.hv10 .box-3 .text-box{ margin-top: 30%;}
.hv10 .text-box{ margin-top: 16%;}
.hv10 .box-6 .text-box{ margin-top: 24%;}
.hv10 .box-8 .text-box{ margin-top: -15%;}
.hv10 .box-9 .text-box, .hv10 .box-10 .text-box{ text-align: left; max-width: 100%; margin: 16% 0 0 0;}
.hv10 .box-11 .text-box{ margin-top: 100%; max-width: 100%;}
.hv10 .box-12 .text-box, .hv10 .box-13 .text-box{ max-width: 100%; margin: 16% 0 0 0;}
.hv10 .box-12, .hv10 .box-13{ text-align: center;}
.hv10 .box-14{ padding: 10% 0;}
.hv10 .box-14 .tip-1, .hv10 .box-14 .tip-2 li{ margin-bottom: 5%;}
.hv10.hv10-in .notifyMe, .hv10 .box-1 .learnMore{ left: 0; top: 34%; text-align: center; padding: 0; margin: 0 25%; width: 50%; font-size: 18px;}
.hv10 .box-1 .learnMore{ margin:  0; top: 62%; width:  auto; font-size:  14px; padding: 0 4%; left: 10%;}
}
@media (max-width:380px){
.hv10 .box-7{ background-color: #1E4EBC; padding-top: 20%;}
.hv10 .box-7 .text-box{ margin-top: -6%;}
.hv10 .text-box{ margin-top: 16%;}
.hv10 .box-2 .text-box{ margin-top: 80%;}
.hv10 .box-12 .text-box, .hv10 .box-13 .text-box{ margin-top: 10%;}
.hv10.hv10-in .box-11{ padding-bottom: 10%; background: #002575;}
}
@media (max-width:320px){
.hv10{ font-size: 12px;}
}

/*
* Honor 7x Cash Back
*/
.h7xCB{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; text-align: center; color: #fff; background-color: #09112b;}
.h7xCB .container{ width: 90%;}
.h7xCB h2{ font-family: "bignoodletitlingregular";}

/*
* Honor View 10 Superfied
*/
.hv10SF{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; text-align: center; color: #fff; background-color: #fafafa;}
.hv10SF .container{ width: 80%;}
.hv10SF .text-box{ position: absolute; width: 100%; margin-top: 1%; left:0;}
.hv10SF h2{ font: 475%/0.8 "bignoodletitlingregular"; text-shadow: 0 0 2px #f8fcff; margin-top: 2%;}
.hv10SF a{ color: #fff;}
.hv10SF .box-1 .left-box{ text-align: left; float: left;}
.hv10SF .box-1 .right-box{ text-align: right; float:right;}
.hv10SF .box-1 .copywriting{ position: absolute; width: 100%;}
.hv10SF .hv10SF-btn{ border: 1px solid #fff; height: 60px; line-height: 60px; padding: 0 4%; display: inline-block; font-size: 150%; margin-top: 1%;}
.hv10SF .hv10SF-btn:hover{ background:url('/content/dam/honor/se/products/smartphone/honor8pro/img/hv10SF_icon-6.png'); background-size: 100% 100%;}
.hv10SF .box-2 .text-box{ margin-top: 5%;}
.hv10SF .swiper-container{ height: auto; padding: 2% 0 4%;}
.hv10SF .swiper-pagination-bullet{ background:#9fabb7; height: 12px; width: 12px;}
.hv10SF .swiper-pagination-bullet-active{ background: #f7f7f7;}
.hv10SF .swiper-button-prev, .hv10SF .swiper-button-next{ width: 24px; height: 42px;}
.hv10SF .box-3 .text-box{ margin-top: 4%;}
.hv10SF iframe{ background-color: #ccc;}
.hv10SF .box-4 .text-box{ text-align: left; max-width: 36%; margin-top: 10%;}
.hv10SF .box-4 .text-box img{ margin: 2% 0;}
.hv10SF .video-box{ width: 70%;}
.hv10SF .video-box h3{ font-weight: 700; text-transform: uppercase; margin: 1% 0; font-size: 125%;}
.hv10SF .video-box h3 i{ font-style: normal; font-weight: 400; padding-right: 2%; color: #67bada; text-transform: initial; }
.hv10SF .video-box .swiper-button-next, .hv10SF .video-box .swiper-button-prev{ top: 42%;}
.hv10SF .video-box p{ font-size: 12px;}
@media (max-width:1680px){
    .hv10SF .box-4 .text-box{ max-width: 38%;}
}
@media (max-width:1440px){
    .hv10SF{ font-size: 12px;}
    .hv10SF .hv10SF-btn{ height: 50px; line-height: 50px;}
    .hv10SF .box-4 .text-box{ max-width: 36%;}
}
@media (max-width:1280px){
    .hv10SF .box-1 .copywriting{ margin-top: -2%;}
    .hv10SF .swiper-pagination-bullet{ height: 10px; width: 10px;}
    .hv10SF .video-box{ width: 68%;}
}
@media (max-width:1024px){
    .hv10SF .hv10SF-btn{ height: 40px; line-height: 40px; padding: 0 2%;}
    .hv10SF h2{ font-size: 350%;}
    .hv10SF .swiper-container{ padding-bottom: 5%;}
    .hv10SF .box-1 .copywriting img, .hv10SF .box-4 .text-box img{ max-height: 40px;}
    .hv10SF .box-2 .text-box{ margin-top: 2%;}
}
@media(max-width:768px){
    .hv10SF .swiper-container{ padding-bottom: 6%;}
    .hv10SF h2{ font-size: 280%;}
    .hv10SF .game-ad{ max-width: 80%;}
    .hv10SF .box-4 .text-box{ margin-top: 4%; max-width: 50%;}
    .hv10SF .box-3 .text-box{ margin-top: 10%;}
    .hv10SF .box-1 .left-box img{ max-height: 30px;}
    .hv10SF .swiper-button-prev, .hv10SF .swiper-button-next{ top: 44%; height: 32px;}
}
@media (max-width:640px){
    .hv10SF{ font-size: 14px;}
    .hv10SF .container{ width: 90%;}
    .hv10SF h2{ font-size: 400%; margin-top: 5%; line-height: 1;}
    .hv10SF .box-1 .copywriting img, .hv10SF .box-4 .text-box img{ max-height: inherit;}
    .hv10SF .hv10SF-btn{ height: 44px; line-height: 44px; padding: 0 8%; font-size: 125%; margin-top: 5%;}
    .hv10SF .hv10SF-btn.visible-xs{ display: inline-block !important;}
    .hv10SF .box-1 .copywriting, .hv10SF .text-box, .hv10SF .game-ad-phone{ margin-top: 5%;}
    .hv10SF .swiper-button-white{ display: none;}
    .hv10SF .video-box{ width: 100%;}
    .hv10SF .swiper-container{ padding: 5% 0 10%;}
    .hv10SF .box-2 .text-box{ margin-top: 10%;}
    .hv10SF .game-ad-phone img{ margin-bottom: 2%;}
    .hv10SF .box-4 .text-box{ max-width: 96%;}
    .hv10SF .box-4 .btn-box{ text-align: center; margin-top: 65%;}
    .hv10SF .box-2 h2 img{ max-width: 50px; display: inline-block !important;}
    .hv10SF .video-box h3{ margin: 4% 0;}
    .h7xMYC .map-mb p.note{ font-size: 12px;}
}
@media(max-width:380px){
    .hv10SF{ font-size: 12px;}
    .hv10SF .box-2 .text-box{ margin-top: 12%;}
    .hv10SF .box-1 .left-box img{ max-height: 30px;}
    .hv10SF .box-4 .text-box img{ max-height: 48px;}
    .hv10SF .box-4 .btn-box{ margin-top: 64%;}
    .hv10SF h2{ font-size: 300%;}
    .hv10SF .swiper-container{ padding-bottom: 12%;}
    .hv10SF .box-2{ z-index: 3;}
    .hv10SF .box-3{ z-index: 2;}
    .hv10SF .box-3 .text-box{ margin-top: 16%;}
    .hv10SF .box-4 .text-box{ margin-top: 12%;}
}
@media (max-width:320px){
    .hv10SF .box-2 .text-box{ margin-top: 10%;}
    .hv10SF h2{ font-size: 225%;}
    .hv10SF .box-4 .text-box{ margin-top: 16%;}
    .hv10SF .box-4 .btn-box{ margin-top: 48%;}
}
/*
* Honor 7X Max your city
*/
.h7xMYC{ width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; text-align: center; color: #000; background-color: #fff; font-size: 22px;}
.h7xMYC b, .h7xMYC .learn-more, .h7xMYC .map-box span, .h7xMYC .map-nav{ font-family: Helvetica,Arial;}
.h7xMYC h2{ font-size: 250%; text-transform: uppercase;}
.h7xMYC .container{ width: 70%;}
.h7xMYC .text-box{ position: absolute; width: 100%; left:0;}
.h7xMYC .learn-more{ position: absolute; color: #000; font-weight: 700; left: 0; top: 29.88%; font-size: 125%; width: 100%;}
.h7xMYC .learn-more i{ font-size: 90%;}
.h7xMYC .mark-link{ position: absolute; width: 100%; bottom: 4%; left: 0;}
.h7xMYC .mark-link a{ height: 50px; line-height: 50px; color: #fff; padding: 0 4%; display: inline-block; margin: 0 2%; background: #000; text-transform: uppercase;}
.h7xMYC .mark-link a:hover{ background: #1a1a1a;}
.h7xMYC hr{ width: 60px; margin: 1% auto; height: 6px; background: #3b70a9; border: 0;}
.h7xMYC p{ margin-bottom: 20px;}
.h7xMYC .video-box{ margin: 2% auto; background: #ccc;}
.h7xMYC .box-2 .text-box{ margin-top: 8%; padding: 0 5%;}
.h7xMYC .box-2 .col-sm-6{ padding: 0 2%;}
.h7xMYC .box-2 .col-sm-6 p{ height: 200px;}
.h7xMYC .box-3 .text-box{ margin-top: 16%;}
.h7xMYC .box-4, .h7xMYC .box-5{ padding: 6% 0;}
.h7xMYC .box-4 .swiper-pagination{ width: 100%; text-align: center;}
.h7xMYC .swiper-pagination-bullet{ width: 14px; height: 14px; margin: 0 5px;}
.h7xMYC .post-box-1{ margin: 3% 0;}
.h7xMYC .box-5{ background: #f0f3f2;}
.h7xMYC .box-6 .mark-link{ bottom: inherit; top: 34%;}
.h7xMYC .box-7{ background: #f5f9fc; padding: 4% 15%;}
.h7xMYC .box-7 .col-sm-3{ padding: 0 1%;}
.h7xMYC .box-7 h4{ font-size: 100%; padding: 5% 0 1%;}
.h7xMYC .box-7 p{ font-size: 80%; margin: 0;}
.h7xMYC .box-7 .video-pagination { display: none;}
.h7xMYC .tc-h7x{ position: absolute; right: 2%; top: 4%; font-size: 85%; color: #000;}
.h7xMYC .post-box{ margin: 2% 0;}
.h7xMYC .pop-post, .h7xMYC .pop-post-mb{ display: none;}
.h7xMYC .swiper-container{ height: auto;}
.h7xMYC .swiper-slide img{ max-height: 800px;}
.h7xMYC .modal .swiper-slide img{ max-height: 600px;}
.h7xMYC .swiper-post .swiper-container{ width:80%;}
.h7xMYC #pop_swiper .swiper-button-prev{ left: -30px;}
.h7xMYC #pop_swiper .swiper-button-next{ right: -30px;}
.h7xMYC #pop_swiper button{ top: 5%;}
.h7xMYC .map-box > div{ position: absolute;}
.h7xMYC .map-box span{ color: #000; font-weight: 550; font-size: 20px;}
.h7xMYC .map-box i{ font-size: 16px; position: relative;}
.h7xMYC .map-box .map-img{ position: absolute; max-width: inherit; top: -142px; left: -41px; z-index: 2;}
.h7xMYC .map-img{ display: none;}
.h7xMYC .Florence span, .h7xMYC .Serbia span{ display: block; height: 14px;}
.h7xMYC .Serbia span{ margin-top: -15%;}
.h7xMYC .Chicago{ left: 26.8%; top: 36.4%;}
.h7xMYC .London{ left: 41.2%; top: 32%;}
.h7xMYC .Madrid{ left: 42.6%; top: 39.8%;}
.h7xMYC .Paris{ left: 44%; top: 34.8%;}
.h7xMYC .Berlin{ left: 50.8%; top: 32%;}
.h7xMYC .Milan{ left: 51.5%; top: 41.6%;}
.h7xMYC .Amman{ left: 48.4%; top: 46%;}
.h7xMYC .Riyadh{ left: 48.2%; top: 49.8%;}
.h7xMYC .StPetersburg{ left: 50.8%; top: 23.8%;}
.h7xMYC .Moscow{ left: 54%; top: 29%;}
.h7xMYC .Tehrān{ left: 55.6%; top: 41.2%;}
.h7xMYC .Dubai{ left: 57.2%; top: 49.8%;}
.h7xMYC .Mumbai{ left: 56.88%; top: 52.8%;}
.h7xMYC .Delhi{ left: 61.8%; top: 46.4%;}
.h7xMYC .Hyderabad{ left: 62.18%; top: 50%;}
.h7xMYC .Bangalore{ left: 62.18%; top: 53.8%;}
.h7xMYC .Huston{ left: 26.5%; top: 45%;}
.h7xMYC .NewYork{ left: 33.5%; top: 37%;}
.h7xMYC .Vegas{ left: 21.4%; top: 42%;}
.h7xMYC .Vienna{ left: 50.5%; top: 38%;}
.h7xMYC .Prague{ left: 50%; top: 35%;}
.h7xMYC .Serbia{ left: 48%; top: 40%;}
.h7xMYC .Rome{ left: 44%; top: 37.2%;}
.h7xMYC .Florence{ left: 46.2%; top: 31.5%;}
.h7xMYC .Hamburg{ left: 43%; top: 28%;}
.h7xMYC .Toronto{ left: 32.6%; top: 33%;}
.h7xMYC .KualaLumpur{ right: 25.4%; top: 61%;}
.h7xMYC .Singapore{ left: 62%; top: 64%;}
.h7xMYC .Shanghai{ right: 24.6%; top: 45%;}
.h7xMYC .Manila{ right: 24.8%; top: 57%;}
.h7xMYC .share-btn{ position: absolute; right: 2%; top: 2%; width: 600px; text-align: right; font-size: 22px;}
.h7xMYC .share-btn a{ display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 10px; margin: 0 5px; text-align: center; padding: 0; color: #fff; border: 2px solid #fff;}
@media (max-width:1680px){
    .h7xMYC .Chicago{ left: 23.6%;}
    .h7xMYC .London{ left: 39.8%;}
    .h7xMYC .Madrid{ left: 41%;}
    .h7xMYC .Paris{ left: 42.8%;}
    .h7xMYC .Berlin{ left: 50.4%;}
    .h7xMYC .Amman{ left: 48.4%;}
    .h7xMYC .Riyadh{ left: 48%;}
    .h7xMYC .StPetersburg{ left: 51%;}
    .h7xMYC .Moscow{ left: 54.6%;}
    .h7xMYC .Tehrān{ left: 56.4%;}
    .h7xMYC .Dubai{ left: 58.2%;}
    .h7xMYC .Mumbai{ left: 57.8%;}
    .h7xMYC .Delhi{ left: 63.4%;}
    .h7xMYC .Hyderabad, .h7xMYC .Bangalore{ left: 64%;}
    .h7xMYC .Vegas{ left: 17.4%;}
    .h7xMYC .Huston{ left: 23.2%;}
    .h7xMYC .NewYork{ left: 31.2%;}
    .h7xMYC .Toronto{ left: 30.2%;}
    .h7xMYC .Rome{ left: 43%;}
    .h7xMYC .Florence{ left: 45.4%;}
    .h7xMYC .Serbia{ left: 47%;}
    .h7xMYC .Prague{ left: 49%;}
    .h7xMYC .Singapore{ left: 64%;}
    .h7xMYC .KualaLumpur{ right: 22%;}
    .h7xMYC .Manila{ right: 20.8%;}
    .h7xMYC .Shanghai{ right: 21%;}
    .h7xMYC .Hamburg{ left: 42%;}
}
@media (max-width:1600px){
    .h7xMYC .Chicago{ left: 22.4%;}
    .h7xMYC .London{ left: 39.4%;}
    .h7xMYC .Madrid{ left: 41.2%;}
    .h7xMYC .Dubai{ left: 58.6%;}
    .h7xMYC .Mumbai{ left: 58.2%;}
    .h7xMYC .Delhi{ left: 64.2%;}
    .h7xMYC .Hyderabad, .h7xMYC .Bangalore{ left: 64.8%;}
    .h7xMYC .Vegas{ left: 16%;}
    .h7xMYC .Huston{ left: 22%;}
    .h7xMYC .Toronto{ left: 29.2%;}
    .h7xMYC .NewYork{ left: 30.2%;}
    .h7xMYC .Hamburg{ left: 41.5%;}
    .h7xMYC .Florence{ left: 45.2%;}
    .h7xMYC .Shanghai{ right: 19.8%;}
    .h7xMYC .KualaLumpur{ right: 20.8%;}
    .h7xMYC .Manila{ right: 19.8%;}
}
@media (max-width:1536px){
    .h7xMYC{ font-size: 18px;}
    .h7xMYC .box-2 .col-sm-6 p{ height: 140px;}
    .h7xMYC .map-box i{ font-size: 14px;}
    .h7xMYC .map-box .map-img{ width: 80px; left: -34px; top: -118px;}
    .h7xMYC .Chicago{ left: 21%; top: 37.2%;}
    .h7xMYC .London{ left: 38.8%;}
    .h7xMYC .Madrid{ left: 40.6%; top: 40.4%;}
    .h7xMYC .Milan{ top: 40.6%;}
    .h7xMYC .Amman{ left: 48.2%;}
    .h7xMYC .StPetersburg{ left: 51.2%; top: 24.8%;}
    .h7xMYC .Moscow{ left: 55.6%; top: 31%;}
    .h7xMYC .Tehrān{ left: 57%; top: 42%;}
    .h7xMYC .Dubai{ left: 59.2%; top: 50.5%;}
    .h7xMYC .Mumbai{ left: 59%; top: 53.6%;}
    .h7xMYC .Delhi{ left: 65%; top: 47.5%;}
    .h7xMYC .Hyderabad, .h7xMYC .Bangalore{ left: 65.2%;}
    .h7xMYC .Hyderabad{ top: 51%;}
    .h7xMYC .Bangalore{ top: 54.8%;}
    .h7xMYC .Riyadh{ top: 50.8%;}
    .h7xMYC .Vegas{ left: 14.4%;}
    .h7xMYC .Huston{ left: 20.5%;}
    .h7xMYC .Toronto{ left: 28.2%;}
    .h7xMYC .NewYork{ left: 29.4%;}
    .h7xMYC .Florence{ left: 44.8%;}
    .h7xMYC .Shanghai{ right: 19%;}
    .h7xMYC .Manila{ right: 18.4%;}
    .h7xMYC .Singapore{ left: 65%;}
    .h7xMYC .KualaLumpur{ right: 19.4%;}
}
@media (max-width: 1440px){
    .h7xMYC .Chicago{ left: 19%;}
    .h7xMYC .London{ left: 38%;}
    .h7xMYC .Madrid{ left: 39.6%;}
    .h7xMYC .Paris{ left: 41%;}
    .h7xMYC .Amman{ left: 48%; top: 47%;}
    .h7xMYC .Riyadh{ left: 47.6%;}
    .h7xMYC .Moscow{ left: 56.2%;}
    .h7xMYC .Tehrān{ left: 57.6%;}
    .h7xMYC .Dubai{ left: 60%;}
    .h7xMYC .Delhi{ left: 66%;}
    .h7xMYC .Hyderabad, .h7xMYC .Bangalore{ left: 66.2%;}
    .h7xMYC .Mumbai{ left: 59.4%;}
    .h7xMYC .Vegas{ left: 12%;}
    .h7xMYC .Huston{ left: 18.8%; top: 46%;}
    .h7xMYC .Toronto{ left: 26.2%;}
    .h7xMYC .NewYork{ left: 28.4%;}
    .h7xMYC .Rome{ left: 41%;}
    .h7xMYC .Florence{ left: 44.5%;}
    .h7xMYC .Prague{ left: 48%;}
    .h7xMYC .Vienna{ left: 49.5%;}
    .h7xMYC .Shanghai{ right: 16.8%; top: 46%;}
    .h7xMYC .Manila{ right: 16.4%;}
    .h7xMYC .KualaLumpur{ right: 17.4%;}
    .h7xMYC .Singapore{ left: 66%;}
}
@media (max-width:1366px){
    .h7xMYC{ font-size: 16px;}
    .h7xMYC .mark-link a{ height: 40px; line-height: 40px;}
    .h7xMYC hr{ height: 4px;}
    .h7xMYC .map-box span{ font-size: 18px;}
    /* .h7xMYC .Paris span, .h7xMYC .Berlin span{ height: 18px;} */
    .h7xMYC .Mumbai{ left: 59.6%;}
    .h7xMYC .Singapore{ left: 66.8%;}
    .h7xMYC .Shanghai{ right: 16%;}
}
@media (max-width: 1280px){
    .h7xMYC .Vegas{ left: 11.6%;}
    .h7xMYC .Huston{ left: 17.8%;}
    .h7xMYC .NewYork{ left: 27.4%;}
    .h7xMYC .Singapore{ left: 65.8%;}
    .h7xMYC .Manila{ right: 15.8%;}
}
@media (max-width:1024px){
    .h7xMYC{ font-size: 14px;}
    .h7xMYC .mark-link{ bottom: 2%;}
    .h7xMYC h2{ font-size: 225%;}
    .h7xMYC .box-2 .text-box{ margin-top: 6%;}
    .h7xMYC .box-4, .h7xMYC .box-5{ padding: 4% 0;}
    .h7xMYC .map-box i{ font-size: 12px;}
    .h7xMYC .map-box span{ font-size: 14px;}
    /* .h7xMYC .Paris span, .h7xMYC .Berlin span{ height: 12px;} */
}
@media (max-width:768px){
    .h7xMYC{ font-size: 12px;}
    .h7xMYC .box-2 .col-sm-6 p{ height: 100px;}
    .h7xMYC .box-5{ padding-bottom: 0 !important;}
    .h7xMYC .map-box-mb{ background: #dbdede; padding: 5% 0 10%; margin-bottom: 0; text-align: left;}
    .h7xMYC .map-nav, .h7xMYC .map-nav-2{ height: 40px; line-height: 38px; width: 70%; margin: 0 auto; font-size: 16px; overflow: hidden;}
    .h7xMYC .map-box-mb ul{ white-space: nowrap; overflow-x: auto;}
    .h7xMYC .map-box-mb li{ margin: 0 2%; display: inline-block;}
    .h7xMYC .map-nav > ul > li.on{ border-bottom: 2px solid #3c85c1;}
    .h7xMYC .map-box-mb li.on a{ color: #3c85c1;}
    .h7xMYC .map-box-mb a{ color: #000;}
    .h7xMYC .map-nav li ul{ display: none;}
    .h7xMYC .map-nav-2{ font-size: 14px; height: 30px; line-height: 30px; margin-top: 2%; background: #fafafa;}
    .h7xMYC .map-post-mb img{ max-width: 100%;}
    .h7xMYC .map-box-mb .swiper-pagination{ position: relative; margin-top: 4%;}
    .h7xMYC .swiper-pagination-bullet{ background: none; border: 1px solid #000; width: 10px; height: 10px; margin: 0 1%; opacity: 1;}
    .h7xMYC .swiper-pagination-bullet-active, .h7xMYC .map-box-mb .swiper-pagination-bullet-active, .h7xMYC .box-7 .swiper-pagination-bullet-active{ background: #000;}
    .h7xMYC .map-nav-2, .h7xMYC .map-swiper-mb{ display: none;}
    .h7xMYC .map-mb{ margin: 2% auto;}
    .h7xMYC .map-mb p.note{ line-height: 20px; padding: 10px 10px 10px 50px; margin: 4% auto 0; border-radius: 6px; background: #fafafa; width: 80%;}
    .h7xMYC .map-mb p.note i{ position: absolute; left: 15px; font-size: 20px; margin-top: 2%;}
}
@media (max-width:750px){
    .h7xMYC{ font-size: 16px;}
    .h7xMYC .mark-link{ bottom: inherit; top: 43%;}
    .h7xMYC .learn-more, .h7xMYC .mark-link a{ height: 44px; line-height: 44px; padding: 0 10%;}
    .h7xMYC .container{ width: 90%;}
    .h7xMYC h2{ font-size: 180%;}
    .h7xMYC .box-2{ z-index: 2; padding-bottom: 28%;}
    .h7xMYC .box-2 .text-box{ margin-top: 8%; padding: 0;}
    .h7xMYC .box-2 .col-sm-6{ padding: 0;}
    .h7xMYC .video-box{ width: 100%; margin: 10% auto;}
    .h7xMYC #pop_swiper .swiper-button-prev, .h7xMYC #pop_swiper .swiper-button-next{ display: none;}
    .h7xMYC .box-2 .col-sm-6 p{ height: auto;}
    .h7xMYC .box-3 .text-box{ margin-top: 20%;}
    .h7xMYC .box-4, .h7xMYC .box-5{ padding: 10% 0;}
    .h7xMYC .box-2 .container{ width: 100%;}
    .h7xMYC .box-2 h2, .h7xMYC .box-2 p{ padding: 0 5%;}
    .h7xMYC .box-4{ background: #223138; color: #fff;}
    .h7xMYC .post-box{ margin: 6% 0 0;}
    .h7xMYC .box-4 .swiper-pagination{ width:100%; padding-top: 5%; position: relative;}
    .h7xMYC .box-4 .swiper-pagination-bullet{ border-color: #fff;}
    .h7xMYC .swiper-pagination-bullet-active{ background: #fff;}
    .h7xMYC .box-5 .mark-link{ top: inherit; bottom: 2%;}
    .h7xMYC .box-6 .mark-link{ top: 46%;}
    .h7xMYC .tc-h7x{ position: relative; color: #fff; border: 1px solid #fff; border-radius: 6px; height: 44px; line-height: 44px; margin-top: 6%; display: inline-block; padding: 0 5%;}
    .h7xMYC hr{ margin: 3% auto;}
    .h7xMYC .share-btn{ width: 100%; text-align: center; left: 0; background: #f7fbfe; position: relative; padding: 4% 0;}
    .h7xMYC .share-btn a{ background: #000; border: 0 none;}
    .h7xMYC .learn-more{ top: 30.88%;}
    .h7xMYC .map-nav, .h7xMYC .map-nav-2{ width: 90%;}
    .h7xMYC .map-box-mb{ padding-bottom: 20%;}
    .h7xMYC .map-mb { margin: 3% auto;}
    .h7xMYC .map-mb p.note i{ margin-top: 5.5%;}
    .h7xMYC .modal .swiper-slide img{ max-height: inherit; max-width: 80%;}
    .h7xMYC .box-7{ padding: 10% 0;}
    .h7xMYC .box-7 .video-pagination { display: block; padding-top: 5%;}
    .h7xMYC .box-7 h4, .h7xMYC .box-7 p{ padding: 0 5%;}
    .h7xMYC .box-7 h4{ font-size: 200%;}
    .h7xMYC .box-7 p{ font-size: 100%; padding-bottom: 5%;}
}
@media (max-width: 380px){
    .h7xMYC{ font-size: 14px;}
    .h7xMYC .box-2{ padding-bottom: 20%;}
    .h7xMYC .map-nav, .h7xMYC .map-nav-2{ font-size: 14px;}
}
@media (max-width: 360px){
    .h7xMYC .box-2{ padding-bottom: 30%;}
}
@media (max-width: 320px){
    .h7xMYC{ font-size: 12px;}
    .h7xMYC .box-2{ padding-bottom: 20%;}
    .h7xMYC .learn-more{ top: 30%;}
    .h7xMYC .map-mb p.note i{ margin-top: 12%;}
    .h7xMYC .map-nav, .h7xMYC .map-nav-2{ font-size: 12px;}
}