/* index page */
#onload,.mv_bg,.mv_mask{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#onload{
	z-index: 999;
	position: fixed;
}
.box{
	z-index: 888;
	width: 100%;
}
.mv_bg{z-index: 1;}
.mp4{position: fixed;z-index: 1;}
.mv_mask{position: fixed;z-index: 2;background: url(../img/mv_mask_bg.png) repeat;}
.nav_logo{
	width: 65px;
	height: 65px;
	top: 50%;
	left: 10px;
	margin-top: -25px;
	z-index: 111;
	background: rgba(255,255,255,0.95);
	border-radius: 50px;
	-webkit-border-radius: 50px;
}
.logoAnimate{animation: logo 1s linear;-webkit-animation: logo 1s linear;}
.nav_logo img{;margin: auto;}

/*banner begin*/
.banner{width: 810px;height: 460px;overflow: hidden;}
.bannerWidth{width:810px;}
.swiper-pagination-bullet-active{background-color:#f3c800 ;}
.banner-pagination.swiper-pagination-clickable{margin-top: -18px;z-index: 999;right: 0;}
.banner-pagination .swiper-pagination-bullet{width: 15px;height: 5px;border-radius: inherit;margin: 0 3px;}
.banner_rt_Width{width: 375px;}
.banner_rt_com{height: 225px;}
.banner_two_top{margin-top: 10px;}
/*banner end*/

/*server begin*/
.server{height: 150px;}
.server>.box{
	width: 110%;
}
.server_fun{
	width: 285px;
	height: 150px;
	overflow: hidden;
	position: relative;
	margin-right: 19.5px;
	}
.server_fun:before{
	position:absolute;
	content:'';
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: -1;
	filter:contrast(100%) blur(0px);
	-webkit-filter:contrast(100%) blur(0px);
	transition: all ease-in-out 1s;
	-webkit-transition: all ease-in-out 1s;
}
.server_fun:hover:before{
	transform: scale(1.3) rotate(10deg);
	-webkit-transform: scale(1.3) rotate(10deg);
	filter:contrast(70%) blur(4px);
	-webkit-filter:contrast(70%) blur(4px);
	transition: all ease-in-out 1s;
	-webkit-transition: all ease-in-out 1s;
}
.server_fun .title{
	width: 100%;
	height: 100%;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	line-height: 150px;
	transition: width 0.3s ease-out;
	-webkit-transition: width 0.3s ease-out;
	text-shadow: 1px 1px 10px #000;
	-webkit-text-shadow: 1px 1px 10px #000;
}
.server_fun:hover .title{
	width: 50%;
	transition: width 0.3s ease-in;
	-webkit-transition: width 0.3s ease-in;
}

.server_fun .detail{
	position:absolute;
	top: 0;
	right:0;
	height: 100%;
	width: 50%;
	transition: opacity 0.3s ease-out;
	-webkit-transition: opacity 0.3s ease-out;
	opacity: 0;
	-webkit-opacity: 0;
	padding: 10px 0;
}
.server_fun:hover .detail{
	transition: opacity 0.3s ease-in;
	-webkit-transition: opacity 0.3s ease-in;
	opacity: 1;
	-webkit-opacity: 1;
}
.server_fun .detail.flexBox{
	flex-flow: column;
	-webkit-flex-flow: column;
	justify-content: center;
}
.server_fun .detail p{
	display: table;
	width: 100%;
	flex: 1;
	color: #fff;
	font-size: 18px;
	text-align: center;
	vertical-align: middle;
}
.server_web:before{background: url(../img/server_1.jpg) no-repeat center/cover;}
.server_wechat:before{background: url(../img/server_2.jpg) no-repeat center/cover;}
.server_ui:before{background: url(../img/server_3.jpg) no-repeat center/cover;}
.server_app:before{background: url(../img/server_4.jpg) no-repeat center/cover;}

/*server end*/

/*case begin*/
.case li{
	height: 200px;
	width:290px;
	margin-bottom:10px;
	overflow: hidden;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	margin-right: 13px;
}
.case li .img_bg{
	z-index: 1;width: 100%;height: 100%;
	transition: all 0.8s ease-in;
	-webkit-transition: all 0.8s ease-in;
}

.case li .title{
	z-index: 2;
	border-left: 148px solid transparent;
	border-top: 100px solid rgba(0,0,0,0.6);
	border-right: 148px solid transparent;
	top: -100%;
	left: 0;
	transition: all 0.4s 0.3s ease-in-out;
	-webkit-transition: all 0.4s 0.3s ease-in-out;
}
.case li .title span{
	position: absolute;
	left: 50%;
	margin-left: -20px;
	top: -155px;
	display: block;
	width: 40px;
	height: 20px;
	color: #000;
	background-color:#fff ;
	line-height: 20px;
	text-align: center;
	transition: all 0.5s 0.3s ease-out;
	-webkit-transition: all 0.4s 0.3s ease-out;
}
.case li .description{
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	color: #fff;
	left: 0;
	bottom: -41px;
	padding: 0 15px;
	z-index: 2;
	transition:  all 0.4s ease-in;
	-webkit-transition:  all 0.4s ease-in;
}
.case li:before{
	display: table;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	transition: all 0.6s ease-in;
	-webkit-transition: all 0.6s ease-in;
}
.case li:hover .title{
	top: 0px;
	transition: all 0.4s 0.3s ease-in-out;
	-webkit-transition: all 0.4s 0.3s ease-in-out;
}
.case li:hover .description{
	bottom: 0px;
	transition:  all 0.4s ease-in;
	-webkit-transition:  all 0.4s ease-in;
}
.case li:hover:before{
	background-color: rgba(255,255,255,0.4);
	transition: all 0.6s ease-in;
	-webkit-transition: all 0.6s ease-in;
}
.case li:hover .img_bg{
	transform: scale(1.2);
	transition: all 0.8s ease-in;
	-webkit-transition: all 0.8s ease-in;
}
.case li:hover .title span{
	top: -45px;
	transition: all 0.5s 0.3s ease-in;
	-webkit-transition: all 0.4s 0.3s ease-in
}
/*case end*/

/*template begin*/
.template ul li{
	height: 165px;
	width: 290px;
	margin-bottom: 10px;
	overflow: hidden;
	margin-right: 13px;
}
.template ul li .img{
	width: 100%;
	height: 100%;
	transition: transform 0.5s ease-in;
	-webkit-transition: transform 0.5s ease-in;
}
.template ul li:hover .img{
	transform: scale(1.3) rotate(-10deg);
	-webkit-transform: scale(1.3) rotate(-10deg);
	transition: transform 0.5s ease-in;
	-webkit-transition: transform 0.5s ease-in;
}
.template ul li span{
	display: block;
	width: 100%;
	height: 35px;
	line-height: 35px;
	padding: 0 15px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	background-color: rgba(0,0,0,0.7);
	color: #fff;
	font-size: 16px;
}
/*template end*/
/* knowledge/resources/tools/download begin*/
.allList ul li{
	width:390px;
	height: 85px;
	padding: 5px;
	margin-bottom: 15px;
	margin-right: 14px;
}
.allList .img{
	width: 121px;
	height: 75px;
	float: left;
}
.allList ul li .wrap{
	height: 75px;
	width: 230px;
}
.allList ul li .wrap h3{
	height: 30px;
	display: block;
	font-size: 20px;
	color: #fff;
}
.allList ul li .wrap p,
.allList ul li .wrap span{
	line-height: 25px;
	color: #fff;
	font-size: 14px;
}
/* knowledge/resources/tools/download end*/
/* download begin */
.download{
	width: 1200px;
	height: 220px;
	background: rgba(0,0,0,0.35);
	border-radius: 0 30px 0 30px;
	-webkit-border-radius: 0 30px 0 30px;
	
}
.download>.content{
	width: 1000px;
	height: 220px;
	margin-left:200px;
	overflow: hidden;
	padding: 3px 0;
}
.download>.content img{
	width: 100%;
	height: 150px;
} 
.download>.content .text{
	width: 100%;
	height: 55px;
	color: #fff;
	font-size: 16px;
	line-height: 30px;
	margin-top: 8px;
}
.download>.swiper-button-prev,.download>.swiper-button-next{
	width: 100px;
	height: 220px;
	margin-top: -110px;
}
.download>.swiper-button-prev{
	left: 0px;
	background: url(../img/left.png) no-repeat center;
}
.download>.swiper-button-next{
	left: 100px;
	background: url(../img/right.png) no-repeat center;
}
.download .download-pagination{
	width: 200px;
	height: 350px;
	top: 0;
}
/* download end */
/* news begin */
.news ul li{
	width:390px;
	height: 405px;
	margin-right: 15px;
	border-radius: 8px 8px 0 0;
	-webkit-border-radius: 8px 8px 0 0;
	overflow: hidden;
}
.news ul li .img{
	width: 100%;
	height: 200px;
	overflow: hidden;
}
.news ul li h3,
.news ul li span,
.news ul li em{
	display: block;
	color: #fff;
	font-size: 14px;
}
.news ul li h3{
	font-size: 20px;
	color: #fff;
	line-height: 30px;
	margin: 10px 0;
    padding: 0 10px;
}
.news ul li p{
	line-height: 25px;
	color: #fff;
    padding: 0 10px;
}
.news ul li span{
	margin: 10px 0;
    padding: 0 10px;
}
.news ul li em{
	width: 30px;
	height: 15px;
	background: url(../img/clickMore.png) no-repeat center/cover;
}
/* news end */

/* friend link begin */
.friend-link ul li{
	width:140px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	margin-bottom: 20px;
	margin-right: 11.3px;
}
.friend-link ul li a{
	color: #fff;
	font-size: 14px;
}
/* friend link end */

/* service page */
.serviceBox{
	width: 1200px;
	overflow: hidden;
}
.serviceBox .item{
	width: 100%;
	height: 675px;
	padding: 50px;
	color: #fff;
	font-weight: bold;
	margin-bottom: 10px;
}
.serviceBox .item.item-web{
	background: url(../img/service-web.jpg) no-repeat center/cover;
	background-attachment: fixed;
}
.serviceBox .item.item-wechat{
	background: url(../img/service-wechat.jpg) no-repeat center/cover;
	background-attachment: fixed;
}
.serviceBox .item.item-ui{
	background: url(../img/service-ui.jpg) no-repeat center/cover;
	background-attachment: fixed;
}
.serviceBox .item.item-app{
	background: url(../img/service-app.jpg) no-repeat center/cover;
	background-attachment: fixed;
}

.serviceBox .item .h1 span{
	font-size: 48px;
}
.serviceBox .item .h1 p{
	font-size: 36px;
	color: #f3c800;
}
.serviceBox .item .h2 span{
	font-size: 24px;
}
.serviceBox .item .h2 p{
	font-size: 16px;
}
.serviceBox .item.item-wechat ul li{
	flex: 0 0 30%;
	-webkit-flex: 0 0 30%;
	margin-bottom: 20px;
	
}
.serviceBox .item.item-wechat ul li h6{
	font-size: 16px;
}
.serviceBox .item.item-wechat ul li p,
.serviceBox .item.item-app ul li p{
	font-size: 14px;
	line-height: 25px;
}
.serviceBox .item.item-app ul li{
	flex: 0 0 30%;
	-webkit-flex: 0 0 25%;
	text-align: center;
	margin: 20px;
}
.serviceBox .item.item-app ul li strong{
	font-size: 16px;
}

/* contact */
.contact-info{
	padding: 0 50px;
}
.contact-info .item span,
.contact-info .item p,
.contact-info .item h3{
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 30px;
}
.contact-info .item h3{
	line-height: 50px;
	font-size: 20px;
}
.contact-title{
	font-size: 24px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	margin: 30px 0;
}
.contact-info .item.wechatCode .name{
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	color: #fff;
}
.contact-info .item.wechatCode img{
	margin: 15px auto;
}
#map{
	width: 100%;
	height: 550px;
}
#map .top{
	margin: 0;
}
#map .center{
	width: 332px !important;
	height: 55px !important;
}
#map .bottom{
	top: 80px !important;
}

/*article*/
article,.article-model{
	padding: 30px 15px;
}
article h1{
	text-align: center;
	font-size: 26px;
	color: #fff;
	font-weight: bold;
}
article .article-info{
	height: 35px;
	border-bottom:#fff dashed 1px;
}
article .article-info span{
	font-size: 14px;
	padding-right:20px;
	line-height: 35px;
	color: #FFFFFF;
}
article .article-content{
	font-size: 16px;
	color: #fff;
	line-height: 30px;
}
article .article-content img{
	margin: 15px auto;
}
article .article-laypage{
	height: 40px;
	margin: 30px 0px;
}
article .article-laypage .prev-next{
	font-size: 14px;
	color: #fff;
	line-height: 40px;
}
article .article-laypage .prev-next a{
	font-size: 14px;
	color: #F3C800;
	line-height: 40px;
}
.pink{background-color: #ff87c7;}
.green{background-color:#46de8d}
.blue{background-color: #2196F3;}
.yellow{background-color: #F3C800;}
.lump-box{
	width: 100%;
}
.lump-box .tag,.lump-box .list-text,.lump-box .list-img{
	padding: 0 10px;
	height: auto !important;
	overflow: hidden;
}
.lump-box .title{
	
	height: 40px;
}
.lump-box .title em{
	line-height: 40px;
	font-size: 16px;
	padding-left: 15px;
	color: #fff;
}
.lump-box span.left-color-lump{
	display: block;
	float: left;
	width: 5px;
	height: 20px;
	margin: 10px 0px;
}
.article-further-reading ul li a{
	color: #fff;
}
.right-model .tag a{
	display: inline-block;
	width: auto;
	height: 35px;
	line-height: 35px;
	text-align: center;
	color: #fff;
	padding: 0 15px;
	border: #fff 1px solid;
	margin-bottom: 15px;
	font-size: 14px;
	transition: ease-in-out 0.3s;
	-webkit-transition: ease-in-out 0.3s;
}
.right-model .tag a:hover{
	background: #F3C800;
	color: #fff;
	transition: ease-in-out 0.3s;
	-webkit-transition: ease-in-out 0.3s;
}
.right-model .list-img ul li{
	width: 380px;
	height: 90px;
	border-bottom: #fff dashed 1px;
	margin-bottom: 15px;
}

.right-model .list-img ul li .img{
	width: 121px;
	height: 75px;
}
.right-model .list-img ul li .img img{
	width: 100%;
}
.right-model .list-img ul li .fr{
	width: 235px;
	height: 75px;
	font-size: 18px;
	color: #fff;
}
.right-model .list-text ul li{
	width: 380px;
	height: 40px;
}
.right-model .list-text ul li a{
	line-height: 40px;
	font-size: 14px;
	color: #fff;
}
.download-box{
	width: 100%;
	height: 55px;
	
}
.download-box a{
	display: block;
	width: 200px;
	height: 55px;
}
.download-box .baidu a{
	background: url(../img/downloadBG.jpg) no-repeat;
	background-position: 0px 0px;
}
.download-box .down-url a{
	background: url(../img/downloadBG.jpg) no-repeat;
	background-position: 0px -58px;
}
.download-box span{
	line-height: 55px;
	padding: 0 30px;
	font-size: 16px;
	color: #fff;
}
.download-box span em{
	font-size: 16px;
	color: #fff;
}
.article-further-reading ul li{
	width: 230px;
	height: 35px;
	line-height: 35px;
	font-size: 16px;
	margin-bottom: 20px;
	overflow: hidden;
	margin-right: 35px;
}
.article-further-reading ul li.img-list{
	height: 150px;
}
.article-further-reading ul li .img_bg{
	transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
}
.article-further-reading ul li .description{
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.75);
	color: #fff;
	font-size: 14px;
	width: 100%;
	height: 30px;
	padding: 0 15px;
	line-height: 30px;
}
.article-further-reading ul li:hover .img_bg{
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
}

.model-box{
	height: 240px;
	overflow: hidden;
	border-radius: 18px 0 0 0;
	-webkit-border-radius: 18px 0 0 0;
}
.model-box .img{
	width: 400px;
	height: 240px;
}
.model-box .model-info{
	width: 340px;
	height: 240px;
	padding: 10px 0;
}
article .model-info h1{
	font-weight: normal;
	font-size: 22px;
	text-align: left;
	padding-bottom: 10px;
}
article .model-info p{
	line-height: 30px;
}
article .model-info p strong{
	font-size: 18px;
	color: #fff;
	font-weight: normal;
}
article .model-info p span{
	font-size: 16px;
	color: #fff;
}
article .model-info p span.price{
	color:#F3C800;
	font-size: 20px;
	font-weight: bold;
}
article .model-info a{
	display: block;
	width: 120px;
	height: 35px;
	background-color: #F3C800;
	color: #fff;
	text-align: center;
	font-size: 16px;
	line-height: 35px;
	margin-top: 10px;
}
article .img-list{
	width: 100%;
	height: 550px;
}
article .model-img{
	overflow: hidden;
}
article .model-img .model-button{
	width: 30%;
	height: 100%;
	top: 0;
	z-index: 10;
	cursor: pointer;
}
article .model-img .model-button.model-button-prev{
	left: 0;
	background: url(../img/prve.png) no-repeat 10% center;
}
article .model-img .model-button.model-button-next{
	right: 0;
	background: url(../img/next.png) no-repeat 90% center;
}
article .gallery-top {
    height: 70%;
    width: 100%;
}
article .gallery-thumbs {
    height: 22%;
    box-sizing: border-box;
    padding-top: 10px;
}
article .gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    cursor: pointer;
}
article .gallery-thumbs .swiper-slide-active {
    opacity: 1;
}
article .gallery-top .swiper-slide a{
	cursor:url(../img/search.ico),auto;
}
article .img-mask{
	display: none;
	background: rgba(0,0,0,0.75);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	padding: 30px 0;
}
article .img-mask img{
	margin: auto;
}
article .gallery-thumbs .swiper-slide .title{
	height: 35px;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	line-height: 35px;
	font-size: 14px;
	text-align: center;
	color: #fff;
	background: rgba(0,0,0,0.5);
	z-index: 2;
}
/* serach */
.searchBox ul li{
	height: 90px;
	border-bottom: #5f5f5f 1px dashed;
}
.searchBox ul li .img{
	width: 121px;
	height: 75px;
}
.searchBox ul li .searchInfo{
	width: 620px;
	height: 75px;
}
.searchBox ul li .searchInfo span{
	font-size: 18px;
	color: #333;
	font-weight: bold;
}
.searchBox ul li .searchInfo p{
	font-size: 14px;
	line-height: 30px;
	display: block;
	width: 100%;
}
.searchBox ul li .searchInfo p.time{
	text-align: right;
}