/* developer:Hausen version:1.0.0 */

/*reset*/
body,h1,h2,h3,ul,p{margin: 0;padding: 0;}
body{font: 12px/1.3 'Arial','Microsoft YaHei';}
a{color: #fff;text-decoration: none;}
img{border: none;}
li{list-style: none;}
video,object{display: block;}

/*common*/
.fl{float: left;}
.fr{float: right;}
.clearfix{zoom: 1;} 
.clearfix:after{display: block;clear: both;content: "";visibility: hidden;height: 0;} 

/*content common*/
.content-sub-nav{
	width: 1300px;
	margin: 0 auto;
	padding: 80px 0;
	border-bottom: 1px solid #41B7F4;
	text-align: center;
}
.content-sub-nav img{
	margin: 0 40px;
}

/*header*/
.header{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 199;
	width: 100%;
	background-color: #000;
	height: 45px;
	line-height: 45px;
	color: #fff;
}
.header-logo img{
	vertical-align: middle;
}
.header-nav li{
	position: relative;
	float: left;
	text-align: center;
	line-height: 1.7;
	padding: 3px 0;
	width: 90px;
}
.header-nav li:hover{
	background-color: #41B7F4;
}
.header-sub-nav{
	position: absolute;
	top: 45px;
	left: 0;
	background-color: #000;
	display: none;
}
.header-sub-nav li{
	padding: 10px 0;
}
.header-contact{
	position: relative;
	font-size: 16px;
}
.header-contact .icon-qrcode{
	margin-right: 30px;
}
.header-contact .icon-phone{
	margin-right: 5px;
}
.header-contact span{
	margin-right: 50px;
}
.header-contact img{
	position: absolute;
	left: 0;
	top: 45px;
	display: none;
}

/*footer*/
.foot{
	width: 100%;
	background: #222;
	padding: 20px 0;
}
.footer{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99;
	width: 100%;
	background: rgba(0,0,0,.6);
	background: #000\9;
	padding: 20px 0;
}
.foot p,
.footer p{
	color: #fff;
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
}

/*index*/
#particles{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	background: url(../images/particles.jpg);
}
.all-screen{
	width: 100%;
	height: 100%;
	position: relative;
}
.index-wrap{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 99;
	width: 1300px;
	height: 350px;
	margin: -175px 0 0 -650px;
	overflow: hidden;
}
.index-wel{
	position: relative;
	height: 100%;
	text-align: center;
}
.index-wel img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -23px 0 0 -240px;
}
.index-box{
	position: relative;
}
.index-summary{
	position: absolute;
	width: 350px;
	height: 310px;
	padding: 20px 15px;
	top: 0;
	left: -1000px;
	overflow: hidden;
	background-color: rgba(0,0,0,.5);
	background: #000\9;
	color: #fff;
	font-size: 14px;
	transition: left 0.4s linear 0.5s;
}
.index-summary p{
	margin-top: 12px;
	letter-spacing: 1px;
}
.index-nav{
	position: absolute;
	width: 120px;
	height: 350px;
	top: -1000px;
	left: 437px;
	overflow: hidden;
	background: rgba(255,255,255,.1);
	background: #000\9;
	transition: top 0.5s linear;
}
.index-nav li{
	margin-bottom: 1px;
}
.index-nav a{
	display: inline-block;
	width: 120px;
	height: 116px;
	line-height: 116px;
	transition: background-color 0.2s linear;
}
.index-nav a:hover{
	background: #41B7F4;
}
.index-nav img{
	vertical-align: middle;
}
.index-nav-con{
	position: absolute;
	width: 687px;
	height: 350px;
	top: 0;
	right: -1000px;
	overflow: hidden;
	transition: right 0.4s linear 0.5s;
}
.index-nav-video{
	height: 350px;
	text-align: center;
	transition: margin-top 0.3s linear;
}
.index-nav-video video{
	height: 116px;
}
.index-nav-design ul{
	margin-right: -21px;
}
.index-nav-design li{
	float: left;
	margin-right: 21px;
	height: 350px;
	position: relative;
}
.index-nav-design h2{
	position: absolute;
	left: 0;
	top: 0;
	width: 156px;
	height: 90px;
	line-height: 90px;
	text-align: center;
	color: #fff;
	background-color: #41B7F4;
}
.index-nav-paint li{
	float: left;
	margin-left: 15px;
	position: relative;
}
.index-nav-paint h2{
	position: absolute;
	left: 0;
	bottom: 20px;
	width: 100%;
	height: 30px;
	padding: 10px 0;
	line-height: 30px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	background: rgba(0,0,0,.5);
	background: #000\9;
}

/*video*/
.video-banner{
	padding-top: 45px;
}
.video-summary-tit{
	width: 1300px;
	margin: 0 auto;
	padding: 50px 0 100px 0;
	text-align: center;
}
.video-summary-tit h2{
	font-size: 36px;
	color: #999;
}
.video-summary-tit p{
	font-size: 20px;
	color: #ccc;
}
.video-a,
.video-b{
	width: 100%;
	position: relative;
}
.video-a video,
.video-b video{
	width: 100%;
}
.video-a object,
.video-b object{
	position: absolute;
	top: 0;
	width: 20.8%;
}
.video-a a,
.video-b a{
	position: absolute;
	display: block;
	z-index: 99;
	width: 31.2%;
	top: 0;
}
.video-a a img,
.video-b a img{
	display: block;
	width: 100%;
	height: 100%;
}
.video-a object{left: 0;}
.video-a a{right: 0;}
.video-b object{right: 0;}
.video-b a{left: 0;}

.video-main-box{
	margin: 50px auto 20px;
	width: 1300px;
}
.video-main-box li{
	float: left;
	width: 25%;
}
.video-main-box div{
	margin: 0 auto 50px;
	width: 245px;
	height: 330px;
	text-align: center;
	background-color: #f1ffff;
	border-bottom: 20px solid #41B7F4;
	overflow: hidden;
}
.video-main-box h2{
	color: #fff;
	padding: 20px 0;
	background-color: #41B7F4;
}
.video-main-box a{
	cursor: pointer;
}
.video-main-box h3{
	font-size: 14px;
	padding-top: 10px;
}
.video-main-box p{
	padding: 10px 20px 0;
	text-align: justify;
}

/*design*/
.design-body{
	background: url(../images/bg1.jpg) no-repeat fixed #000;
}
.design-index-box{
	margin: 110px auto 80px;
	width: 1300px;
	color: #fff;
}
.design-index-tit h1{
	text-align: center;
	font-size: 36px;
}
.design-index-main{
	margin-top: 80px;
}
.design-index-main li{
	width: 25%;
	height: 500px;
	text-align: center;
	float: left;
}
.design-index-main img{
	margin-top: 30px;
}
.design-index-main p{
	background-color: rgba(0,0,0,.5);
	background: #000\9;
	width: 70%;
	height: 200px;
	margin: 80px auto 0;
	padding: 30px;
	font-size: 14px;
	line-height: 24px;
	text-align: left;
}
.design-o-vi{
	background-color: rgba(20,137,151,0.70);
	background: #999\9;
}
.design-o-ui{
	background-color: rgba(247,166,0,0.70);
	background: #666\9;
}
.design-o-logo{
	background-color: rgba(168,51,138,0.70);
	background: #999\9;
}
.design-o-visio{
	background-color: rgba(0,175,182,0.70);
	background: #666\9;
}
.design-main-box{
	margin: 50px auto 20px;
	width: 1300px;
}
.design-img-box,
.design-txt-box{
	float: left;
	width: 250px;
	height: 250px;
	margin: 0 0 8px 8px;
}
.design-txt-left,
.design-txt-right{
	height: 100px;
	padding: 10px 16px;
	background-color: #fafafa;
}
.design-txt-right{
	text-align: right;
	margin-top: 10px;
}
.design-txt-left p,
.design-txt-right p{
	display: inline-block;
	font-size: 24px;
	color: #ccc;
	font-weight: normal;
	line-height: 1.5;
	padding-bottom: 5px;
	border-bottom: 1px solid #ededed;
}
.design-txt-left h2,
.design-txt-right h2{
	font-size: 16px;
	color: #666;
	margin-top: 15px;
}

/*cg-paint*/
.cg-body{
	background: url(../images/bg1.jpg) no-repeat fixed #000;
}
.cg-index-box{
	margin: 110px auto 80px;
	width: 1300px;
	color: #fff;
}
.cg-index-tit{
	margin-bottom: 75px;
}
.cg-index-tit h1{
	text-align: center;
	font-size: 36px;
}
.cg-index-box .fl,
.cg-index-box .fr{
	position: relative;
	margin: 0 80px;
}
.cg-index-box .fl p,
.cg-index-box .fr p{
	position: absolute;
	left: 0;
	bottom: 30px;
	width: 100%;
	text-align: center;
}
.cg-index-box .fl p{
	background-color: rgba(238,135,170,0.8);
	background: #000\9;
}
.cg-index-box .fr p{
	background-color: rgba(252, 121, 79,0.7);
	background: #000\9;
}
.cg-main-box{
	margin: 50px auto 20px;
	width: 1300px;
}
#cg-main{
	position: relative;
}
#cg-main li{
	width: 300px;
	border: 1px solid #dedede;
	cursor: pointer;
	padding: 2px;
}
#cg-main li img{
	width: 300px;
	display: block;
}
#cg-main .thumbs-sm{
	display: none;
}
/*news*/
.news-body{
	background: url(../images/newsbg.jpg) no-repeat fixed bottom #000;
}
.news-list-box,
.news-content-box{
	margin: 50px auto 100px;
	width: 940px;
	overflow: hidden;
}
.news-list-box h1,
.news-content-box h1{
	text-align: center;
	font-size: 24px;
	color: #fff;
	margin: 50px 0;
}
.news-list-box a{
	color: #fff;
}
.news-list-box ul,
.news-content-body{
	background: rgba(0,0,0,.4);
	background: #333\9;
	padding: 20px 30px 30px 30px;
}
.news-list-box li{
	font-size: 16px;
	padding:10px 0 10px 0;
	border-bottom: 1px solid #999;
	padding-left: 10px;
}
.news-list-box span{
	float: right;
	margin-right: 10px;
	color: #fff;
}
.news-pager{
	padding: 30px 0 10px;
	font-size: 14px;
	text-align: center;
}
.news-pager a{
	margin: 0 15px;
}
.news-info{
	text-align: center;
	font-size: 16px;
	color: #fff;
	margin-top: 15px;
}
.news-info span{
	margin: 0 20px;
}
.news-content{
	margin: 20px 0 10px 0;
	font-size: 16px;
	color: #fff;
	line-height: 1.8;
	text-align: justify;
}
.news-content a{
	color: #fff;
}

/*icon*/
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?xvrf1a');
	src:url('../fonts/icomoon.eot?xvrf1a#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.ttf?xvrf1a') format('truetype'),
		url('../fonts/icomoon.woff?xvrf1a') format('woff'),
		url('../fonts/icomoon.svg?xvrf1a#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {content: "\e900";}
.icon-home2:before {content: "\e901";}
.icon-home3:before {content: "\e902";}
.icon-office:before {content: "\e903";}
.icon-pencil2:before {content: "\e904";}
.icon-image:before {content: "\e905";}
.icon-play:before {content: "\e906";}
.icon-film:before {content: "\e907";}
.icon-video-camera:before {content: "\e908";}
.icon-file-picture:before {content: "\e909";}
.icon-qrcode:before {content: "\e90a";}
.icon-phone:before {content: "\e90b";}
.icon-location:before {content: "\e90c";}
.icon-location2:before {content: "\e90d";}
.icon-mail2:before {content: "\e90e";}