/*pc*/
.function{
	width: 6%;
	background-color: #C1BEC1;
	position: fixed;
	right: 0;
	text-align: center;
}
.function ul{
	position: absolute;
	left: 50%;
	margin-left: -30px;
}
.function ul li {
	width: 60px;
	color: #fff;
	margin-top: 30px;
}
.function ul li p{
	width: 60px;
	height: 60px;
	border-radius: 20px;
}
.function ul li p i{
	margin-top: 6px;
	background-size: cover;
	display: inline-block;
	width: 48px;
	height: 48px;
}
.function ul .index p i{
	background: url(../images/model/fun1.png) 0 0 no-repeat;
}
.function ul .audio p i{
	background: url(../images/model/fun2.png) 0 0 no-repeat;
}
.function ul .video p i{
	background: url(../images/model/fun3.png) 0 0 no-repeat;
}
.function ul .xinxi p i{
	background: url(../images/model/fun4.png) 0 0 no-repeat;
}
.function ul .rotate p .dong{
	background: url(../images/model/fun7.png) 0 0 no-repeat;
}
.function ul .rotate p .ting{
	background: url(../images/model/fun8.png) 0 0 no-repeat;
}
.function ul .fenxiang p i{
	background: url(../images/model/fun6.png) 0 0 no-repeat;
}
.function ul li:hover p{
	background-color: #fff;
	border-radius: 20px;
}
.function ul .index:hover p i{
	background: url(../images/model/funbgc1.png) 0 0 no-repeat;
}
.function ul .audio:hover p i{
	background: url(../images/model/funbgc2.png) 0 0 no-repeat;
}
.function ul .video:hover p i{
	background: url(../images/model/funbgc3.png) 0 0 no-repeat;
}
.function ul .xinxi:hover p i{
	background: url(../images/model/funbgc4.png) 0 0 no-repeat;
}
.function ul .rotate:hover p .dong{
	background: url(../images/model/funbgc7.png) 0 0 no-repeat;
}
.function ul .rotate:hover p .ting{
	background: url(../images/model/funbgc8.png) 0 0 no-repeat;
}
.function ul .fenxiang:hover p i{
	background: url(../images/model/funbgc6.png) 0 0 no-repeat;
}
/*m*/
.mfunction{
	width: 100%;
	background-color: #C1BEC1;
	position: fixed;
	bottom: 0;
	text-align: center;
	height: 40px;
}
.mfunction ul{
	position: absolute;
	left: 50%;
	margin-left: -120px;
}
.mfunction ul li {
	width: 30px;
	height: 30px;
	color: #fff;
	margin: 5px;
	float: left;
}
.mfunction ul li p{
	width: 30px;
	height: 30px;

}
.mfunction ul li p i{
	width: 30px;
	height: 30px;
	
	display: inline-block;
}
.mfunction ul .index p i{
	background: url(../images/model/fun1.png) 0 0 no-repeat;
	background-size: cover;
}
.mfunction ul .audio p i{
	background: url(../images/model/fun2.png) 0 0 no-repeat;
	background-size: cover;
}
.mfunction ul .video p i{
	background: url(../images/model/fun3.png) 0 0 no-repeat;
	background-size: cover;
}
.mfunction ul .xinxi p i{
	background: url(../images/model/fun4.png) 0 0 no-repeat;
	background-size: cover;
}
.mfunction ul .rotate p .dong{
	background: url(../images/model/fun7.png) 0 0 no-repeat;
	background-size: cover;
}
.mfunction ul .rotate p .ting{
	background: url(../images/model/fun8.png) 0 0 no-repeat;
	background-size: cover;
}
.mfunction ul .fenxiang p i{
	background: url(../images/model/fun6.png) 0 0 no-repeat;
	background-size: cover;
}

/**/
.jingpinfuncontent{
	position: relative;
}
.jingpinfuncontent .bgc{
	z-index: 1;
	overflow-y: hidden;
}
/*视频*/
.jingpinfuncontent .video{
	width: 101%;
	height: 100%;
	background-color: #ddd;
	position: absolute;
	z-index: 2;
	display: none;
}
.jingpinfuncontent .video video{
	position: absolute;
	left: 50%;
	margin-left :-35%;
	margin-top:150px;
	z-index: 3;
	width:70%;
}
.jingpinfuncontent .video .bgc{
	width: 100%;
	background-color: #000;
	opacity: 0.8;
}
.jingpinfuncontent .video .bgc button{
	border-radius: 50%;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	position: absolute;
	right: 30px;
	top: 30px;
	background-color: #fff;
	color: #000;
	border: none;
}
/*图文*/
.jingpinfuncontent .text{
	width: 100%;
	height: 100%;
	background-color: #ddd;
	position: absolute;
	z-index: 2;
	display: none;
}
.jingpinfuncontent .text .con{
	width: 80%;
	position: absolute;
	left: 50%;
	margin-left:-40%;
	margin-top:150px;
	z-index: 3;
	color: #000;
	font-size: 14px;
	padding: 5px;
	background-color: #fff;
}
.jingpinfuncontent .text .con img{
	/*width: 100%;*/
	width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
	margin-bottom: 10px;
}
.jingpinfuncontent .text .con .txt{
	text-indent: 28px;
	display: block;
	font-size: 14px;
	overflow: scroll;
}
.jingpinfuncontent .text .bgc{
	width: 100%;
	background-color: #000;
	opacity: 0.8;

	
}
.jingpinfuncontent .text .bgc button{
	border-radius: 50%;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	position: absolute;
	right: 30px;
	top: 30px;
	background-color: #fff;
	color: #000;
	border: none;
}
/*版权*/
.jingpinfuncontent .banquan{
	position: fixed;
	bottom: 60px;
	right: 8%;
}
.jingpinfuncontent .banquan p{
	font-size: 12px;
	color: #fff;
	background-color: #000;
	opacity: 0.5;
	padding: 5px; 
	border-radius: 7px;
}
/*分享*/
.jingpinfuncontent .QR{
	width: 100%;
	height: 100%;
	background-color: #ddd;
	position: absolute;
	z-index: 2;
	display: none;
}
.jingpinfuncontent .QR .ma{
	position: absolute;
	left: 50%;
	margin-left:-120px;
	margin-top:200px;
	z-index: 3;
	color: #000;
	text-align: center;
	font-size: 20px;
	padding: 20px;
	background-color: #fff;
}
.jingpinfuncontent .QR .bgc{
	width: 100%;
	background-color: #000;
	opacity: 0.8;
}
.jingpinfuncontent .QR .bgc button{
	border-radius: 50%;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	position: absolute;
	right: 30px;
	top: 30px;
	background-color: #fff;
	color: #000;
	border: none;
}

#app{
		  width: 100%;
		  height: 100%;
		  background: radial-gradient(circle, #fff 10%, #666);;
		  overflow-x: hidden;
	   	  overflow-y: hidden;
		}
		canvas{
		  width: 100% !important;
		  height: 100% !important;
		}
		#app .bgc{
		  width: 100%;
		  height: 100%;
		  position: fixed;
		  z-index: 2;
		  /*background: url(images/niubgc.png) center center no-repeat;*/
		  /*background-size: cover;*/
		}
		#app .bgc:after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		left:0;
		top:0;
		background: inherit;
		filter: blur(20px);
		z-index: 3;
		}
		#app .bgc .progress{
		  margin: 200px auto;
		}
		#app .modelprogress{
		  width: 50%;
		  height: 40px;
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  margin-top: -10px;
		  margin-left: -25%;
		  z-index: 4;
		  text-align: center;
		}
		#app .modelprogress .progresscontent{
		  width: 100%;
		  height: 5px;
		  border-radius: 2.5px;
		  background-color: #fff;
		}
		#app .modelprogress .progresscontent .con{
		  width: 10%;
		  height: 5px;
		  border-radius: 2.5px;
		  background-color: #666;
		}
		#app .modelprogress .text{
		  font-size: 14px;
		  line-height: 20px;
		  color: #000;
		}