@charset "utf-8";


@media only screen and (max-width: 767px) {
	
	.key-xieyi summary{
		text-align: center;
	}
	.key-web summary{
		text-align: center;
	}
	.key-view summary{
		margin-top: 40px;
		text-align: center;
	}
	.key-userwork summary{
		margin-top: 50px;
		text-align: center;
	}
	.key-jieshao summary{
		margin-top: 50px;
		text-align: center;
	}
	.key-xieyi summary h3,
	.key-xieyi-other summary h3,
	.key-xieyi-other2 summary h3,
	.key-yaogan summary h3,
	.key-view summary h3,
	.key-userwork summary h3,
	.key-jieshao summary h3,
	.key-safe summary h3,
	.key-web summary h3{
		font-size: 20px;
		line-height: 24px;
	}
	.key-xieyi summary span,
	.key-xieyi-other2 summary span,
	.key-yaogan summary span,
	.key-view summary span,
	.key-jieshao summary span,
	.key-safe summary span,
	.key-web summary span{
		font-size: 12px;
		line-height: 26px;
	}
	.key-control summary h3{ font-size: 20px;}
	.key-control summary h4{
		font-size: 16px;
	}
	.key-wjcontrol summary h3{ 
		font-size: 20px;
		top: -50px;
		left: 50px;
	}
	.key-xinpian summary h3{ font-size: 18px;}
	.key-xinpian summary h2{ font-size: 26px;}
}

@media only screen and (min-width: 768px) {
	.c100-text{
		top: 5%;
		width: 500px;
	}
	.c200-text{
		top: 5%;
		width: 400px;
	}
	.c300-text{
		top: 5%;
		width: 500px;
	}
	.c400-text{
		top: 5%;
		width: 400px;
	}
	.c500-text{
		top: 5%;
    	width: 500px;
	}
	.key-xieyi summary{
		text-align: left;
	}
	.key-view summary{
		margin-top: 60px;
		text-align: left;
	}
	.key-userwork summary{
		margin-top: 150px;
	}
	.key-jieshao summary{
		margin-top: 100px;
	}
	.key-xieyi summary h3,
	.key-xieyi-other summary h3,
	.key-xieyi-other2 summary h3,
	.key-yaogan summary h3,
	.key-view summary h3,
	.key-userwork summary h3,
	.key-jieshao summary h3,
	.key-safe summary h3,
	.key-web summary h3{
		font-size: 25px;
		line-height: 30px;
	}
	.key-xieyi summary span,
	.key-yaogan summary span,
	.key-view summary span,
	.key-jieshao summary span,
	.key-xieyi-other2 summary span,
	.key-safe summary span,
	.key-web summary span{
		font-size: 12px;
		line-height: 20px;
	}
	.key-control summary h3{ font-size: 25px;}
	.key-control summary h4{
		font-size: 18px;
	}
	.key-wjcontrol summary h3{ 
		font-size: 25px;
		top: 0px;
		left: 50px;
	}
	.key-xinpian summary h3{ font-size: 20px;}
	.key-xinpian summary h2{ font-size: 30px;}
}

@media only screen and (min-width: 992px) {
	.c100-text{
		left: 18%;
		top: 25%;
		width: 300px;
	}
	.c200-text{
		right: 10%;
		top: 25%;
		width: 300px;
	}
	.c300-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.c400-text{
		left: 20%;
		top: 40%;
		width: 300px;
	}
	.c500-text{
		left: 18%;
		top: 25%;
		width: 300px;
	}
	.key-xieyi summary{
		text-align: left;
	}
	.key-view summary{
		margin-top: 80px;
		text-align: left;
	}
	.key-userwork summary{
		margin-top: 200px;
	}
	.key-jieshao summary{
		margin-top: 120px;
	}
	.key-xieyi summary h3,
	.key-xieyi-other summary h3,
	.key-xieyi-other2 summary h3,
	.key-yaogan summary h3,
	.key-view summary h3,
	.key-userwork summary h3,
	.key-jieshao summary h3,
	.key-safe summary h3,
	.key-web summary h3{
		font-size: 28px;
		line-height: 40px;
	}
	.key-xieyi summary span,
	.key-xieyi-other2 summary span,
	.key-yaogan summary span,
	.key-view summary span,
	.key-jieshao summary span,
	.key-safe summary span,
	.key-web summary span{
		font-size: 14px;
		line-height: 24px;
	}
	.key-control summary h3{ font-size: 30px;}
	.key-control summary h4{
		font-size: 18px;
	}
	.key-wjcontrol summary h3{ 
		font-size: 30px;
		top: 50px;
		left: 50px;
	}
	.key-xinpian summary h3{ font-size: 25px;}
	.key-xinpian summary h2{ font-size: 35px;}
}

@media only screen and (min-width: 1200px) {
	.c100-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.c200-text{
		right: 15%;
		top: 25%;
		width: 300px;
	}
	.c300-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.c400-text{
		left: 20%;
		top: 40%;
		width: 300px;
	}
	.c500-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.key-xieyi summary{
		text-align: left;
	}
	.key-view summary{
		margin-top: 120px;
		text-align: left;
	}
	.key-userwork summary{
		margin-top: 200px;
	}
	.key-jieshao summary{
		margin-top: 150px;
	}
	.key-xieyi summary h3,
	.key-xieyi-other summary h3,
	.key-xieyi-other2 summary h3,
	.key-yaogan summary h3,
	.key-view summary h3,
	.key-userwork summary h3,
	.key-jieshao summary h3,
	.key-safe summary h3,
	.key-web summary h3{
		font-size: 30px;
		line-height: 40px;
	}
	.key-xieyi summary span,
	.key-xieyi-other2 summary span,
	.key-yaogan summary span,
	.key-view summary span,
	.key-jieshao summary span,
	.key-safe summary span,
	.key-web summary span{
		font-size: 14px;
		line-height: 24px;
	}
	.key-control summary h3{ font-size: 35px;}
	.key-control summary h4{
		font-size: 20px;
	}
	.key-wjcontrol summary h3{ 
		font-size: 35px;
		top: 50px;
		left: 50px;
	}
	.key-xinpian summary h3{ font-size: 25px;}
	.key-xinpian summary h2{ font-size: 35px;}
}

@media only screen and (min-width: 1441px) {
	.c100-text{
		left: 20%;
		top: 25%;
		width: 389px;
	}
	.c200-text{
		right: 20%;
		top: 25%;
		width: 384px;
	}
	.c300-text{
		left: 20%;
		top: 25%;
		width: 471px;
	}
	.c400-text{
		left: 20%;
		top: 40%;
		width: 440px;
	}
	.c500-text{
		left: 20%;
		top: 25%;
		width: 356px;
	}
	.key-xieyi summary{
		text-align: left;
	}
	.key-view summary{
		margin-top: 120px;
		text-align: left;
	}
	.key-userwork summary{
		margin-top: 200px;
	}
	.key-jieshao summary{
		margin-top: 150px;
	}
	.key-xieyi summary h3,
	.key-xieyi-other summary h3,
	.key-xieyi-other2 summary h3,
	.key-yaogan summary h3,
	.key-view summary h3,
	.key-interface summary h3,
	.key-userwork summary h3,
	.key-jieshao summary h3,
	.key-safe summary h3,
	.key-web summary h3{
		font-size: 35px;
		line-height: 50px;
	}
	.key-xieyi summary span,
	.key-xieyi-other2 summary span,
	.key-yaogan summary span,
	.key-view summary span,
	.key-interface summary span,
	.key-jieshao summary span,
	.key-safe summary span,
	.key-web summary span{
		font-size: 16px;
		line-height: 26px;
	}
	.key-control summary h3{ font-size: 40px;}
	.key-control summary h4{
		font-size: 24px;
	}
	.key-wjcontrol summary h3{ 
		font-size: 40px; 
		top: 50px;
		left: 50px;
	}
	.key-xinpian summary h3{ font-size: 30px;}
	.key-xinpian summary h2{ font-size: 40px;}
}


.key-banner{
	position: relative;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.key-banner .banner-text{
	position: absolute;
	vertical-align: middle;
	-webkit-animation:gdownIn .5s .5s both; 
	-moz-animation:gdownIn .5s .5s both; 
	animation:gdownIn .5s .5s both;
}
.key-xieyi{
	overflow: hidden;
	display: block;
	position: relative;
	padding: 250px 0;
	background: url(../images/keyboard/xieyi_bg.jpg) no-repeat top center;
}
.key-xieyi summary{
	display: block;
	opacity: 0;
}
.key-xieyi summary h3{
	color: #fff;
	position: relative;
	display: block;
}
.key-xieyi summary h3 em{
	font-style: normal;
	color: #f10;
}
.key-xieyi summary span{
	color: #757575;
	display: block;
}
.key-xieyi-other{
	overflow: hidden;
	display: block;
	position: relative;
	padding: 70px 0;
	background: url(../images/C400/xieyi.jpg) no-repeat center;
}
.key-xieyi-other summary{
	display: block;
	opacity: 1;
}
.key-xieyi-other summary h3{
	color: #fff;
	position: relative;
	display: block;
}
.key-xieyi-other summary h3 em{
	font-style: normal;
	color: #f10;
}
.key-xieyi-other2{
	overflow: hidden;
	display: block;
	position: relative;
	height: 672px;
	background: url(../images/C300/c300-jump.jpg) no-repeat center;
}
.key-xieyi-other2 summary{
	display: block;
	opacity: 0;
	margin-top: 150px;
}
.key-xieyi-other2 summary h3{
	color: #fff;
	position: relative;
	display: block;
}
.key-xieyi-other2 summary span{
	color: #757575;
	position: relative;
	display: block;
}
.key-yaogan{
	overflow: hidden;
	display: block;
	position: relative;
	background: #fff;
	padding: 100px 0;
}
.key-yaogan summary{
	display: block;
	opacity: 0;
	text-align: center;
}
.key-yaogan summary h3{
	display: block;
	position: relative;
	color: #000;
}
.key-yaogan summary span{
	color: #757575;
	display: block;
}
.key-view{
	display: block;
	position: relative;
	overflow: hidden;
	background: #5B5D65;
	padding: 100px 0;
}
.key-view summary{
	display: block;
	opacity: 0;
}
.key-view summary h3{
	display: block;
	position: relative;
	color: #fff;
}
.key-view summary span{
	color: #000;
	display: block;
}
.key-interface{
	display: block;
	position: relative;
	overflow: hidden;
	background: url(../images/C400/interface.jpg) no-repeat center;
	height: 680px;
}
.key-interface summary{
	margin-top: 100px;
	display: block;
	opacity: 0;
}
.key-interface summary h3{
	display: block;
	position: relative;
	color: #000;
}
.key-interface summary span{
	color: #757575;
	display: block;
}
.key-web{
	overflow: hidden;
	display: block;
	position: relative;
	background: url(../images/keyboard/config_bg.jpg) no-repeat top center;
	padding: 120px 0;
}
.key-web summary{
	display: block;
	position: relative;
	opacity: 0;
}
.key-web summary h3{
	display: block;
	color: #fff;
}
.key-web summary span{
	color: #757575;
	display: block;
}
.key-web img{
	opacity: 0;
	margin: 50px 0;
}
.key-client{
	overflow: hidden;
	display: block;
	position: relative;
	padding: 337px 0;
	background: url(../images/keyboard/qiand_bg.jpg) no-repeat top center;
}
.key-client summary{
	display: block;
	position: absolute;
	opacity: 0;
	bottom: 40px;
}
.key-client summary h3{
	display: block;
	line-height: 60px;
    margin-top: 0;
}
.key-client summary span{
	color: #fff;
	display: block;
	font-size: 30px;
    line-height: 40px;
}
.key-control{
	display: block;
	position: relative;
	overflow: hidden;
	padding-top: 80px;
}
.key-control summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: center;
}
.key-control summary h3{
	display: block;
	color: #000;
	margin-bottom: 20px;
}
.key-control summary h4{
	color: #000;
	display: block;
}
.key-control .icon-box{
	margin: 50px auto 0;
	max-width: 1000px;
}
.key-control .icon-box img{
	margin-bottom: 10px;
}
.key-control .icon-box p{ color: #757575; margin-bottom: 20px; }
.key-control .icon-box .first,.key-control .icon-box .secend,.key-control .icon-box .third,.key-control .icon-box .forth{
	opacity: 0;
}
.key-userwork{
	display: block;
	position: relative;
	overflow: hidden;
	background: #919191;
	padding: 50px 0;
}
.key-userwork summary{
	display: block;
	position: relative;
	opacity: 0;
}
.key-userwork summary h3{
	display: block;
	color: #fff;
	margin-bottom: 20px;
}
.key-jieshao{
	display: block;
	background: #EDEDED;
	position: relative;
	padding: 100px 0;
}
.key-jieshao summary{
	display: block;
	position: relative;
	opacity: 0;
}
.key-jieshao summary h3{
	display: block;
	color: #000;
}
.key-jieshao summary span{
	color: #757575;
	display: block;
}
.key-safe{
	display: block;
	position: relative;
	background: url(../images/C300/c300-global.jpg) no-repeat center;
	height: 680px;
}
.key-safe summary{
	display: block;
	opacity: 0;
	margin-top: 250px;
}
.key-safe summary h3{
	color: #fff;
	position: relative;
	display: block;
}
.key-safe summary span{
	color: #757575;
	position: relative;
	display: block;
}
.key-wjcontrol{
	display: block;
	position: relative;
	background: #34323A;
	padding-top: 100px;
}
.key-wjcontrol summary{
	display: block;
	position: relative;
	opacity: 0;
}
.key-wjcontrol summary h3{
	color: #fff;
	position: relative;
	display: block;
}
.key-xinpian{
	display: block;
	position: relative;
	overflow: hidden;
	background: url(../images/C210/control-xp.jpg) no-repeat center;
	padding: 280px 0;
}
.key-xinpian summary{
	display: block;
	position: relative;
	opacity: 0;
}
.key-xinpian summary h3{
	color: #000;
	position: relative;
	display: block;
}
.key-xinpian summary h2{
	color: #000;
	position: relative;
	display: block;
}