@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,span,b,form,font,input,button,textarea,p,a,img,table,tr,td,th,i,strong{margin:0;padding:0;font-family:\5FAE\8F6F\96C5\9ED1,\9ED1\4F53,\5B8B\4F53;}
input,button,select,textarea{outline:none;}li{list-style:none;}img{border:0 none;}textarea{resize:none}
body{color:#333;word-break:break-all;word-wrap:break-word;height:100%;font-size:14px;font-family:\5FAE\8F6F\96C5\9ED1,\9ED1\4F53,\5B8B\4F53;line-height:1.5;}
a{color:#333;text-decoration:none;outline:none;}
a:hover{color:#333;}
table{width:100%;border-collapse:collapse;border-spacing:0;}
/*clearfix*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}


@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


/* 背景 */
body {
	overflow-x: hidden;
}
.bg-fff {
	background: #fff;
}
.bg-272c44{
	background-color: #272c44;
}
.bg-eaf2fb {
	background-color: #eaf2fb;
}
.bg-006efd {
	background-color: #006efd;
}
.bg-vortex {
	height: 500px;
	background: #0c0312 url(../images/cs/cs-img.jpg) no-repeat center center;
}
.bg-vortex .rotate-file {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1000px;
	z-index: 10;
}
.bg-vortex .rotate-cloud {
	width: 1100px;
	height: 1100px;
	position: absolute;
	top: -250px;
	left: 50%;
	margin-left: -900px;
	animation: rotate 15s linear infinite;
}
.bg-vortex > div.color-fff {
	top: 110px;
	position:
	absolute;
	left:50%;
}
.bg-sky {
	height: 400px;
	box-sizing: border-box;
	background: #060b0f url(../images/cs/cs-img13.jpg) no-repeat center center;
}
.bg-sky .sky-img1 {
	position: absolute;
	right: -100px;
	top: -150px;
	animation: rotate 15s linear infinite;
}
.bg-sky .sky-img2 {
	height: 360px;
	position: absolute;
	top: -30px;
	right: -50px;
}

/* 溢出隐藏 */
.over-hidden {
	overflow: hidden;
}
.over-ell {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: normal;
}

/* 页面宽度 */
.box-w {
	width: 1100px;
	margin: 0 auto;
}

/* 默认表单 */
.default-form {
	width: 260px;
	height: 42px;
	line-height: 42px;
	border-radius: 6px;
	padding: 0 15px;
	vertical-align: middle;
	box-sizing: border-box;
	border: 1px solid #ccc;
}
.default-form::placeholder {
	color: #ccc;
}
textarea.default-form {
	line-height: 26px;
}

/* 浮动 */
.pull-left {
	float: left;
}
.pull-right {
	float: right;
}

/* 字体大小 */
.font-s0 {
	font-size: 0px;
}
.font-s12 {
	font-size: 12px;
}
.font-s16 {
	font-size: 16px;
}
.font-s18{
	font-size:18px;
}
.font-s20 {
	font-size: 20px;
}
.font-s22 {
	font-size: 22px;
}
.font-s24 {
	font-size: 24px;
}
.font-s26 {
	font-size: 26px;
}
.font-s28 {
	font-size: 28px;
}
.font-s30 {
	font-size: 30px;
}
.font-s34 {
	font-size: 34px;
}
.font-s40 {
	font-size: 40px;
}
.font-s48 {
	font-size: 48px;
}

/* 文字加粗 */
.bold-true {
	font-weight: bold;
}
.bold-false {
	font-weight: normal;
}

/* 文字颜色 */
.color-999 {
	color: #999;
}
.color-fff, .color-fff:hover {
	color: #fff;
}
.color-blue, a.color-blue:hover {
	color: #2468f2;
}
.color-red {
	color: #ff5c4b;
}
.color-5d6a82 {
	color: #5d6a82;
}

/* 对齐 */
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
.text-justify {
	text-align: justify;
	text-justify: inter-ideograph;
}
.ver-top {
	vertical-align: top;
}
.ver-middle {
	vertical-align: middle;
}

/* 行高 */
.lh-px0 {
	line-height: 0;
}
.lh-px22 {
	line-height: 22px;
}
.lh-px24 {
	line-height: 24px;
}
.lh-px26 {
	line-height: 26px;
}
.lh-px30 {
	line-height: 30px;
}
.lh-px34 {
	line-height: 34px;
}
.lh-px50 {
	line-height: 50px;
}
.lh-15 {
	line-height: 1.5;
}

.mlr-px100 {
	margin-left: 100px;
	margin-right: 100px;
}

/* 上外边距 */
.mt-75 {
	margin-top: -75px;
}
.mt-px5 {
	margin-top: 5px;
}
.mt-px10 {
	margin-top: 10px;
}
.mt-px15 {
	margin-top: 15px;
}
.mt-px20 {
	margin-top: 20px;
}
.mt-px30 {
	margin-top: 30px;
}
.mt-px35 {
	margin-top: 35px;
}
.mt-px40 {
	margin-top: 40px;
}
.mt-px55 {
	margin-top: 55px;
}
.mt-px60 {
	margin-top: 60px;
}
.mt-px70 {
	margin-top: 70px;
}
.mt-px110 {
	margin-top: 110px;
}

/* 右外边距 */
.mr-px5 {
	margin-right: 5px;
}
.mr-px25 {
	margin-right: 25px;
}
.mr-px30 {
	margin-right: 30px;
}
.mr-px40 {
	margin-right: 40px;
}
.mr-px50 {
	margin-right: 50px;
}

/* 左外边距 */
.ml-15 {
	margin-left: -15px;
}
.ml-px15 {
	margin-left: 15px;
}
.ml-px20 {
	margin-left: 20px;
}
.ml-px30 {
	margin-left: 30px;
}
.ml-px110 {
	margin-left: 110px;
}

/* 上内边距 */
.pt-px60 {
	padding-top: 60px;
}

/* 左内边距 */
.pl-px30 {
	padding-left: 30px;
}

.ptb-px30 {
	padding-top: 30px;
	padding-bottom: 30px;
}
.ptb-px50 {
	padding-top: 50px;
	padding-bottom: 50px;
}

/* 宽度 */
.width-actual {
	box-sizing: border-box;
}
.width-25 {
	width: 25%;
}
.mwidth-100 {
	max-width: 100%;
}
.width-px80 {
	width: 80px;
}
.width-px260 {
	width: 260px;
}
.width-px300 {
	width: 300px;
}
.width-px340 {
	width: 340px;
}
.width-px400 {
	width: 400px;
}
.width-px420 {
	width: 420px;
}
.width-px440 {
	width: 440px;
}
.width-px480 {
	width: 480px;
}
.width-px520 {
	width: 520px;
}
.width-px540 {
	width: 540px;
}
.width-px560 {
	width: 560px;
}
.width-px590 {
	width: 590px;
}

/* 高度 */
.height-px180 {
	height: 180px;
}
.height-px250 {
	height: 250px !important;
}
.height-px620 {
	height: 620px;
}

/* 按钮 */
.blue-btn {
	display: block;
	line-height: 54px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	background: #2468f2;
	border-radius: 6px;
}
.blue-btn:hover {
	color: #fff;
	background: #437df4;
}

/* 隐藏 */
.d-hide {
	display: none;
}

/* 边框 */
.bor-r-eee {
	border-right: 1px solid #eee;
}
.rounded-10 {
	border-radius: 10px;
}
.tit-underline::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 15px;
	bottom: -2px;
	left: 0;
	border-radius: 15px;
	z-index: -1;
	background-color: #fff116;
}

/* 块元素 */
.dis-inl {
	display: inline-block;
}
.dis-block {
	display: block;
}
.dis-none {
	display: none;
}
.pos-rel {
	position: relative;
}

/* 顶部 */
.header {
	width: 100%;
	height: 70px;
	position: fixed;
	top: 0;
	z-index: 1000;
	box-shadow: 0 0 5px rgba(0,0,0,.3);
}

/* 主导航 */
.menu > li {
	float: left;
	padding: 0 15px;
}
.menu > li > a {
	display: block;
	line-height: 66px;
	box-sizing: border-box;
}
.menu > li:hover > a {
	color: #2468f2;
}
.menu > li > a.true-a{
	color: #2468f2;
	font-weight: bold;
	border-bottom: 2px solid #2468f2;
}

/* 浏览器背景 */
.browser {
	margin-left: auto;
	margin-right: auto;
	padding: 40px 10px 10px;
	border-radius: 10px;
	box-shadow: 0 0 5px 2px rgba(0,0,0,.05);
	background: #fff url(../images/cs/cs-ico23.png) no-repeat 20px 15px;
}

/* 阴影方块列表 */
.shadow-block > li {
	float: left;
	width: 250px;
	height: 290px;
	padding: 34px 20px 0;
	margin-right: 33px;
	border-radius: 10px;
	box-sizing: border-box;
	box-shadow: 0 0 5px 2px rgba(1,114,252,.15);
}
.shadow-block > li:last-child {
	margin-right: 0;
}
.app-scene > li {
	width: 243px;
	height: 500px;
	padding: 0;
	padding: 0 10px 0 20px;
	font-size: 12px;
}
.app-scene > li > h4 {
	margin: 0 -10px 0 -20px;
	border-radius: 10px 10px 0 0;
	line-height: 80px;
	color: #fff;
	border-bottom: 3px solid #fc8045;
	background-color: #3846c9;
}

/* 痛点 */
.pain-spot {
	height: 405px;
	padding-top: 95px;
	position: relative;
	box-sizing: border-box;
	background: url(../images/cs/cs-img18.jpg) no-repeat center top;
}
.pain-spot li:first-child {
	position: absolute;
	top: 138px;
	left: 50%;
	margin-left: -43px;
}
.pain-spot li:nth-child(2) {
	height: 206px;
	margin-left: 90px;
}
.pain-spot li:nth-child(3) {
	width: 230px;
	height: 206px;
	margin-left: 390px;
}
.pain-spot li:nth-child(4) h4 {
	margin-left: 85px;
}
.pain-spot li:nth-child(5) {
	margin-left: 545px;
}
.pain-spot li:nth-child(3) h4,.pain-spot li:nth-child(5) h4 {
	margin-left: 90px;
}

/* 需求 */
.demand > li:first-child {
	width: 184px;
	line-height: 184px;
	overflow: hidden;
	text-align: center;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100;
	margin-top: -92px;
	margin-left: -92px;
}
.demand > li:not(:first-child) {
	width: 530px;
	height: 200px;
	float: left;
	border-radius: 8px;
}
.demand > li:nth-child(2) {
	color: #571d1e;
	background-color: #ffeded;
}
.demand > li:nth-child(3) {
	color: #202f5c;
	background-color: #e2fbfd;
}
.demand > li:nth-child(4) {
	color: #215559;
	background-color: #e4ebff;
}
.demand > li:nth-child(5) {
	color: #5c3e21;
	background-color: #fff6ec;
}

/* 页面banner */
.page-banner {
	height: 519px;
	padding-top: 25px;
	background-image: url('../images/cs/cs-img24.gif'), url('../images/cs/cs-img21.jpg');
	background-position: 330px center, center center;
	background-repeat: no-repeat, no-repeat;
	background-size: auto 504px, auto;
}
.page-banner > li {
	margin: 0 0 35px 100px;
}

/* 切换Tab */
.switch-tab {
	display: inline-block;
	border-radius: 60px;
	background-color: #f3f8ff;
}
.switch-tab a {
	display: inline-block;
	width: 220px;
	line-height: 50px;
	text-align: center;
	font-size: 18px;
	color: #00045f;
	border-radius: 60px;
}
.switch-tab a.tab-active {
	color: #fff;
	background: linear-gradient(to right, #3846c9, #3f75e5);
}

/* 成功案例 */
.typ-cus li {
	width: 184px;
	height: 60px;
	border: 1px solid #eee;
	background: #fff;
	text-align: center;
	float: left;
	border-radius: 6px;
	margin: 34px 17px 0;
} 

/* 试用流程 */
.process-list {
	width: 830px;
	height: 150px;
	margin: 70px auto 0;
	border-top: 6px solid #eaf2fb;
}
.process-list > li {
	width: 210px;
	float: left;
	position: relative;
	margin-top: -40px;
	margin-left: 66px;
	text-align: center;
}
.process-list > li::after {
	content: "";
	width: 20px;
	height: 29px;
	position: absolute;
	top: 22px;
	right: -45px;
	display: inline-block;
	background: url(../images/cs/cs-ico22.png) no-repeat;
}
.process-list > li:first-child {
	margin-left: -110px;
}
.process-list > li:last-child {
	float: right;
	margin-left: auto;
	margin-right: -100px;
}
.process-list > li:last-child::after {
	display: none;
}
.process-list > li > strong {
	display: inline-block;
	width: 74px;
	line-height: 74px;
	color: #fff;
	font-size: 20px;
	background: url(../images/cs/cs-ico21.png) no-repeat;
}

/* 观点洞察 */
.view-list li {
	line-height: 26px;
	font-size: 16px;
	padding: 15px 0;
	position: relative;
	border-bottom: 1px solid #eee;
}
.view-list li:before {
	position: absolute;
	content: "\2022";
	color: #666;
	font-size: 20px;
	top: 50%;
	left: -15px;
	margin-top: -13px;
}
.view-list li a:hover {
	color: #006efd;
}

/* 底部 */
.footer {
	width: 100%;
	padding: 30px 0;
	overflow: hidden;
	background: #262626;
}
.footer .footer-main {
	width: 1100px;
	color: #ccc;
	margin: 0 auto;
	overflow: hidden;
	font-size: 14px;
}