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

::selection
{
    background-color: #6796ff;
    color:#ffffff;
}

::-moz-selection
{
    background-color: #6796ff;
    color:#ffffff;
}

li{
    list-style: none;
}

.clearfix:before,
.clearfix:after {
	content: '';
	display: table;
}

.clearfix:after {
	clear: both;
}

.left{
    float: left;
}
.right{
    float: right;
}

body {
	font-family: 'Segoe UI', 'Lucida Grande', 'Helvetica', Arial, 'Microsoft YaHei', 'FreeSans', Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', FontAwesome, sans-serif ;
	color: #444;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-width: 1000px;
}

a {
	text-decoration: none;
	color: #4e3c3e;
	outline: none;
}

a:hover,
a:focus {
	color: #6796ff;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

.info {
	font-size: 0.85em;
	font-weight: bold;
	line-height: 36px;
	margin: 5em 0 0;
	color: #9c9898;
}



.link-copy::after {
	content: 'Click to copy direct link';
	font-size: 0.85em;
	font-weight: bold;
	position: absolute;
	right: 100%;
	margin: 0 1em 0 0;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	color: #ddd;
	-webkit-transform: translate3d(10px, 0, 0);
	transform: translate3d(10px, 0, 0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.link-copy:hover::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.link-copy::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
	opacity: 0;
	border-radius: 50%;
	background: #3b8cf3;
}

.link-copy--animate::before {
	-webkit-animation: pulse 0.3s;
	animation: pulse 0.3s;
}

@-webkit-keyframes pulse {
	from {
		opacity: 1;
		-webkit-transform: scale3d(0, 0, 1);
		transform: scale3d(0, 0, 1);
	}

	to {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

}

@keyframes pulse {
	from {
		opacity: 1;
		-webkit-transform: scale3d(0, 0, 1);
		transform: scale3d(0, 0, 1);
	}

	to {
		opacity: 0;
		transform: scale3d(1, 1, 1);
		webkit-transform: scale3d(1, 1, 1);
	}

}

.github-corner:hover .octo-arm {
	animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
	0%,
	100% {
		transform: rotate(0);
	}

	20%,
	60% {
		transform: rotate(-25deg);
	}

	40%,
	80% {
		transform: rotate(10deg);
	}

}

@media (max-width:500px) {
	.github-corner:hover .octo-arm {
		animation: none;
	}

	.github-corner .octo-arm {
		animation: octocat-wave 560ms ease-in-out;
	}

}

/* Content */
.content {
	padding: 3em 0;
}







.break {
	padding: 3em 0;
	text-align: center;
	background: #3b8cf3;
}



.break__title {
	font-size: 1.85em;
	font-weight: normal;
	margin: 0;
	color: #fff;
}

.section--intro {
	font-size: 2em;
	position: relative;
	min-height: 100vh;
	text-align: center;
	color: #fff;
}

.section--intro p {
	max-width: 1000px;
	margin: 0 auto;
	padding: 1em;
}

/* Header */
.codrops-header {
	position: relative;
	height: 100vh;
	min-height: 600px;
	padding: 0em 1em 4em;
	text-align: center;
	color: #fff;
	background: #3b8cf3 url(../img/mouse.svg) no-repeat left 50% bottom 40px;
}

.codrops-header h1 {
	font-size: 3.25em;
	font-weight: 700;
	line-height: 1;
	position: relative;
	z-index: 10;
	margin: 0.5em 0 0;
	letter-spacing: -1px;
}



/* Top Navigation Style */
.codrops-links {
	position: relative;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
}

.codrops-links::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	background: #c14954;
	-webkit-transform: rotate3d(0, 0, 1, 22.5deg);
	transform: rotate3d(0, 0, 1, 22.5deg);
}

.codrops-icon {
	display: inline-block;
	width: 1.5em;
	margin: 0.5em;
	padding: 0em 0;
	text-decoration: none;
}



.codrops-icon:before {
	font-family: 'codropsicons';
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	margin: 0 5px;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	speak: none;
}

.codrops-icon--drop:before {
	content: '\e001';
}

.codrops-icon--prev:before {
	content: '\e004';
}

/* Demo links */
.codrops-demos {
	margin: 2em 0 0;
}

.codrops-demos a {
	display: inline-block;
	margin: 0 0.5em;
}

.codrops-demos a.current-demo {
	color: #333;
}

/* Related demos */
.content--related {
	font-weight: bold;
	padding: 10em 1em;
	text-align: center;
	background: #3b8cf3;
}

.content__wrap--related {
	max-width: 800px;
	margin: 0 auto;
}

.media-item {
	display: inline-block;
	padding: 1em;
	vertical-align: top;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.media-item__img {
	max-width: 100%;
	opacity: 0.6;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
	opacity: 1;
}

.media-item__title {
	font-size: 1em;
	margin: 0;
	padding: 0.5em;
}

@media screen and (max-width:50em) {
	.section--intro {
		font-size: 1em;
	}

}







.banner{
    display: block;
    width: 100%;
    height: 530px;
    background: #eee;
}
.container_left {
	padding-left: 20px;
}

.container_right {
	padding-right: 20px;
}

.container_booth {
	padding-left: 20px;
	padding-right: 20px;
}
.container {
    margin: 0 auto;
    text-align: center;
    padding: 40px 0;
}

.container_top {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.container-box {
	padding-top: 0px;
}
.container .title_module h4{
    display: block;
    font-size: 24px;
    color: #333;
    font-weight: 400;
    margin-bottom: 10px;
}
.text_red{
    padding: 0 6px;
    color: #3b8cf3;
}
.subtitle{
    display: block;
    font-size: 24px;
    color: #6D7278;
    margin-bottom: 40px;
}

.box_case {
    display: flex;
    /*width: 1200px;*/
    flex-wrap: wrap;
    flex-direction: nowrap;
    justify-content: space-between;
    align-content: space-between;
    text-align: left;

}
.box_case .box{
    flex: 1;
}
.box_case .box .case_img{
    background-image: url(/img/case_img_default.jpg);
    display: block;
    width: 280px;
    height: 180px;
    overflow: hidden;
}
.box_case .box .case_img img:hover{
    transition: all .5s ease;
    transform:scale(1.1);
    -ms-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -moz-transform:scale(1.1);
}
.box_case .box h5{
    display: block;
    font-weight: normal;
    color: #333;
    font-size: 15px;
    line-height: 36px;
}
.box_case .box:hover h5{
    transition: all .3s ease;
    color: #3b8cf3;
}
.box_case .box .case_summary{
    display: -webkit-box;
    width: 280px;
    font-size: 12px;
    color: #999;
    line-height: 20px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
	text-align: left;
}

.case_word{
    padding-top: 10px;
}

.case_summary{
	display: inline-block;
	width: 280px;
	/*font-size: 12px;*/
	color: #999;
	line-height: 20px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-align: left;
    padding-top: 10px;
}
.about_in {
    display: block;
    background-color: #fcfcfc;
    width: 100%;
    height: 400px;
}
.about_in .container{
    position: relative;
    top: 50px;
    background-color: #fff;
    height: 300px;
    padding: 0;
}
.about_in .left{
    display: inline-block;
    margin-right: 20px;
}
.about_in .title_module{
    display: inline-block;
    width: calc( 100% - 520px);
    float: left;
    padding: 30px 0;
    text-align: left;
}
.about_in .title_module .subtitle{
    text-align: left;
    margin-bottom: 20px;
}
.about_in .title_module .text_summary{
    display: inline-block;
    font-size: 14px;
    color: #999;
    line-height: 32px;
}




.service_in{
    display: block;
    min-height: 340px;
    overflow: hidden;
    zoom: 1;
}

.service_list{
	text-align: center;
}

.service_list ul{
	display: inline-flex;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.service_in .service_list li{
    display: block;
    float: left;
    background: #fcfcfc;
    text-align: center;
    width: 180px;
    padding: 30px 0;
    margin-right: 20px;
}
.service_in .service_list li:last-child{margin-right: 0;}
.service_in .service_list li:hover{
    background: #fff;
    -moz-box-shadow:0px 0px 10px rgba(0,0,0,.06); 
    -webkit-box-shadow:0px 0px 10px rgba(0,0,0,.06); 
    box-shadow:0px 0px 10px rgba(0,0,0,.06);
    cursor: pointer;
}
.service_list li h5{
    font-size: 14px;
    color: #333;
    font-weight: 400;
    line-height: 24px;
    margin-top: 6px;
}
.service_list li span{
    font-size: 13px;
    color: #999;
}

.foreach_ul{
	display: inline-flex;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.table_foreach_ul{
	display: table-cell;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}



.partner_in{
    /*background: #fcfcfc;*/
}
partner_in{
    display: block;
    height: 296px;
    overflow: hidden;
    zoom: 1;
}
.partner_list{
    text-align: justify;
}
.partner_list li{
    display: inline-block;
    width: 160px;
    height: 70px;
    text-align: center;
    margin: 10px 15px 30px;
    cursor: pointer;
}
.case_align{
	text-align: justify;
}
.case_align li{
	display: inline-block;
	width: 200px;
	height: 50px;
	text-align: center;
	margin: 10px 15px 30px;
	cursor: pointer;
}
.case_align img{
	width: 200px;
	height: 50px;
}
.footer {
    background: #1f2531;
    color: #999;
    font-size: 12px;
	vertical-align:bottom;
	display:block;
	overflow: hidden;
}
.footer .container{
    padding: 18px 0;
}
.footer img{
    margin: 0 2px 3px;
}
.footer .line{
    background: #3b4351;
    display: inline-block;
    width: 2px;
    height: 10px;
    margin: 0 4px;
}

.page_cover {
    width: 100%;
	padding-top: 66px;
	font-size: 0px;
	line-height: 0;
	overflow: hidden;
}

.bunner_img {
	width: 100%;
    image-rendering: -moz-crisp-edges; /* Firefox */

    image-rendering: -o-crisp-edges; /* Opera */

    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */

    image-rendering: crisp-edges;

    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

.case_con,.job_con{
    text-align: left;
}
.case_con h1,.job_con h1{
    display: block;
    font-weight: 400;
    text-align: left;
    font-size: 24px;
    padding-bottom: 10px;
}
.case_con p,.job_con p{
    display: block;
    margin: 6px 0;
    font-size: 16px;
    line-height: 30px;
    color: #666;
}

.banner_style_other section{
    text-align: left;
    position: relative;
    left: -230px;
}
.banner_style_other section h2{
    font-size: 50px;
}
.banner_style_other section h3{
    font-size: 20px;
}
.banner_style_other .banner-link{
    text-align: left;
    position: relative;
    left: -230px;
}

.case_con ul{
    /*width: 1200px;*/
    margin-top: 18px;
    overflow: hidden;
    zoom: 1;
}
.case_con li{
    position: relative;
    display: inline-block;
    float: left;
    border: #eee 1px solid;
    margin: 0 18px 18px 0;
    width: 280px;
    height: 180px;
    overflow: hidden;
}
.case_con li img{
    position: relative;
    display: block;
    width: 280px;
    margin: 0 auto;
}
.case_con li span{
    position: absolute;
    display: block;
    bottom: -54px;
    width: 280px;
    height: 54px;
    background: #3b8cf3;
    color: #fff;
    font-size: 14px;
    line-height: 54px;
    text-align: center;
    transition: all .2s ease;
}
.case_con li:hover{
    border: #3b8cf3 1px solid;
}
.case_con li:hover img{
    width: 240px;
    bottom: 10px;
    transition: all .2s ease;
}
.case_con li:hover span{
    bottom: 0;
}


.contact_con ul{
    display: flex;
}
.contact_con li{
    flex: 1;
}
.contact_con li h2{
    font-size: 18px;
    font-weight: 400;
    margin: 8px auto;
}
.contact_con li a{
    font-size: 16px;
    color: #999999;
}
.contact_con li span{
    color: #999;
    font-size: 14px;
    line-height: 26px;
}
.contact_con li i{
    display: block;
    width: 33px;
    height: 33px;
    margin: 0 auto;
}
.contact_con li i.icon_tel{
    background: url(../img/icon_phone.png) no-repeat;
}
.contact_con li i.icon_email{
    background: url(../img/icon_email.png) no-repeat;
}
.contact_con li i.icon_positioning{
    background: url(../img/icon_positioning.png) no-repeat;
}

.map{
    height: 350px;
    margin-top: 40px;
    overflow: hidden;
    zoom: 1;
}


/*job*/
.job_con p>a{
    color: #3b8cf3;
}

.menu_list{
    margin:20px auto;
}
.menu_list .menu_head{
    height:70px;
    line-height:70px;
    padding-left:20px;
    font-size:18px;
    color:#333;
    cursor:pointer;
    position:relative;
    font-weight:400;
    background:#f8f8f8 url(../img/pro_left.png) center right no-repeat;
    margin:0;
    margin-top: 20px;
}
.menu_list .current{background:#f8f8f8 url(../img/pro_down.png) center right no-repeat;}

.menu_body{
    height:auto;
    padding:20px;
    overflow:hidden;
    line-height:30px;
    background: #f8f8f8;
    border-top: #e9e9e9 1px solid;
}
.menu_body h2{
    font-weight: bold;
    font-size: 14px;
}
.menu_body p{
    font-size: 14px;
}


.box .box_tit{
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    overflow: hidden;
    zoom: 1;
}
.box .box_tit h1{
    position: relative;
    font-size: 24px;
    font-weight: 400;
    color: #333;
    z-index: 9;
}
.box .box_tit span.text_aider{
    position: absolute;
    width: 100%;
    left: 0;
    top: 10px;
    font-size: 50px;
    font-weight: 300;
    color: #fafafa;
    z-index: 1;
}

.box .about_box_con{
    text-align: left;
    font-size: 14px;
    color: #666;
    line-height: 30px;
}

.culture {
    display: flex;
    overflow: hidden;
    margin-top: 20px;
    zoom: 1;
}
.culture li{
    flex: 1;
    text-align: left;
}
.culture li h2{
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #333;
}
.culture li h2::before{
    position: relative;
    display: inline-block;
    margin-right: 10px;
    top: 2px;
    content: "";
    width: 2px;
    height: 14px;
    background: #3b8cf3;
}
.culture li span{
    color: #999;
    font-size: 14px;
}


.milestone_box_con{
    background: #fcfcfc;
    display: block;
    clear: both;
}
.milestone_box_con .box_tit span.text_aider{
    color: #f5f5f5;
}

/* 横向滚动 */

.scroll_horizontal{position:relative;height:330px;}

.scroll_horizontal .box{overflow:hidden;position:relative;margin:0 auto;}

.scroll_horizontal .list{
    overflow:hidden;
    width:9999px;
}

.scroll_horizontal .list li{
    display: inline-block;
    float:left;
    width:300px;
    border-right: 20px #fcfcfc solid;
    height: 230px;
    background: #fff;
}
.scroll_horizontal .list li h3{
    font-size: 24px;
    color: #333;
    padding-top: 50px;
    font-weight: 400;
}
.scroll_horizontal .list li>hr{
    display: block;
    width: 10px;
    height: 1px;
    background: #333;
    margin: 20px auto;
}
.scroll_horizontal .list li span{
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 12px;
    line-height: 24px;
    color: #999;
}

.scroll_horizontal .prev,

.scroll_horizontal .next{
    position:absolute;
    top:280px;
    width:60px;
    height:40px;
    background-image:url(../img/control.png);
    background-repeat:no-repeat;
    cursor:pointer;
}

.scroll_horizontal .prev{left:520px;background-position:0 0;}

.scroll_horizontal .next{right:520px;background-position:-80px 0;}

.scroll_horizontal .prev:hover{background-position:0 -50px;}

.scroll_horizontal .next:hover{background-position:-80px -50px;}




/*Tab切换*/
.tab {
    position: relative;
    overflow: hidden;
    margin: 0 auto 20px auto;
}

.tab-nav {
    display: flex;
    height: 74px;
    margin: 0 auto;
    overflow: hidden;
    background: #fafafa;
}

.tab-nav a {
    display: block;
    flex: 1;
    float: left;
    height: 74px;
    line-height: 74px;
    text-align: center;
    text-decoration: none;
    color: #333;
}

.tab-nav a.current {
    background: #fff;
    color: #3b8cf3;
}
.tab-nav a hr{
    position: relative;
    display: none;
    top: -2px;
    width: 54px;
    height: 2px;
    margin: 0 auto;
    background: #3b8cf3;
}
.tab-nav a.current hr{
    display: block;
}

.tab-con {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.tab-con-item {
    display: none;
    color: #333;
}

.fan_box{
    display: block;
    padding: 50px 20px;
    overflow: hidden;
    zoom: 1;
    clear: both;
}
.fan_1{
    display: block;
    padding: 10px 0 50px 0;
    overflow: hidden;
    zoom: 1;
}
.fan_1 .box_1 .left{
    max-width: 680px;
}
.fan_l{
    font-size: 40px;
    color: #3b8cf3;
    font-weight: 500;
}
.fan_2{
	font-size: 36px;
	color: #3b8cf3;
	font-weight: 500;
}
.tab-con-item hr{
    display: block;
    width: 10px;
    height: 2px;
    background: #333;
	margin-right: 63vw;
}
.fan_t{
    display: block;
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}
.fan_d{
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    line-height: 32px;
}
.fan_d em{
    font-style: normal;
    color: #000;
}
.fan_f span a{
    font-size: 14px;
    color: #3b8cf3;
    margin: 6px 0;
}
.fan_f span a{
    display: inline-block;
    background: #fff2f2;
    padding: 9px 14px;
}
.fan_f span:after{
    content: '.';
    color: #fff;
    background: url(../img/triangle.png) center right no-repeat;
    margin-right: 4px;
}
.fan_f span:last-child::after{
    content: "";
}
.fan_i{
    display: block;
    padding: 10px;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    margin-right: 20px;
}
.box_1 .fan_i{
    width: 456px;
    height: 272px;
    margin-top: 20px;
}
.box_2 .fan_i{
    width: 456px;
    height: 272px;
    margin-top: 14px;
}
.box_3 .fan_i{
    width: 456px;
    height: 272px;
    margin-top: 10px;
}
.box_4 .fan_i{
    width: 456px;
    height: 272px;
    margin-top: 26px;
}

.fan_1 .box_2 .right{
    max-width: 700px;
}
.fan_1 .box_4 .right{
    max-width: 700px;
}
.fan_1 .box_3 .left{
    max-width: 680px;
}

.safe{
    background: #fcfcfc;
    width: 100%;
    height: 410px;
}
.safe ul{
    margin-top: 40px;
}
.safe li{
    background: #fff;
    display: block;
    float: left;
    width: 280px;
    height: 250px;
    color: #999;
    font-size: 12px;
    line-height: 22px;
    margin-right: 20px;
}
.safe li:last-child{
    margin-right: 0;
}
.safe li img{
    margin-top: 53px;
    margin-bottom: 10px;
}
.safe li h2{
    color: #333;
    font-size: 16px;
    font-weight: normal;
    line-height: 38px;
}
.safe li span{
    display: block;
    width: 210px;
    margin: 0 auto;
}

.slogan{
    background: url(../img/slogan.jpg) no-repeat center;
    width: 100%;
    height: 183px;
    text-align: center;
    font-size: 24px;
    line-height: 183px;
    color: #fff;
    font-weight: 300;
}
.slogan span{
    font-weight: 400;
}
a:hover{
	text-decoration: none;
}
.fixednav {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 1;
	background-color: #fff;
}

.img-style{
	width: 200px;
	height: 80px;
}
.m-right{
	margin-left: 1vw;
	margin-right: 3vw;
}
.m-left{
	margin-left: auto;
	margin-right: auto;
}
.p-top{
	padding-top: 2vh;
}
.img-size {
    width: 450px;
    height: 290px;
    object-fit: cover;
}


.company-img {
    padding: 10px 68px 10px 20px;
}

.company-size {
    width: 500px;
    height: 243px;
    object-fit: cover;
}

.mobile-img-size {
	width: 440px;
	height: 300px;
}
.tx-align{
	padding-left:5vw;
}
.p-top-1{
	padding-top: 6vh;
}
.m-left h2{
	padding-top: 0vh;
}
.m-right h2{
	padding-top: 0vh;
}
.contact_con_1 li{
	text-align: left;
}
.contact_con_1 li i{
	display: inline-table;
	/*margin-left: 2vw;*/
}
.body-style{
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}
.content-body{
	flex-grow: 1;
}
.header h2 {
	margin-top: 14px;
	margin-bottom: 10px;
}

.beian{
	color: #999 !important;
}
.view-more{
	padding-left: 10px;
	color: #3b8cf3;
}

.view-more-left{
	color: #3b8cf3;
}

.solution-title{
	display: flex;
	justify-content: center;
	padding-top: 20px;
}

.honour-img {
	width: 80%;
}

.copm-text{
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    line-height: 32px;
    text-align: left;
}

.job{
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    line-height: 32px;
    text-align: center;
    border: #c4e3f3 1px solid;
}

.job-content{
    text-align: left;
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    line-height: 32px;
    /*border:1px solid #96c2f1;background:#eff7ff;*/
    width: 30%;
    border-radius: 15px;
    background: #fbfbfb;
    padding: 5px 10px;
}

.contact_des{
    display: block;
    font-size: 18px;
    color: black;
    margin-bottom: 10px;
}

.join_bottom{
    padding-bottom: 10px;
}

.job-title{
    font-weight: bold;
    font-size: 18px;
    color: black
}