html, body {
  height: 100%;
  margin: 0;
  padding: 0; 
}
html {
  background: #fff !important; 
}
* {
  outline: none; 
}
body {
	background: #fff;
	font: normal 15px 'HPSimplifiedRegular', Arial;
	color: #414144; 
	min-width: 1280px;
}

a {
  color: #000; 
}
a:hover {
	color: #000;
    text-decoration: none; 
}

ul {
  padding: 0;
  margin: 0; 
}
ul li {
	list-style: none;
    padding: 0;
    margin: 0; 
}
.hdr{
    background: #0096d6;
	width: 100%;
	height: 163px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
.head{
	position: relative;
    background: url("../i/bg-top.png") 50% 0 no-repeat;
	height: 198px;
	z-index: 12;
}
.logo{
	position: absolute;
	left: 50%;
	margin-left: -44px;
	top: 35px;
	height: 89px;
	width: 89px;
    background: url("../i/hc-logo.svg") 50% 50% no-repeat;
    background-size: 89px auto;
	box-sizing: border-box; 
}
header{
	position: relative;
}
header .tri{
	background: #fff;
	height: 190px;
	width: 100%;
	position: absolute;
	bottom: -100px;
   	transform: skewY(3deg); 
    z-index: 20;
}
.hp-block{
	float: left;
	width: 50%;
	box-sizing: border-box;
	color: #fff;
}
.hp-st{
	text-align: right;
	padding: 48px 125px 0 0;
}
.hp-laser{
	padding: 48px 0 0 125px;
}
.bc{
	font: normal 48px 'HPSimplifiedLight', Arial;
	color: #4d4d4d;
	text-transform: uppercase;
	text-align: center;
	padding: 15px 0 150px 0;
	position: relative;
	z-index: 50;
}
.bc span{
	font: normal 48px 'HPSimplifiedRegular', Arial;
	color: #1a9cdc;
	text-transform: uppercase;
	border-bottom: 2px solid #1a9cdc;
}
.head .tlt{
	font: normal 48px 'HPSimplifiedRegular', Arial;
}
.head .tlt > span{
	font: normal 48px 'HPSimplifiedLight', Arial;
}
.head .hp-block > span{
	font: normal 20px 'HPSimplifiedLight', Arial;
}
.photos{
	height: 500px;
	position: relative;
	z-index: 2;
	margin-top: -50px;
}
.photos:before{
	content: '';
	position: absolute;
	left: 0;
	top: 20px;
    background: url("../i/bg-x.png") 0 0 repeat-x;
	width: 100%;
	height: 174px;
}
.photos .lft{
	height: 100%;
	width: 50%;
	float: left;
    background: url("../i/hp-smart-foto.jpg") 100% 0 no-repeat;
    background-size: cover;
}
.photos .rft{
	height: 100%;
	width: 50%;
	float: right;
    background: url("../i/hp-laser-foto.jpg") 0% 80% no-repeat;
    background-size: cover;
}
.har{
	background: #bcf2ff;
	padding: 50px 0;
	position: relative;
}
.har .tri{
	background: #bcf2ff;
	height: 520px;
	width: 100%;
	position: absolute;
	top: -40px;
   	transform: skewY(-3deg);
    z-index: 20;
}
.har .tri2{
	background: #ebfbff;
	height: 120px;
	width: 100%;
	position: absolute;
	top: -40px;
   	transform: skewY(3deg);
    z-index: 10;
}
.har .tri3{
	background: #bcf2ff;
	height: 120px;
	width: 100%;
	position: absolute;
	bottom: -50px;
   	transform: skewY(3deg);
    z-index: 10;
}
.har .wrapper{
	z-index: 50;
	position: relative;
}
.har .cont.smart .tlt{
	color: #1a9cdc;
}
.har .tlt{
	font: normal 34px 'HPSimplifiedRegular', Arial;
}
.har .cont.smart .tlt span{
	border-bottom: 2px solid #1a9cdc;
}
.har .tlt span{
	border-bottom: 2px solid #414144;
}

.har .tlt span span{
	font: normal 34px 'HPSimplifiedLight', Arial;
}
.har .tlt em{
	font: normal 24px 'HPSimplifiedLight', Arial;
	display: block;
}
.har .cont{
	width: 50%;
	float: left;
	font: normal 18px 'HPSimplifiedLight', Arial;
	color: #414144;
	box-sizing: border-box;
	padding: 20px 50px;
}
.har .cont ul{
	margin: 70px 0 0 92px;
	padding: 0;
}
.har .cont ul li{
	display: block;
	padding: 0 50 0px 0;
	margin: 30px 0;
	position: relative;
/*	min-height: 61px; */
	vertical-align: middle;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
}
.ico-01:before{
    background: url("../i/ico-01.png") 50% 50% no-repeat;
}
.ico-02:before{
    background: url("../i/ico-02.png") 50% 50% no-repeat;
}
.ico-03:before{
    background: url("../i/ico-03.png") 50% 50% no-repeat;
}
.ico-04:before{
    background: url("../i/ico-04.png") 50% 50% no-repeat;
}
.ico-05:before{
    background: url("../i/ico-05.png") 50% 50% no-repeat;
}
.ico-06:before{
    background: url("../i/ico-06.png") 50% 50% no-repeat;
}
.ico-07:before{
    background: url("../i/ico-07.png") 50% 50% no-repeat;
}
.ico-08:before{
    background: url("../i/ico-08.png") 50% 50% no-repeat;
}
.ico-09:before{
    background: url("../i/ico-09.png") 50% 50% no-repeat;
}
.har .cont ul li:before{
	content: '';
	position: absolute;
	left: -92px;
	top: 50%;
	margin-top: -30px;
	background-color: #636363;
	width: 65px;
	height: 61px;
}
.har .cont.smart ul li:before{
	background-color: #0096d6;
}
.har .cont.smart{
}
.wrapper{
	max-width: 1280px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	padding: 0 15px; 
}
.clr {
	clear: both;
	overflow: hidden;
	height: 0;
	font-size: 0; 
}
.video{
    background: url("../i/bg-video.jpg") 0 100% no-repeat;
	background-size: cover;
	min-height: 800px;
	padding: 100px 0 10px 0;
}
.vd{
	float: left;
	width: 50%;
	text-align: center;
	box-sizing: border-box;
	padding: 50px 0 0 0;
}
.vd h3{
	font: normal 34px 'HPSimplifiedRegular', Arial;
	color: #fff;
	padding: 30px 0 60px 0;
	margin: 0;
	text-shadow: 2px 2px 9px rgba(0,0,0,0.5);
}
.vd h3 span{
	font: normal 34px 'HPSimplifiedLight', Arial;
}
.vd.smart h3{
	color: #15b3f6;
}
.yt{
	border: 15px solid rgba(255,255,255,0.6);
	background-color: rgba(255,255,255,0.6); 
	display: inline-block;
	padding: 0;
	margin: 0 auto;
}
.smart .yt{
	border: 15px solid rgba(0,150,214,0.6);
	background-color: rgba(0,150,214,0.6); 
}
.yt iframe{
	padding: 0;
	margin: 0 auto;
	border: 0;
	display: inline-block;
}
.bcbtn {
	position: relative;
	z-index: 100;
}
.bcbtn h3{
	font: normal 48px 'HPSimplifiedLight', Arial;
	text-align: center;
	padding: 50px 0;
}
.load .tri{
	background: #fff;
	height: 150px;
	width: 100%;
	position: absolute;
	bottom: -120px;
   	transform: skewY(-2deg);
    z-index: 10;
}
.load{
    background: url("../i/bg-bottom.jpg") 0 100% no-repeat;
	background-size: cover;
	min-height: 800px;
	color: #fff;
	position: relative;
	padding: 50px 0 100px 0;
}
.load .box{
	float: left;
	width: 50%;
	font: normal 16px 'HPSimplifiedLight', Arial;
	padding: 500px 0 100px 0;
}
.load .box.smart{
	padding: 200px 0 100px 0;
}
.load .box .tlt{
    background: url("../i/tlt-2.png") 50% 50% no-repeat;
	width: 620px;
	height: 222px;
	box-sizing: border-box;
	padding: 90px 0 0 50px;
	color: #0096d6;
}
.load .box.smart .tlt{
    background: url("../i/tlt-1.png") 50% 50% no-repeat;
	width: 597px;
	height: 223px;
	color: #fff;
	padding: 90px 0 0 60px;
}
.load .box .tlt h3{
	font: normal 36px 'HPSimplifiedLight', Arial;
	padding: 0;
	margin: 0;
}
.load .box .tlt h3 span{
	font: normal 36px 'HPSimplifiedRegular', Arial;
}
.load .box .tlt h4{
	font: normal 30px 'HPSimplifiedRegular', Arial;
	padding: 0;
	margin: 0;
}
.inf{
	padding: 40px 70px 0 30px;
	line-height: 1.7;
}
.hpsmart{
	padding: 20px 0 0 0;
	background: #0096d6;
	color: #fff;
	position: relative;
}
.hpsmart h3{
	font: normal 36px 'HPSimplifiedLight', Arial;
	padding: 20px 0;
	margin: 0;
	text-align: center;
}
.hpsmart h3 span{
	font: normal 36px 'HPSimplifiedRegular', Arial;
	border-bottom: 2px solid #fff;
}
.hpsmart .pic{
    background: url("../i/hp-smart.jpg") 50% 50% no-repeat;
	width: 100%;
	height: 600px;
	position: relative;
}
.hpsmart .label{
	font: normal 18px 'HPSimplifiedLight', Arial;
	color: #fff;
	border-bottom: 2px solid #fff;
	position: absolute;
}
.hpsmart .label.left{
	text-align: right;
}
.hpsmart .label.left:before{
	right: auto;
	left: 0;
	bottom: 0;
}
.hpsmart .label.v{
	width: 310px;
}
.hpsmart .label.v:before{
	right: 0;
	left: auto;
	bottom: -65px;
	width: 6px;
	height: 65px;
}
.hpsmart .label.nop{
	border: none;
}
.hpsmart .label.nop:before{
	display: none;
}
.hpsmart .label:before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 65px;
	height: 4px;
	background: #fff;
}
.hpsmart .label span{
	display: block;
	width: 80%;
	padding: 0 0 15px 10px;
	box-sizing: border-box;
}
.hpsmart .label.left span{
	padding: 0 10px 15px 0;
	box-sizing: border-box;
	float: right;
}
.hpsmart .l-00{
	width: 578px;
	left: 370px;
	top: 70px;
}
.hpsmart .l-01{
	width: 378px;
	left: 20px;
	top: 190px;
}
.hpsmart .l-02{
	width: 378px;
	left: 40px;
	top: 330px;
}
.hpsmart .l-02-1{
	width: 378px;
	left: 40px;
	top: 380px;
}
.hpsmart .l-03{
	width: 362px;
	left: auto;
	top: 130px;
	right: 50px;
}
.hpsmart .l-04{
	width: 362px;
	left: auto;
	top: 330px;
	right: 50px;
}



.hplaser{
	padding: 50px 0 150px 0;
	position: relative;
}
.hplaser h3{
	font: normal 36px 'HPSimplifiedLight', Arial;
	padding: 20px 0;
	margin: 0;
	text-align: center;
}
.hplaser h3 span{
	font: normal 36px 'HPSimplifiedRegular', Arial;
	border-bottom: 2px solid #1a9cdc;
}
.hplaser .pic{
    background: url("../i/hp-ns-laser.jpg") 50% 50% no-repeat;
	width: 100%;
	height: 700px;
	position: relative;
}
.hplaser .l-01{
	width: 262px;
	left: 120px;
	top: 70px;
}
.hplaser .l-02{
	width: 362px;
	left: auto;
	top: 170px;
	right: 110px;
}
.hplaser .l-03{
	width: 360px;
	left: 80px;
	top: 420px;
}
.hplaser .l-04{
	width: 362px;
	left: auto;
	top: 360px;
	right: 110px;
}
.hplaser .l-05{
	width: 400px;
	left: 260px;
	top: 570px;
}

.hplaser .label{
	font: normal 18px 'HPSimplifiedLight', Arial;
	color: #1a9cdc;
	border-bottom: 2px solid #1a9cdc;
	position: absolute;
}
.hplaser .label.left{
	text-align: right;
}
.hplaser .label.left:before{
	right: auto;
	left: 0;
	bottom: 0;
}
.hplaser .label:before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 65px;
	height: 4px;
	background: #1a9cdc;
}
.hplaser .label span{
	display: block;
	width: 80%;
	padding: 0 0 15px 10px;
	box-sizing: border-box;
}
.hplaser .label.left span{
	padding: 0 10px 15px 0;
	box-sizing: border-box;
	float: right;
}
.hpsmart .tri{
	background: #0096d6;
	height: 200px;
	width: 100%;
	position: absolute;
	top: -70px;
   	transform: skewY(-2deg);
    z-index: 10;
}
.hpsmart .tri2{
	background: #0096d6;
	height: 200px;
	width: 100%;
	position: absolute;
	bottom: -70px;
   	transform: skewY(5deg);
    z-index: 10;
}
.hpsmart .wrapper{
	position: relative;
    z-index: 50;
}
.curl{
    background: url("../i/curl.png") 50% 0 no-repeat;
	width: 245px;
	height: 147px;
	position: absolute;
	left: 0;
	bottom: -50px;
	z-index: 100;
}