*{margin: 0;padding: 0;}
body{font-family: "Microsoft YaHei", "微软雅黑", "黑体", "宋体", Arial, sans-serif;}
a{text-decoration: none;}
ol,ul{list-style: none;}

.header{height:100px;}
.fl{ float:left;}
.fr {
    float: right;
}
body {
    background: url(images/headbg2.jpg) 0 0 repeat-x;
}
.header .logo{width:119px;height:90px;}
.header .headt{width:401px;height:90px;}
.header .auth{width:455px;height:55px;padding-top:35px;}
.header .auth ul li{width:60px;height:50px;float:left;margin-right:5px;}
.header .auth ul li img{display:block;margin:0 auto;}
.header .auth ul li span{font-size:14px;color:#333;display:block;width:60px;height:25px;line-height:25px;font-family:"微软雅黑";text-align:center;}

/* end */


/* 进度条 */
#bbx{
	position: absolute;
margin: 100px auto;
width: 300px;
height: 30px;
top: 11%;
left: 17%;
color: #fff;
font-size: 32px;
z-index: 999;
}
#range{

	position:absolute;
	height:30px;
	top:0px;
	left:0px;

	
}
#percent{
	position:absolute;
	left:310px;
	top:0;
	
}

/* end */
#deo{
    width: 100%;
    height: 580px;
	object-fit: cover; 
	position: absolute;
	top: 0;
	left: 0;
}
#testCanvas{
    z-index: 999;
    height: 570px !important;
    width: 100%;
}
.vid2{
    width: 100%;
    height: 570px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.home{
    position: absolute;
    width: 83px;
    height: 27px;
    border-radius: 10px;
    background: url('img/img1.jpg')no-repeat;
    top: 7%;
    left: 82.5%;
    text-align: center;
    z-index: 999;
}
.home:hover{
    background: url('img/img3.jpg')no-repeat;
}
.pro-bj{
    display: block;
    margin:0 auto;
    width: 100%;
    height: 570px;
}

.pro-img2{
    display: block;
    margin:0 auto;
    width: 100%;
    height: 580px;
}
.prok li a {
    display: block;
    width: 100%;
    height: 100%;
}
.prodoctimg{
    position: relative;
    width: 1030px;
    height: auto;
    margin: 0 auto;
}
.footer{height:100px;background:url(img/foot-bg.jpg) 0 0 no-repeat;border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;color:#595757;margin-bottom:40px;text-align:center;line-height:70px;}
.footer span{font-size: 12px; text-align:center;margin-top:10px;}
.w1030 {
    width: 1030px;
}
.auto {
    margin-left: auto;
    margin-right: auto;
}
/* 播放控件隐藏 */

	video::-webkit-media-controls{
    display:none !important;
}
/* end */
.dz{
    width: 334px;
    display: flex;
    z-index: 999;
    margin: 0 auto;
    position: absolute;
    top: 81%;
    left: 28%;
    justify-content: space-between;
    /*! height: 84px; */
}
.box-dzz p:nth-of-type(1){
    font-size: 26px;
    line-height: 26px;
    margin-top: 27px;
    color: rgb(77, 77, 77);
    font-weight: bold;
}
.box-dzz p:nth-of-type(2){
    font-size: 12px;
    line-height: 20px;

    color: rgba(77, 77, 77);
    font-weight: bold;
    text-align: center;
}
#product{ 
    width: 100%;
    height: 550px;
    margin: 0 auto;
}
.prok li{
    position: absolute;
}

.prok li:nth-of-type(1){
    width: 30px;
    height: 30px;
    top: 51%;
    left: 46.5%;
}
.prok li:nth-of-type(2){
    width: 30px;
    height: 30px;
    top: 51%;
    left: 53.5%;
}
.prok li:nth-of-type(3){
    width: 30px;
    height: 30px;
    top: 51%;
    left: 61.5%;
}
.prok li:nth-of-type(4){
    width: 30px;
    height: 30px;
    top: 55%;
    left: 76.5%;
}
.prok li:nth-of-type(5){
    width: 30px;
    height: 30px;
    top: 55%;
    left: 79.5%;
}
.prok li:nth-of-type(6){
    width: 30px;
    height: 30px;
    top: 55%;
    left: 83.5%;
}

.prok li:nth-of-type(7){
    width: 30px;
    height: 30px;
    top: 48%;
    left: 21.5%;
}
.prok li:nth-of-type(8){
    width: 30px;
    height: 30px;
    top: 54%;
    left: 21.5%;
}
.prok li:nth-of-type(9){
    width: 30px;
    height: 30px;
    top: 57%;
    left: 33%;
}
.prok li:nth-of-type(10){
    width: 30px;
    height: 30px;
    top: 53%;
    left: 38.5%;
}
.prok li:nth-of-type(11){
    width: 30px;
    height: 30px;
    top: 58%;
    left: 46.5%;
}
.prok li:nth-of-type(12){
    width: 30px;
    height: 30px;
    top: 58%;
    left: 59.5%;
}
.prok li:nth-of-type(13){
    width: 30px;
    height: 30px;
    top: 58%;
    left: 68.5%;
}
.prok li:nth-of-type(14){
    width: 30px;
    height: 30px;
    top: 60%;
    left: 77%;
}
.prok li:nth-of-type(15){
    width: 30px;
    height: 30px;
    top: 60%;
    left: 81%;
}
.prok li:nth-of-type(16){
    width: 30px;
    height: 30px;
    top: 60%;
    left: 85.5%;
}

.prok li:nth-of-type(17){
    width: 30px;
    height: 30px;
    top: 62%;
    left: 13.5%;
}
.prok li:nth-of-type(18){
    width: 30px;
    height: 30px;
    top: 64%;
    left: 20.5%;
}
.prok li:nth-of-type(19){
    width: 30px;
    height: 30px;
    top: 67%;
    left: 26.5%;
}
.prok li:nth-of-type(20){
    width: 30px;
    height: 30px;
    top: 68%;
    left: 34.5%;
}
.prok li:nth-of-type(21){
    width: 30px;
    height: 30px;
    top: 70%;
    left: 44.5%;
}
.prok li:nth-of-type(22){
    width: 30px;
    height: 30px;
    top: 70%;
    left: 56.5%;
}
.prok li:nth-of-type(23){
    width: 30px;
    height: 30px;
    top: 69%;
    left: 65.5%;
}
.prok li:nth-of-type(24){
    width: 30px;
    height: 30px;
    top: 69%;
    left: 73.5%;
}
.prok li:nth-of-type(25){
    width: 30px;
    height: 30px;
    top: 66%;
    left: 83.5%;
}
.prok li:nth-of-type(26){
    width: 30px;
    height: 30px;
    top: 65%;
    left: 87.5%;
}
.box-z{
    position: absolute;
    left: 8%;
    top: 28%;
    z-index: 999;
}
.box-y{
    position: absolute;
    left: 13%;
    top: 28%;
    z-index: 999;
}
/* end */
.box-navigation{
    width: 1030px;
    margin: 0 auto;
    height: 50px;
}
.box-navigation ul li{
    width: 147px;
    height: 50px;
    line-height: 50px;
    float: left;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: url(img/navlibg2.jpg) 0 0 no-repeat;
}
.box-navigation ul li a:hover {
    background: url(img/lihov2.jpg) 0 0 no-repeat;
}
.box-navigation ul li a{
    color: #fff;
    display: block;
    width: 147px;
    height: 50px;
    color: #fff;
}
.b1{
    width: 20px;
    height: 20px;
}
/* 3D旋转产品展示 */
#box{
   width: 100%;
   height: 570px;
   background-color: #fff;
}


/*  */
.container1{
    position: relative;
    width: 100%;
    height: 570px;
    margin: 0 auto;
    /*溢出隐藏，即只显示第一个图*/
    overflow: hidden;
}
.container1 ul{
    position: absolute;
    width: 100%;
    height: 100%;
    list-style: none;
}

.lbtn{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0px;
    top: 40%;
      z-index: 999;
}
.rbtn{
    position: absolute;
    width: 100px;
    height: 100px;
    right: 0px;
    top: 40%;
    z-index: 999;
}
/*  */
.l {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0px;
    top: 40%;
    z-index: 999;
  }
  .r{
    position: absolute;
    width: 100px;
    height: 100px;
    right: 0px;
    top: 40%;
    z-index: 999;
}