@charset "utf-8";

@media screen and (min-width: 768px) {
	.mnkey-banner .mnkey4001CT{
		top: 5%;
		width: 400px;
	}
	.mnkey-banner .mnkey4101HT{
		top: 10%;
		width: 400px;
	}
	.mnkey-banner .mnkey4001ET{
		top: 5%;
		width: 400px;
	}
	.mnkey-banner .mnkey4101FT{
		top: 10%;
		width: 400px;
	}
	.mnkey-banner .mnkey4002AT{
		top: 5%;
		width: 400px;
	}
	.mnkey-banner .mnkeyRMD2{
		top: 10%;
		width: 400px;
	}
	.mnkey-banner .mnkeyRM32TC{
		top: 10%;
		width: 400px;
	}
	.mnkey-one summary h3,
	.mnkey-yaogan summary h3,
	.mnkey-yaogan figure h3,
	.mnkey-control summary h3,
	.mnkey-two summary h3,
	.mnkey-pwdon summary h3,
	.mnkey-three summary h3,
	.mnkey-cloud summary h3{
		font-size: 25px;
	}
	.mnkey-one summary span,
	.mnkey-yaogan summary span,
	.mnkey-yaogan figure span,
	.mnkey-control summary span,
	.mnkey-two summary span,
	.mnkey-pwdon summary span,
	.mnkey-three summary span,
	.mnkey-cloud summary span{
		font-size: 14px;
	}
	.mnkey-one summary{ margin-top: 60%; text-align: left;}
	.mnkey-pwdon summary{ margin-top: 50%;}
}

@media screen and (min-width: 992px) {
	.mnkey-banner .mnkey4001CT{
		right: 10%;
		top: 20%;
		width: 300px;
	}
	.mnkey-banner .mnkey4101HT{
		right: 10%;
		top: 20%;
		width: 300px;
	}
	.mnkey-banner .mnkey4001ET{
		right: 10%;
		top: 20%;
		width: 300px;
	}
	.mnkey-banner .mnkey4101FT{
		right: 10%;
		top: 20%;
		width: 300px;
	}
	.mnkey-banner .mnkey4002AT{
		right: 10%;
		top: 20%;
		width: 300px;
	}
	.mnkey-banner .mnkeyRMD2{
		right: 10%;
		top: 20%;
		width: 300px;
	}
	.mnkey-banner .mnkeyRM32TC{
		left: 10%;
		top: 20%;
		width: 300px;
	}
	.mnkey-one summary h3,
	.mnkey-yaogan summary h3,
	.mnkey-yaogan figure h3,
	.mnkey-control summary h3,
	.mnkey-two summary h3,
	.mnkey-pwdon summary h3,
	.mnkey-three summary h3,
	.mnkey-cloud summary h3{
		font-size: 25px;
	}
	.mnkey-one summary span,
	.mnkey-yaogan summary span,
	.mnkey-yaogan figure span,
	.mnkey-control summary span,
	.mnkey-two summary span,
	.mnkey-pwdon summary span,
	.mnkey-three summary span,
	.mnkey-cloud summary span{
		font-size: 14px;
	}
	.mnkey-one summary{ margin-top: 60%; text-align: left;}
	.mnkey-pwdon summary{ margin-top: 50%;}
}

@media screen and (min-width: 1200px) {
	.mnkey-banner .mnkey4001CT{
		right: 20%;
		top: 25%;
		width: 300px;
	}
	.mnkey-banner .mnkey4101HT{
		right: 15%;
		top: 25%;
		width: 300px;
	}
	.mnkey-banner .mnkey4001ET{
		right: 20%;
		top: 25%;
		width: 300px;
	}
	.mnkey-banner .mnkey4101FT{
		right: 20%;
		top: 25%;
		width: 300px;
	}
	.mnkey-banner .mnkey4002AT{
		right: 20%;
		top: 25%;
		width: 300px;
	}
	.mnkey-banner .mnkeyRMD2{
		right: 20%;
		top: 25%;
		width: 300px;
	}
	.mnkey-banner .mnkeyRM32TC{
		left: 20%;
		top: 15%;
		width: 300px;
	}

	.mnkey-one summary h3,
	.mnkey-yaogan summary h3,
	.mnkey-yaogan figure h3,
	.mnkey-control summary h3,
	.mnkey-two summary h3,
	.mnkey-pwdon summary h3,
	.mnkey-three summary h3,
	.mnkey-cloud summary h3{
		font-size: 35px;
	}
	.mnkey-one summary span,
	.mnkey-yaogan summary span,
	.mnkey-yaogan figure span,
	.mnkey-control summary span,
	.mnkey-two summary span,
	.mnkey-pwdon summary span,
	.mnkey-three summary span,
	.mnkey-cloud summary span{
		font-size: 16px;
	}
	.mnkey-one summary{ margin-top: 60%; text-align: left;}
	.mnkey-pwdon summary{ margin-top: 50%;}
}

@media screen and (min-width: 1441px) {
	.mnkey-banner .mnkey4001CT{
		right: 20%;
		top: 25%;
		width: 335px;
	}
	.mnkey-banner .mnkey4101HT{
		right: 15%;
		top: 25%;
		width: 388px;
	}
	.mnkey-banner .mnkey4001ET{
		right: 20%;
		top: 25%;
		width: 335px;
	}
	.mnkey-banner .mnkey4101FT{
		right: 20%;
		top: 25%;
		width: 388px;
	}
	.mnkey-banner .mnkey4002AT{
		right: 20%;
		top: 25%;
		width: 335px;
	}
	.mnkey-banner .mnkeyRMD2{
		right: 20%;
		top: 25%;
		width: 329px;
	}
	.mnkey-banner .mnkeyRM32TC{
		left: 20%;
		top: 15%;
		width: 385px;
	}

	.mnkey-one summary h3,
	.mnkey-yaogan summary h3,
	.mnkey-yaogan figure h3,
	.mnkey-control summary h3,
	.mnkey-two summary h3,
	.mnkey-pwdon summary h3,
	.mnkey-three summary h3,
	.mnkey-cloud summary h3{
		font-size: 35px;
	}
	.mnkey-one summary span,
	.mnkey-yaogan summary span,
	.mnkey-yaogan figure span,
	.mnkey-control summary span,
	.mnkey-two summary span,
	.mnkey-pwdon summary span,
	.mnkey-three summary span,
	.mnkey-cloud summary span{
		font-size: 16px;
	}
	.mnkey-one summary{ margin-top: 60%; text-align: left;}
	.mnkey-pwdon summary{ margin-top: 50%;}
}

.mnkey-banner{
    position: relative;
    font-size: 18px;
    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;
}
.mnkey-banner .mnkey-banner-text{
	position: absolute;
	vertical-align: middle;
	-webkit-animation:gdownIn .5s .5s both; 
	-moz-animation:gdownIn .5s .5s both; 
	animation:gdownIn .5s .5s both;
}

.mnkey-one{
	display: block;
	position: relative;
	background: url(../images/keyboard/key_xieyi_bg.jpg) no-repeat center;
	background-size: cover;
	min-height: 680px;
}
.mnkey-one summary{
	opacity: 0;
}
.mnkey-one summary h3{
	color: #fff;
	margin-bottom: 30px;
}
.mnkey-one summary span{
	color: #666;
	line-height: 25px;
	display: block;
}
.mnkey-yaogan{
	display: block;
	position: relative;
	overflow: hidden;
}
.mnkey-yaogan summary{
	margin-top: 80px;
	opacity: 0
}
.mnkey-yaogan summary h3{
	color: #000;
	margin-bottom: 20px;
	animation-delay: .5s;
}
.mnkey-yaogan summary span{
	color: #666;
	line-height: 25px;
	display: block;
}
.mnkey-yaogan .yaogan-box{
	margin: 50px 0;
	display: block;
}
.mnkey-yaogan figure{
	margin-top: 80px;
	opacity: 0;
}
.mnkey-yaogan figure h3{
	color: #000;
	margin-bottom: 20px;
	animation-delay: .5s;
}
.mnkey-yaogan figure span{
	color: #666;
	line-height: 25px;
	display: block;
}
.mnkey-yaogan .yaogan-img-box{
	margin:50px auto;
	list-style: none;
	display: block;
	width: 100%;
}
.mnkey-yaogan .yaogan-img-box li{
	float: left;
	width: 33.3%;
}
.mnkey-yaogan .yaogan-img-box2{
	margin: 50px auto;
	display: block;
	width: 100%;
}
.mnkey-control{
	display: block;
	position: relative;
	background: #f0f0f0;
	padding-bottom: 80px;
	overflow: hidden;
}
.mnkey-control summary{
	padding-top: 80px;
	opacity: 0;	
}
.mnkey-control summary h3{
	color: #000;
	margin-bottom: 20px;
	animation-delay: .5s;
}
.mnkey-control summary span{
	color: #666;
	line-height: 25px;
	display: block;
}
.mnkey-two{
	display: block;
	position: relative;
	background: url(../images/4001CT/4001CT_02.jpg) no-repeat center;
	background-size: cover;
	min-height: 617px;
	margin-top: 50px;
}
.mnkey4101-two{
	background: url(../images/4101FT/4101FT_02.jpg) no-repeat center;
}
.mnkey4101HT-two{
	background: url(../images/4101HT/4101HT_02.jpg) no-repeat center;
}
.mnkey4001ET-two{
	background: url(../images/4001ET/4001ET_02.jpg) no-repeat center;
	margin-top: 0;
}
.mnkey4002AT-two{
	background: url(../images/4002AT/4002AT_03.jpg) no-repeat center;
	margin-top: 0;
}
.mnkeyRMD2-two{
	background: url(../images/RMD2/RMD2_02.jpg) no-repeat center;
	margin-top: 0;
}
.mnkeyRM32TC-two{
	background: url(../images/RM32TC/RM32TC_02.jpg) no-repeat center;
	margin-top: 0;
}
.mnkey-two summary{
	margin-top: 80px;
	opacity: 0;
}
.mnkey-two summary h3{
	color: #fff;
	margin-bottom: 20px;
}
.mnkey-two summary span{
	color: #787878;
	line-height: 25px;
	display: block;
}
.mnkey-pwdon{
	display: block;
	position: relative;
	background: #fff;
}
.mnkey-pwdon summary{
	opacity: 0;
}
.mnkey-pwdon summary h3{
	color: #000;
	margin-bottom: 20px;
}
.mnkey-pwdon summary span{
	color: #666;
	line-height: 25px;
	display: block;
}
.mnkey-three{
	display: block;
	position: relative;
	background: #F0F0F0;
	overflow: hidden;
}
.mnkey-three summary{
	padding-top: 50px;
	margin-bottom: 50px;
	opacity: 0;
}
.mnkey-three summary h3{
	color: #000;
	margin-bottom: 20px;
}
.mnkey-three summary span{
	color: #666;
	line-height: 25px;
	display: block;
}
.mnkey-cloud{
	display: block;
	position: relative;
	overflow: hidden;
	background: #fff;
}
.mnkey-cloud summary{
	padding-top: 50px;
	margin-bottom: 50px;
	opacity: 0;
	animation-delay: .5s;
}
.mnkey-cloud summary h3{
	color: #000;
	margin-bottom: 20px;
}
.mnkey-cloud summary span{
	color: #666;
	line-height: 25px;
	display: block;
}
.mnkey-cloud .first, .mnkey-cloud .secend, .mnkey-cloud .third, .mnkey-cloud .forth{
	opacity: 0;
}
.mnkey-cloud p{
	margin-top: 20px;
	color: #666;
}
.mnkey-cloud .control{
	margin-top: 20px;
}