@charset 'UTF-8';


@-o-keyframes slideIn {
	0% {
		-o-transform:translateY(300px) ;
	}
	100% {
		-o-transform:translateY(0px) ;
	}
}

@-webkit-keyframes slideIn {
	0% {
		-webkit-transform:translateY(300px) ;
	}
	100% {
		-webkit-transform:translateY(0px) ;
	}
}

@-moz-keyframes slideIn {
	0% {
		-moz-transform:translateY(300px) ;
	}
	100% {
		-moz-transform:translateY(0px) ;
	}
}

@-o-keyframes slideOut {
	0% {
		-o-transform:translateY(0px) ;
	}
	100% {
		-o-transform:translateY(300px) ;
	}
}

@-moz-keyframes slideOut {
	0% {
		-moz-transform:translateY(0px) ;
	}
	100% {
		-moz-transform:translateY(300px) ;
	}
}

@-webkit-keyframes slideOut {
	0% {
		-webkit-transform:translateY(0px) ;
	}
	100% {
		-webkit-transform:translateY(100%) ;
	}
}
#kb_p_CLOSE>div{
	height: 60%;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#kb_p_CLOSE8>div{
	height: 60%;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#kb_p_CLOSE9>div{
	height: 60%;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
/*.rowclose>div{
	height: 55%;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}*/
#kb_c_CLOSE,#kb_n_CLOSE,#kb_p_CLOSE82,#kb_p_CLOSE92,#kb_p_CLOSE102,#kb_p_CLOSE112{
	color:#FFFFFF
}
#kb_p_D>div,#kb_p_D3>div,#kb_p_D4>div,#kb_p_D5>div,#kb_p_D6>div,#kb_p_D7>div,#kb_p_D8>div,#kb_p_D9>div,#kb_p_D10>div,#kb_p_D11>div{
	height: 60%;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.rowdelet{
	border-radius: 5px;
}
.rowdelet>div {
	height: 45%;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.row3pwda>div {
	height: 55%;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


#r0left,#r0nleft,#r0sleft,#r03left,#r04left,#r05left,#r06left,#r07left,#r08left,#r09left,#r010left,#r011left{
	width:20%;
    color: #666666;
    position: absolute;
	top: 50%;
	left: 3%;
	font-size:1.1em;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
    text-align: left;
}

#r0title,#r0ntitle,#r0stitle,#r03title,#r04title,#r05title,#r06title,#r07title,#r08title,#r09title,#r010title,#r011title{
	width:60%;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align:center;
	font-size:1em;
	color:#6B6F76;
	font-weight: 400;
}

#r0right,#r0nright,#r0sright,#r03right,#r04right,#r05right,#r06right,#r07right,#r08right,#r09right,#r010right,#r011right{
    color: #1665CA;
    position: absolute;
	top: 50%;
	right: 3%;
	font-size:1.1em;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
    text-align: right;
}

.row0 {
	width: 100%;
	height: 18.68%;
	float: left;
	position: relative;
}

.row1 {
	width: 100%;
	height: 20.31%;
	float: left;
}

.row2 {
	width: 100%;
	margin: 0px 4.935%;
	height: 20.31%;
	float: left;
}

.row3 {
	width: 100%;
	height: 20.31%;
	float: left;
}

.row4{
	width: 100%;
	height: 20.31%;
	float: left;
}
.row5,.row6{
	width: 100%;
	height: 20.31%;
	float: left;
}
.row1pwd {
	width: 8.57%;
	margin-left: 1.3%;
	height: 100%;
	line-height: 1.6em;
	float: left;
	text-align: center;
	font-size: 1.2em;
	color: #202020;
	border-radius: 5px;
}

.row2pwd {
	width: 8.57%;
	margin-left: 1.3%;
	height: 100%;
	line-height: 1.6em;
	float: left;
	text-align: center;
	font-size: 1.2em;
	color: #202020;
	border-radius: 5px;
}


.row3pwdb {
	width: 8.57%;
	margin-left: 1.3%;
	height: 100%;
	line-height: 1.6em;
	float: left;
	text-align: center;
	font-size: 1.2em;
	color: #202020;
	border-radius: 5px;
}

.row3pwda {
	width: 13.505%;
	margin-left : 1.3%;
	height: 100%;
	float: left;
	text-align: center;
	border-radius: 5px;
}


.row3pwdc {
	width: 13.505%;
	margin-left: 1.3%;
	height: 100%;
	float: left;
}

/*.row3pwdd {
	width: 14%;
	margin: 0;
	height: 100%;
	line-height: 1.6em;
	float: left;
	text-align: center;
	font-size: 1.5em;
	color: #202020;
	background-color: transparent;
}*/

.row3pwdd {
	width: 8.57%;
	margin-left: 1.3%;
	height: 100%;
	line-height: 1.6em;
	float: left;
	text-align: center;
	font-size: 1.5em;
	color: #202020;
	border-radius: 5px;
}

#kb_n_D,#kb_n_N,#kb_n_C,#kb_n_CLOSE{
	width:18.44%;
	margin-left:1.3%;
}

.col1{
	width:73.44%;
	height:81.32%;
	float:left;
}

.col2{
	width:26.56%;
	height:81.32%;
	float:right;
}

.row8{
	width: 100%;
	height: 25%;
	float: left;
}

.row82{
	height:25%
}

.row93{
	height:50%
}

.row83{
	height:75%;
}

.row113{
	height:75%;
}

.row102{
	height:25%
}

.row103{
	height:50%
}

.pwd2 {
	width: 30.50%;
	margin-left: 2.83%;
	height: 100%;
	line-height: 1.6em;
	float: left;
	text-align: center;
	font-size: 1.6em;
	border-radius: 5px;
}

.close8 {
	width: 30.50%;
	margin-left: 2.83%;
	height: 100%;
	line-height: 1.6em;
	float: left;
	text-align: center;
	font-size: 1.6em;
	border-radius: 5px;
}

.close82,.close112 {
	height: 96.19%;
	margin-left: 7.84%;
	width: 84.31%;
	line-height: 1.2em;
	float: left;
	text-align: center;
	font-size: 1.2em;
	border-radius: 5px;
	position: relative;
}

.close92,.close102 {
	height: 94.28%;
	margin-left: 7.84%;
	width: 84.31%;
	line-height: 1.2em;
	float: left;
	text-align: center;
	font-size: 1.2em;
	border-radius: 5px;
	position: relative;
}

#close8wen{
	width:100%;
	position: relative;
	top: 50%;
	display:block;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#close9wen{
	width:100%;
	position: relative;
	top: 50%;
	display:block;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#close10wen{
	width:100%;
	position: relative;
	top: 50%;
	display:block;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#close11wen{
	width:100%;
	position: relative;
	top: 50%;
	display:block;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.pwd28 {
	margin-left: 7.84%;
	width: 84.31%;
	line-height: 1.2em;
	float: left;
	text-align: center;
	font-size: 1.2em;
	border-radius: 5px;
}

.pwd8 {
	width: 63.83%;
	margin-left: 2.83%;
	height: 100%;
	line-height: 1.6em;
	float: left;
	text-align: center;
	font-size: 1.6em;
	border-radius: 5px;
}



.row4pwda {
	width: 23.375%;
	margin-left: 1.3%;
	height: 100%;
	line-height: 1.1em;
	float: left;
	text-align: center;
	font-size: 1.1em;
	color: #202020;
	border-radius: 5px;
	
}

.row4pwdb {
	width: 50%;
	margin: 0;
	height: 100%;
	line-height: 1.2em;
	float: left;
	text-align: center;
	font-size: 1.2em;
	color: #202020;
	background-color: transparent;
}

#kb_c_SPACE{
	width: 28.31%;
	margin-left: 1.3%;
	border-radius: 5px;
}

#kb_p_C{
	font-size:1.3em;
}

#kb_c_S{
	width: 18.44%;
	margin-left: 1.3%;
	height: 100%;
	line-height: 1.2em;
	float: left;
	text-align: center;
	font-size: 1.2em;
	color: #202020;
	border-radius: 5px;
}

.rowalone .fd {
	line-height: 80px;
	!important
}

.rowlonely .fd {
	line-height: 20px;
	!important
}

.pwd {
	width: 31.6%;
	margin-left: 1.3%;
	height: 100%;
	line-height: 1.5em;
	float: left;
	text-align: center;
	font-size: 1.5em;
	border-radius: 5px;
}

.pwdkeyboard {
	font-size: 16px;
	position: fixed;
	width: 100%;
	z-index: 1001;
	background: #F2F3F5;
	bottom: 0;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-webkit-touch-callout: none;
	display: none;
	float: left;
	margin-top: 0;
	height: 213px;
	-webkit-animation-name: slideIn;
	-webkit-animation-duration: 0.3s;
	-moz-animation-name: slideIn;
	-moz-animation-duration: 0.3s;
	-o-animation-name: slideIn;
	-o-animation-duration: 0.3s;
}

.pwdkeyboardout {
	font-size: 16px;
	position: fixed;
	width: 100%;
	z-index: 100;
	background: #F2F3F5;
	bottom: 0;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	display: none;
	float: left;
	margin-top: 0;
	height: 213px;
	-webkit-animation-name: slideOut;
	-webkit-animation-duration: 0.3s;
	-moz-animation-name: slideOut;
	-moz-animation-duration: 0.3s;
	-o-animation-name: slideOut;
	-o-animation-duration: 0.3s;
}

.pwdkeyboardout2 {
	font-size: 16px;
	position: fixed;
	width: 100%;
	z-index: 100;
	background: #F2F3F5;
	bottom: -300px;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	display: none;
	float: left;
	margin-top: 0;
	height: 213px;
}
/* 兼容iphone X
 * 或者这么写
 * @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio : 3){
 *	#testkbid{
 *		padding-bottom:constant(safe-area-inset-bottom);
 *	}
 * }
 * 其中constant(safe-area-inset-bottom)可以为具体值如：10px
 **/
@supports(bottom:constant(safe-area-inset-bottom)) {
	#testkbid{
		padding-bottom: constant(safe-area-inset-bottom);
	}
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
keyboard.css
*/