@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;font-family:"Microsoft YaHei";}
html,body{height:100%;font-size:12px;}
/* -webkit-text-size-adjust:none; 解决Chrome浏览器最小只能显示12px字体的问题 */
body{-webkit-text-size-adjust:none;color:#333;}
a{text-decoration:none;}
img{border:0;}
li{list-style:none;}
input{border:0;color:#333;}
.clear{width:0;height:0;margin:0;padding:0;clear:both;font-size:0;}

/* 去除链接及表单焦点虚线边框 */
a:focus,input[type=button],input[type=submit],input[type=image]{outline:none;cursor:pointer;}

/* 去除Chrome浏览器文本框选中后的黄色边框 */
input,button,select,textarea{outline:none;font-size:12px;}
textarea{resize:none;}

/* 公用样式定义 */
h1,h2,h3,h4,h5,h6,h7{font-size:12px;font-weight:normal;}
.relative{width:100%;height:100%;position:relative;}


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

.page-all h1{
	text-align:center;
	font-size:30px;
}

.page-all h2{
	padding-top:20px;
	text-align:center;
	line-height:150%;
	font-size:16px;
}

.header{
	position:fixed;
	z-index:10;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:70px;
	background:#000;
}

.header .logo {
	float: left;
	width: 300px;
	height: 70px;
	color: #fff;
	line-height: 70px;
	text-align: center;
	background: url('image/web/cy_logo-20210107-1034.png') left center no-repeat;
}

.header .nav{
	float:left;
	height:70px;
}

.header .nav a{
	float:left;
	padding:0 30px;
	line-height:70px;
	font-size:14px;
	color:#fff;
}

.header .nav a:hover{
	background:#333;
}

.header .menu{
	float:right;
	text-align:right;
	line-height:70px;
	color:#ccc;
}

.header .menu font{
	color:#666;
}

.header .menu a{
	color:#ccc;
}

.header .menu a:hover{
	color:#fff;
	text-decoration:underline;
}

#experience{
	position:relative;
	padding-top:70px;
	height:710px;
	background:#34a5d6;
    
}

#experience .bg{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	background:url(image/web/experience_bg.png) center bottom no-repeat;
}

#experience .box{
	position:absolute;
	left:50%;
	bottom:100px;
	margin-left:-300px;
	width:600px;
}

#experience .box .banner{
	margin:0 auto;
	height:238px;
    background:url(image/web/banner.png) no-repeat center center;

}

#experience .box .text{
	padding:30px 0;
	font-size:20px;
	font-weight:300;
	line-height:150%;
	color:#fff;
	text-align:center;
}

#experience .box .button{
	margin:0 auto;
	width:200px;
	height:50px;
}

#experience .box .button a{
	display:block;
	border-radius:5px;
	text-align:center;
	line-height:50px;
	font-size:18px;
	/*color:#09c;*/
    color:white;
	background:#ff5400;
	/*background:#fff;*/
	-moz-box-shadow: 1px 1px 1px #2897c6;
    -webkit-box-shadow: 1px 1px 1px #2897c6;
    box-shadow: 1px 1px 1px #2897c6;
}

#experience .box .button a:hover{
	/*color:#fff;
	background:#aedbee;*/
	color:#000000;
	background-color:white;
}

#experience .box .link{
	padding:30px 0;
	text-align:center;
}

#experience .box .link a{
	padding:0 20px;
	font-size:14px;
	color:#fff;
}

#experience .box .link a:hover{
	text-decoration:underline;
}

#experience .box .icon{
	margin:10px auto 0 auto;
	width:228px;
	height:36px;
}

#experience .box .icon a{
	display:block;
    position:relative;
	float:left;
	margin-left:60px;
	width:36px;
	height:36px;
    cursor:default;
}
#experience .box .icon a>img {
    cursor:pointer;
}

#experience .box .icon a.qq{
	margin-left:0;
}

#experience .box .icon a img{
	width:36px;
	height:36px;
}

#experience .box .icon a .qrcode {
    position:absolute; 
    top:50px;
    left:-50px;
    width:136px;
    height:136px;
    overflow:hidden;
}

#experience .box .icon a .qrcode img {
    display:block;
    width:100%;
    height:auto;
    transition:0.3s;
    transform:translateY(-100%);
}

#experience .box .icon a.weixin .qrcode img.active {
    transform:translateY(0);
}

#experience .box .icon a .tel-inner {
    position:absolute; 
    top:0px;
    left:50px;
    width:200px;
    height:36px;
    overflow:hidden;
}

#experience .box .icon a .tel-inner h2 {
    display:inline-block;
    line-height:36px;
    font-size:16px;
    color:#fff;
    transition:0.3s;
    transform:translateX(-100%);
}

#experience .box .icon a .tel-inner h2.active {
    transform:translateX(0);
}

#what{
	padding:100px 0;
	background:#eee;
}

#what .pic{
	padding:50px 0;
	text-align:center;
}

#what .text{
	text-align:center;
	font-size:14px;
}

#feature{
	padding:100px 0;
	background:#45c1f1;
	color:#fff;
}

#feature li{
	float:left;
	margin:100px 30px 0 30px;
	width:340px;
}

#feature span{
	display:block;
}

#feature span.icon{
	margin:0 auto;
	width:340px;
	height:128px;
}

#feature span.ali{
	background:url(image/web/ali_icon.png) center center no-repeat;
}

#feature span.cluster{
	background:url(image/web/cluster_icon.png) center center no-repeat;
}

#feature span.module{
	background:url(image/web/module_icon.png) center center no-repeat;
}

#feature span.safe{
	background:url(image/web/safe_icon.png) center center no-repeat;
}

#feature span.platform{
	background:url(image/web/platform_icon.png) center center no-repeat;
}

#feature span.ui{
	background:url(image/web/ui_icon.png) center center no-repeat;
}

#feature span.title{
	margin-top:10px;
	text-align:center;
	font-size:20px;
	font-weight:bold;
}

#feature span.text{
	margin-top:10px;
	text-align:center;
	line-height:150%;
	font-size:14px;
}

#price{
	padding:100px 0;
	color:#fff;
	background:url(image/web/price_bg.jpg) center center no-repeat;
}

#price .text{
	position:relative;
	margin-top:60px;
	background:url(image/web/price_pic.png) left top no-repeat;
}

#price .text span{
	position:absolute;
	text-align:center;
}

#price .text span font{
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity:0.5;
	opacity:0.5;
	font-size:12px;
}

#price .text .module{
	top:10px;
	left:420px;
}

#price .text .version{
	top:245px;
	left:10px;
}

#price .text .time{
	top:240px;
	left:425px;
}

#price .text ul{
	margin-left:630px;
}

#price .text li{
	padding-bottom:20px;
	line-height:200%;
}

#price .text li.title{
	padding-bottom:10px;
	font-size:18px;
	font-weight:bold;
}

#framework{
	padding:100px 0;
}

#framework .box{
	position:relative;
	float:left;
	margin-top:60px;
	padding-bottom:15px;
	width:340px;
}

#framework .developer{
	margin-left:90px;
	margin-right:90px;
}

#framework .box .border{
	z-index:-10;
	position:absolute;
	left:0;
	right:0;
	top:40px;
	bottom:0;
	border:#eee 3px solid;
}

#framework .box span{
	display:block;
}

#framework .box span.pic{
	margin:0 auto;
	width:126px;
	height:80px;
	border-left:#fff 10px solid;
	border-right:#fff 10px solid;
}

#framework .friend span.pic{
	background:url(image/web/friend_icon.png) center center no-repeat;
}

#framework .developer span.pic{
	background:url(image/web/developer_icon.png) center center no-repeat;
}

#framework .user span.pic{
	background:url(image/web/user_icon.png) center center no-repeat;
}

#framework .box span.title{
	margin:0 auto;
	padding-top:10px;
	text-align:center;
	font-size:18px;
	font-weight:bold;
	color:#333;
}

#framework .box span.text{
	padding:10px 30px;
	line-height:150%;
	text-indent:28px;
	text-align:justify;
	font-size:14px;
	color:#666;
}

.footer{
	padding:80px 0;
	font-size:14px;
	background:#333;
	color:#999;
}

.footer a{
	color:#999;
}

.footer a:hover{
	color:#ccc;
	text-decoration:underline;
}

.footer .menu{
	text-align:center;
}

.footer .copyright{
	
    padding:15px 0;
	line-height:180%;
	text-align:center;
	font-size:12px;
}

.footer .logo{
	margin:0 auto;
	width:100px;
	height:40px;
	background:url(image/web/small_logo.png) center center no-repeat;
}

/* 需求页样式定义 */
.idea{
	background:#34a5d6;
}

.idea .banner{
	position:relative;
	padding-top:70px;
	height:280px;
	background:url(image/web/idea_banner.png) center bottom no-repeat;
}

.idea .banner .text{
	position:absolute;
	bottom:100px;
	left:10px;
	width:300px;
	color:#fff;
	font-size:14px;
}

.idea .banner .text font{
	display:block;
	padding-bottom:10px;
	font-size:36px;
}

.idea .banner .btn{
	position:absolute;
	bottom:120px;
	right:20px;
	width:185px;
	height:65px;
}

.idea .banner .btn a{
	display:block;
	width:100%;
	height:100%;
	background:url(image/web/banner_btn.png);
}

.demand{
	margin-bottom:100px;
	background:#fff;
}

.demand .type{
	height:70px;
	line-height:70px;
	border-bottom:#069 3px solid;
	background:#45c1f1;
}

.demand .type a{
	margin-left:20px;
	padding:8px 10px;
	background:#34a5d6;
	color:#fff;
	font-size:14px;
}

.demand .type a:hover{
	background:#91dbf7;
}

.demand .type a.active{
	background:#069;
	font-weight:bold;
}

.demand .box{
	padding:25px 40px 40px 40px;
}

.demand .box .title{
	line-height:50px;
	font-size:24px;
}

.demand .box .info{
	color:#999;
}

.demand .box .text{
	margin-top:20px;
	padding:20px 0;
	border-top:#ccc 1px dotted;
	font-size:14px;
	line-height:200%;
}

.demand .box .button{
	padding:30px 0 20px 0;
	text-align:center;
}

.demand .box .button a{
	padding:10px 15px;
	background:#09c;
	color:#fff;
	font-size:16px;
}

.demand .box .button a.ok{
	color:#09c;
	background:#fff;
}

.demand .box .info font{
	font-family:"Candara";
	font-weight:normal;
	padding:0 10px;
	font-size:16px;
	color:#09c;
}


.demand .box li{
	height:40px;
	line-height:40px;
	border-bottom:#ccc 1px dotted;
}

.demand .box li h3{
	float:left;
	font-size:14px;
}

.demand .box li h3 a{
	color:#09c;
}

.demand .box li h3 a:hover{
	color:#069;
}

.demand .box li span{
	float:right;
	color:#999;
}

.demand .box li span font{
	font-family:"Candara";
	font-weight:normal;
	padding:0 10px;
	font-size:16px;
	color:#09c;
}

.demand .page{
	height:50px;
	line-height:50px;
	border-top:#069 3px solid;
	background:#45c1f1;
	text-align:center;
}

.demand .page a{
	margin:0 5px;
	padding:4px 6px;
	color:#fff;
}

.demand .page a.active{
	background:#069;
}

.demand .page a:hover{
	background:#91dbf7;
}

.demand .page span{
	margin:0 5px;
	color:#fff;
}

/* 弹出层效果样式 */
.pop-layer{
	display:none;
	position:absolute;
	left:50%;
	float:left;
	padding:30px;
	background:#fff;
	-moz-box-shadow: 0px 0px 3px #333;
    -webkit-box-shadow: 0px 0px 3px #333;
    box-shadow: 0px 0px 3px #333;
}

.pop-layer .sidebar{
	float:left;
	padding-right:30px;
}

.pop-layer .sidebar span{
	display:block;
	text-align:center;
}

.pop-layer .sidebar span.pic{
	display:block;
	padding:1px;
	width:160px;
	height:160px;
	border:#E2E2E2 1px solid;
    background-position:center center;
}

.pop-layer .sidebar span.text{
	display:block;
	padding-top:10px;
	text-align:center;
	font-size:16px;
	/*font-weight:bold;*/
        color: #999;
}

.pop-layer .content{
	float:left;
	padding-left:30px;
	border-left:#eee 1px dotted;
}

.pop-layer .content li.msg{
	text-align:center;
	margin:0;
}

.pop-layer .content li.correct{
	color:#85b200;
}

.pop-layer .content li.error{
	color:#f00;
}

.pop-layer .title{
	margin-bottom:40px;
	height:30px;
	border-bottom:#09c 1px solid;
}

.pop-layer .title span{
	display:block;
	float:left;
	padding:0 15px;
	line-height:30px;
	font-size:14px;
	color:#fff;
	background:#09c;
}

.pop-layer ul li{
	margin-bottom:20px;
	height:30px;
}

.pop-layer ul li em{
	display:block;
	float:left;
	width:120px;
	font-size:14px;
	font-style:normal;
	line-height:30px;
	text-align:center;
	background:#09c;
	color:#fff;
}

.pop-layer ul li input[type=text],.pop-layer ul li input[type=password]{
	float:left;
	padding:0 10px;
	width:169px;
	height:28px;
	line-height:28px;
	border-left:0;
	border-right:#fff 1px solid;
	border-top:#fff 1px solid;
	border-bottom:#fff 1px solid;
	border-color:#eee;
}

.pop-layer ul li input:focus{
	border-color:#09c;
}

.pop-layer ul li input.smscode{
	width:80px;
}

.pop-layer ul li span{
	display:block;
	float:left;
	line-height:30px;
	margin-left:20px;
	color:#999;
}

.pop-layer ul li span img{
	margin-top:7px;
}

.pop-layer ul li span a{
	color:#09c;
}

.pop-layer ul li span a:hover{
	text-decoration:underline;
}

.pop-layer .button{
	padding-top:20px;
	text-align:center;
}

.pop-layer .button input{
	margin:0 10px;
	padding:10px 15px;
	font-size:16px;
	background:#eee;
	color:#333;
}

.pop-layer .button input.color{
	background:#09c;
	color:#fff;
}

#reg span.pic{
	background:url(image/web/reg_pic.png) center center no-repeat;
}

#login span.pic{
	background:url(image/web/login_pic.png) center center no-repeat;
}

#getpsw span.pic{
	background:url(image/web/getpsw_pic.png) center center no-repeat;
}