@charset "utf-8";
 
/*@font-face {
    font-family: PingFang SC;
    src:url('../fonts/PingFang.ttf');
}*/
html{
	width:100%; 
	height:100%;
}
body{
	background: #fff;
  color: #666;
  font-size: 16px;
	line-height:22px; 
	font-family:"PingFang SC";  
	width:100%; 
	height:100%;
	position:relative;
	letter-spacing: .5px
}
body, a, div, img, table, td, th, tr, ul, li, dl, dt, dd, h1, h2, h3, p {
	margin: 0; 
	padding: 0; 
	border: 0 none; 
	list-style:none; 
}
a:link, a:visited {
	text-decoration: none;
	color: #999;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}
a:hover, a:active {
	text-decoration: none;
	color: #fff;
	border: none;
	cursor: pointer;
/* 	background: #1C1E21; */
}
canvas{
	z-index: 1
}

/**
 * 首页
 */
/* .wrapper{
	background: url('../image/banner.jpg') top center / cover no-repeat;
	height: 100%;
	position: relative;
} */
.wrapper .head{
	overflow: hidden;
}
.wrapper .head .logo{
	float: left;
	margin: 20px 0 0 3%;
}
.wrapper .head .nav{
	float: right;
	overflow: hidden;
	margin-right: 3%;
}
.wrapper .head .nav>ul{
	overflow: hidden;
	float: left;
	padding-top:29px;
	font-size: 16px;
}
.wrapper .head .nav>ul>li{
	float: left;
	color: #fff;
	padding-left: 60px;
}
.wrapper .head .nav>ul>li>a{
	display: block;
}
.active>a{
	color: #fff;
}
.wrapper .head .nav .search-svg{
	float: right;
	padding: 32px 80px 0 80px; 
	width: 14px;
	height: 16px;
}
.wrapper .banner{
	position: absolute;
	top:84%;
	width: 100%;
	text-align: center;
}
.wrapper .banner .hello{
	height: 53px;
}
.wrapper .banner .welcome{
	margin-top:4%; 
}
.wrapper .banner .welcome>span{
	font-size: 20px;
	color: #999;
	font-weight: 300;
}
.drop{
	margin: 30px 0px;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}
.drop-cls{
	width: 0.8%;
}
.drop:hover{
	transform: translateY(6px);
}
.hello-svg{
	width: 100px;
	height: 53px;
}
.hello-cls-1 {
    fill: #fff;
    font-size: 44px;
    font-family: Impact;
}
.swear{
	background: #fff;
	line-height: 250px;
	text-align: center;
}
.swear>span{
	color: #1C1E21;
	font-size: 24px;
}
.footer{
	overflow: hidden;
	display: flex;
}
.footer .footer-left{
	flex:1;
	height: 400px;
	background: #1C1E21
}
.footer .footer-left .logo{
	margin:78px 0 0 171px; 
}
.footer .footer-left .defined{
	margin:68px 0 0 171px;
	font-size: 20px;
	color: #fff;
}
.footer .footer-left .defined{
	margin:68px 0 0 171px;
	font-size: 20px;
	color: #fff;
}
.footer .footer-left .record{
	color: #999;
	font-size: 14px;
	margin: 104px 0 0 171px;
}
.footer .footer-right{
	flex:1;
	height: 400px;
	background: #F8F8F8;
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer .footer-right>ul{
	overflow: hidden;
}
.footer .footer-right>ul>li{
	float: left;
	margin-left: 60px;
	cursor: pointer;
}
.footer .footer-right>ul>li .qq{
	width: 14px;
	height: 16px;
	display: block;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}
.footer .footer-right>ul>li .zcool{
	width: 17px;
	height: 17px;
	display: block;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}
.footer .footer-right>ul>li  .wechat{
	width: 22px;
	height: 16px;
	display: block;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}
.footer .footer-right>ul>li svg:hover{
	opacity: .5;
}
.logo-svg{
	width: 100px;
	height: 40px;
}
.logo-cls-1 {
    fill: #fff;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
 }
.search-cls-1, .search-cls-3 {
    fill: none;
}
.search-cls-1 {
	stroke: #999;
}
.search-cls-2 {
	stroke: none;
}
/**
 * 公共
 */

.index-header{
	width: 100%;
	height: 80px;
	overflow: visible;
	z-index: 10000;
	position: fixed;         
  left:0;
  top: 0;
  transition: top 0.5s;
}
.index-header .logo{
	float: left;
	margin: 20px 0 0 2%;
}
.index-header .nav{
	float: right;
	height: 80px;
	overflow: hidden;
	margin-right: 3%;
}
.index-header .nav>ul{
	float: left;
	overflow: hidden;
	padding-top:29px;
	font-size: 16px;
}
.index-header .nav>ul>li{
	float: left;
	color: #fff;
	padding-left: 60px;
}
.index-header .head .nav>ul>li>a{
	display: block;
}
.index-header .nav .search-svg{
	float: right;
	padding: 32px 80px 0 80px; 
	width: 14px;
	height: 16px;
}


.header{
	width: 100%;
	background: #1C1E21;
	height: 80px;
	overflow: visible;
	z-index: 10000;
	position: fixed;         
  left:0;
  top: 0;
  transition: top 0.5s;
}
.header .logo{
	float: left;
	margin: 20px 0 0 2%;
}
.header .nav{
	float: right;
	height: 80px;
	overflow: hidden;
	margin-right: 3%;
}
.header .nav>ul{
	float: left;
	overflow: hidden;
	padding-top:29px;
	font-size: 16px;
}
.header .nav>ul>li{
	float: left;
	color: #fff;
	padding-left: 60px;
}
.header .head .nav>ul>li>a{
	display: block;
}
.header .nav .search-svg{
	float: right;
	padding: 32px 80px 0 80px; 
	width: 14px;
	height: 16px;
}
.nav-son{
	margin-top: 80px;
	height: 54px;
	width: 100%;
	box-shadow: 0px 5px 5px #f8f8f8;
}
.nav-son-box{
	margin: auto;
	width: 1170px;
	overflow: -webkit-paged-x;
	padding-top: 12px;
	height: 54px;
}
.nav-son-box>ul>li{
	float: left;
	background: #fff;
    padding: 4px 16px;
    margin-right: 20px; 
}
.nav-son-box>ul>li>a{
	font-size: 14px;
	color: #999;
	display: block;
}
.nav-son-box>ul>li>a:hover{
	color: #1C1E21;
}
.nav-son-box>ul>li.active{
	background: #1C1E21;
}
.nav-son-box>ul>li.active>a{
	color: #fff;
}
/* .footer-list{
	margin-top: 100px;
	background: #F8F8F8; 	
}
.footer-list .footer-wrap{
	width: 1170px;
	height: 60px;
	margin: auto;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.footer-list .footer-wrap>ul{
	overflow: hidden;
	margin-right: 292px;
}
.footer-list .footer-wrap>ul>li{
	float: left;
	margin-right: 30px;
}
.footer-list .footer-wrap>span{
	color: #BBBBBB;
	font-size: 14px;
}
.footer-list .footer-wrap>ul>li .qq{
	width: 14px;
	height: 16px;
	display: block;
}
.footer-list .footer-wrap>ul>li .zcool{
	width: 17px;
	height: 17px;
	display: block;
}
.footer-list .footer-wrap>ul>li .wechat{
	width: 22px;
	height: 16px;
	display: block;
}
.f-cls1{
	fill: #ccc;
	transition: all 1s cubic-bezier(.2, .5, .3, 1);
}
.footer-list .footer-wrap>ul>li svg:hover .f-cls1{
	fill: #000;
} */

/*
**************************
FOOTER
**************************
*/

#footer-box{height:150px; margin-top:75px;}

footer{
  background: #1c1e21;
  width:100%;
  margin-top:60px;
  overflow:hidden;
  position:relative;
  z-index:10;
}

.footer-margin{
  width:1200px;
  margin: 0px auto;
}

#footer-left{text-align:left;}

.copyright{
  color: #444;
  font-size: 12px;
  width: 100%;
  text-align:center;
  float: left;
	line-height: 60px;
	height: 60px;
	background-color: #141619;
}

.footer-margin .social-footer{
  width: 100%;
  text-align:center;
  float: left;
	margin: 60px 0 15px 0;
}

.footer-margin .social-footer a{
  font-size:16px;
  color:#fff;
  padding: 0 20px;
}

.footer-margin .social-footer a:hover{
  color:#999;
}

.footer-margin .friend-link{
	width: 100%;
	text-align: center;
	float: left;
	margin: 15px 0 60px 0;
}

.footer-margin .friend-link a{
	color: #999;
	font-size: 12px;
	padding: 0 15px;
}

.footer-margin .friend-link a:hover{
	color: #fff;
}


/**
 * 文章
 */
.content-article{
	width: 1170px;
	margin: auto;
	margin-top: 6px;
}
.content-article .list{
    border-bottom: 1px dashed #eaeaea;
    padding-top: 30px;
}
.content-article .list .title{
	border-left: 4px solid #ccc;
	margin-bottom: 20px;
	padding-left: 20px;
	transition:  all .5s cubic-bezier(.2, .5, .3, 1);
}
.content-article .list .title:hover{
	border-color: #1C1E21;
}
.content-article .list .title>a{
	font-size: 20px;
	display: inline-block;
	color: #1C1E21;
	line-height: 28px;
/* 	margin-left: 30px; */ 
}
.content-article .list .title>a:hover{
	text-decoration: underline;
/* 	background: none; */
}
.content-article .list .parameter{
	margin-bottom: 30px;
	padding-left: 24px;
}
.content-article .list .parameter .time{
	font-size: 14px;
	color: #999;
	margin-right: 20px;
	vertical-align: top;
}
.content-article .list .parameter .num{
	font-size: 14px;
	color: #999;
	margin-right: 20px;
	vertical-align: top;
	height: 20px;
}
.content-article .list .parameter svg{
	padding-right: 6px;
	padding-top: 4px;
	width: 14px;
	height: 14px;
}
.time-cls-1, .time-cls-3 {
	fill: none;
}
.time-cls-1 {
	stroke: #ccc;
}
.time-cls-2 {
	stroke: none;
}
/**
 * 作品
 */
.content-works{
	margin: auto;
	width: 1200px;
	margin-top: 30px;
}
.content-works>ul{
	overflow: hidden;
}
.content-works>ul>li{
	float: left;
	margin: 6px 15px 30px 15px;
}
.content-works>ul>li>a{
	display: inline-block;
}
.content-works>ul>li>a>img{
	width: 370px;
	display: block;
	margin-bottom: 20px;
/* 	border-radius:4px; */
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}
.content-works>ul>li>a>img:hover{
	box-shadow: 0px 5px 30px rgba(0,0,0,0.05);
	-webkit-box-shadow: 0px 5px 30px rgba(0,0,0,0.05);
	transform: translateY(-6px);
	opacity: 0.6;
}
/* .content-works>ul>li:hover img{
	opacity: .7;
} */
.content-works>ul>li>a>p{
	color: #999;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
    font-family: inherit;
}
/**
 * 手册
 */
.content-manual{
	margin: auto;
	width: 1170px;
}
.content-manual .items{
	display: inline-block;
  width: 100%;
  margin-top: 16px;
}
.content-manual .items h2 {
    padding: 30px 0;
    border-bottom: 1px solid #cccccc;
    font-size: 20px;
    color: #1C1E21;
    font-weight: 500;
}
.content-manual .list li {
    padding: 30px 0;
    border-bottom: 1px dashed #eaeaea;
    display: inline-block;
    width: 100%;
}
.content-manual .list h3 {
    float: left;
    font-size: 16px;
    font-weight: normal;
		color:#999;
}
.content-manual .list p {
    float: right;
		font-size: 16px;
		color:#1e1c21;
}
kbd {
    padding: 4px 6px;
    border-radius: 3px;
    color: #fff;
    background: #1C1E21;
		font-family: PingFang SC;
}
/**
 * 工具
 */
.content-tool{
	margin: auto;
	width: 1200px;
	margin-top: 30px;
	overflow: hidden;
}
.content-tool .list{
	width: 360px;
	margin: 6px 15px 30px 15px;
	text-align: center;
	float: left;
	border-top: 3px solid #fff;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
	box-shadow: 0px 5px 30px rgba(0,0,0,0.05);
	-webkit-box-shadow: 0px 5px 30px rgba(0,0,0,0.05);
}
.content-tool .list:hover{
	border-top: 3px solid #1C1E21;
	box-shadow: 0px 15px 30px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 15px 30px rgba(0,0,0,0.1);
	transform: translateY(-6px);
}
.content-tool .list:hover span{
	background: #1C1E21;
	color: #fff;
}
/* .content-tool .list img{
	width: 120px;
	height: 120px;
	margin: 60px 0;
} */
.content-tool .list h2{
	font-size: 20px;
	color: #1C1E21;
	height: 28px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.content-tool .list p{
	height: 44px;
	font-size: 14px;
	color: #999999;
	margin: 10px 32px;
	overflow: hidden;
	text-overflow: ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.content-tool .list span{
	display: inline-block;
	border: 1px solid #1c1e21;
	font-size: 14px;
	color: #1C1E21;
	margin-top: 52px;
	padding: 6px 20px;
	margin-bottom: 40px;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}

/**
 * biliii
 */
.content-biliii{
	margin: auto;
	width: 1200px;
	margin-top: 30px;
	overflow: hidden;
}
.content-biliii .list{
	width: 360px;
	margin: 6px 15px 24px 15px;
	text-align: center;
	float: left;
	border-top: 3px solid #fff;
	background-color: #f8f8f8;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}
.content-biliii .list:hover{
	border-top: 3px solid #1C1E21;
	box-shadow: 0px 15px 30px rgba(0,0,0,0.05);
  -webkit-box-shadow: 0px 15px 30px rgba(0,0,0,0.05);
	background-color: #fff;
	transform: translateY(-6px);
}
.content-biliii .list h2{
	font-size: 18px;
	color: #1C1E21;
	margin: 30px 32px 6px 32px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.content-biliii .list p{
	font-size: 14px;
	color: #999999;
	margin: 6px 32px 30px 32px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}


.detail-header{
	width: 100%;
	height: 80px;
	background-color: #fff;
	position: fixed;         
    left:0;
    top: 0;
    transition: top 0.5s;
		box-shadow: 0px 5px 5px #f8f8f8;
		-webkit-box-shadow: 0px 5px 5px #f8f8f8;
}
.detail-header .navs{
	width: 1200px;
	margin: auto;
	position: relative;
}
.detail-header .navs>a{
	float: left;
	display: block;
	width: 86px;
	height: 34px;
	border: 1px solid #1C1E21;
	text-align: center;
	margin-top: 22px;
}
.detail-header .navs>a .left-svg{
	margin-top: 13px;
	cursor: pointer;
	width: 16px;
	height: 8px;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}
.detail-header .navs>a:hover{
	background: #1c1e21;
}
.detail-header .navs>a:hover .left-svg{
	fill: #fff;
	transform: translateX(-6px);
}
.detail-header .navs>a:hover .left-cls-1{
	fill: #fff;
}
.left-cls-1 {
    fill: #1c1e21;
}
.detail-header .navs>ul{
	float: right;
	font-size: 14px;
}
.detail-header .navs>ul>li{
	float: left;
	text-align: center;
	line-height: 34px;
	margin-top: 22px;
}
.detail-header .navs>ul .online{
	background-color: #1C1E21;
	margin-right: 20px;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}
.detail-header .navs>ul .online>a{
	display: block;
	color: #ffffff;
	width: 86px;
	height: 34px;
	border: 1px solid #1C1E21;
}
.detail-header .navs>ul .online:hover{
	background-color: #5f6063;
}
.detail-header .navs>ul .phone{
	background-color: #ffffff;
	transition: all .5s cubic-bezier(.2, .5, .3, 1);
}
.detail-header .navs>ul .phone>a{
	display: block;
	color: #1C1E21;
	width: 86px;
	height: 34px;
	border: 1px solid #1C1E21;
}
.detail-header .navs>ul .phone:hover{
	background-color: #1c1e21;
}
.detail-header .navs>ul .phone:hover >a{
	color: #fff;
}
.detail-title{
	text-align: center;
    width: 1200px;
    margin: auto;
    font-size: 32px;
/*    height: 45px; */
    line-height: 45px;
    margin-top: 140px;
    font-weight:500;
	color:#0e1113;
}
.detail-time{
	text-align: center;
  width: 1200px;
  margin: auto;
/* 	height:20px; */
	font-size:14px;
	color:rgba(153,153,153,1);
	margin-top: 20px;
}
.detail-time .time{

}
.detail-time .num{
	margin-left: 20px;
}
.detail-time svg{
	padding-right: 6px;
	padding-top: 4px;
	width: 14px;
	height: 14px;
}
.detail-desc{
/* 	height:90px; */
	font-size:16px;
	line-height:32px;
	text-align: center;
  width: 1200px;
  margin: auto;
  color:rgba(102,102,102,1);
  margin-top: 30px;
}

#editor{
	max-width: 100%;
	margin: 0 auto;
	background: #ffffff;
	overflow: hidden;
}
.drop-cls-1 {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
}


.hide{
    top: -90px;
}



/**
 * 首页solar特效
 */

/* 			*,
			*:before,
			*:after {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			} */



			




			
			.boxed-m{
			  position:fixed;
			  width:100%;
			  margin:0 auto;
			  height:80px;
			  z-index:9999;
				overflow: initial;
			  -webkit-transition: background 0.2s ease-in;
				-moz-transition: background 0.2s ease-in;
				-ms-transition: background 0.2s ease-in;
				-o-transition: background 0.2s ease-in;
				transition: background 0.2s ease-in; 
				box-shadow: 0px 2px 10px rgba(0,0,0,0.03);
				-webkit-box-shadow: 0px 2px 10p rgba(0,0,0,0.03);
			}
			
			.nav-span{
			  font-size:30px;
			  cursor:pointer;
				margin-top:28px;
				color: #fff;
			} 
			
			
			.header .boxed-m .header-margin-m{
			  width:1140px;
			  margin:0 auto;
			}
			
			.index-header .boxed-m .header-margin-m{
				width:1140px;
				margin:0 auto;
			}
			
			
			.sidenav {
					height: 100%;
					width: 0;
					position: fixed;
					z-index: 10001 !important;
					top: 0;
					right: 0;
					background-color: #1C1E21;
					overflow-x: hidden;
					transition: 0.5s;
					padding-top: 60px;
			}
			
			.sidenav a {
					padding: 40px 8px 20px 32px;
					text-decoration: none;
					font-size: 20px;
					color: #999;
					display: block;
					transition: 0.5s;
			}
			
			.sidenav a:hover, .offcanvas a:focus{
					color: #fff;
			}
			
			.sidenav .closebtn {
					top: 0;
					right: 25px;
					font-size: 36px;
			}