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

*[data-role="number"] {
	padding-right: 2px; /*为了使自制的光标效果和文字拉开距离*/
	cursor:pointer;
}

*[data-role="number"].target {
	position: relative; /*使用::after自制光标效果*/
	text-align: right;
	overflow-x: hidden;
	cursor:pointer;
}

*[data-role="number"].target::after {
	z-z-index:1000;
	content: "";
	width: 1px;
	height: 16px;
	background-color: rgba(0, 0, 0, 1);
	position: absolute;
	top: 50%;
	right: 0.1rem;/*光标右侧距离*/
	-webkit-transform: translateY(-50%) scaleX(0.5);
	-moz-transform: translateY(-50%) scaleX(0.5);
	transform: translateY(-50%) scaleX(0.5);
	/*光标闪烁*/
	-webkit-animation: _cursor 1s linear 0s infinite;
	-moz-animation: _cursor 1s linear 0s infinite;
	animation: _cursor 1s linear 0s infinite;
}

@-webkit-keyframes _cursor {
    0%, 100% {
        background-color: rgba(0, 0, 0, 1);
    }
    50% {
        background-color: rgba(0, 0, 0, 0);
    }
}

@-moz-keyframes  _cursor {
    0%, 100% {
        background-color: rgba(0, 0, 0, 1);
    }
    50% {
        background-color: rgba(0, 0, 0, 0);
    }
}

@keyframes _cursor {
    0%, 100% {
        background-color: rgba(0, 0, 0, 1);
    }
    50% {
        background-color: rgba(0, 0, 0, 0);
    }
}

.layer.n_layer {
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
    z-index: 9000;
    overflow: hidden;
	position: fixed;
}

.n_layer .n_box {
	/*数字键盘 外部*/
	width: 100%;
	height: 10rem;
	background-color: rgba(22, 22, 22, 1);
	pointer-events: auto;
	
	position: absolute;
	right: 0px;
	bottom: 0px;
	left: 0px;
}

.n_layer .n_box > *.n_b_b {
	/*键盘右半部分 包含"完成"按钮和"删除"按钮*/
	width: 25%;
	display: block;
	
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

.n_b_b > * {
	width: 100%;
	height: 5rem;
	position: relative;
}

.n_b_b .n_btn_c {
	/* "完成"按钮 */
	color: #FFF;
	line-height: 5rem;
	font-weight: bold;
	text-align: center;
}

.n_box .n_btn_c::before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #555;
	position: absolute;
	top: 0px;
	right: 0px;
	left: -1px;
	-webkit-transform: scaleY(0.5);
	-moz-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.n_box .n_btn_d > .b_icon_b {
	width: 30px;
	height: 20px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.b_icon_b > .b_icon_1 {
	width: 10px;
	height: 20px;
	border-style: solid;
	border-color: transparent #FFF transparent transparent;
	border-width: 10px 10px 10px 0px;
	display: block;
	
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 1px;
}

.b_icon_b > .b_icon_2 {
	width: 20px;
	height: 20px;
	background-color: #FFF;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

.b_icon_b > .b_icon_2::before {
	content: "";
	width: 12px;
	height: 2px;
	background-color: rgba(22, 22, 22, 1);
	
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	-moz-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
}

.b_icon_b > .b_icon_2::after {
	content: "";
	width: 12px;
	height: 2px;
	background-color: rgba(22, 22, 22, 1);
	
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	-moz-transform: translate(-50%, -50%) rotate(-45deg);
	transform: translate(-50%, -50%) rotate(-45deg);
}

.n_layer .n_box > *.n_num_b {
	/*键盘左半部分，包含数字按键 . - */
	width: 75%;
	height: 2rem;
	display: block;
	
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	
	display: -webkit-box;
	display: -moz-box;
	display: box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	box-orient: horizontal;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	box-lines: multiple;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}

.n_num_b > * {
	width: 33.3%;
	line-height: 2.5rem;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	position: relative;
}

.n_num_b > *:nth-child(3n-1) {
	/*第二列*/
	width: 33.4%;
}

.n_num_b > *::before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #555;
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	-webkit-transform: scaleY(0.5);
	-moz-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.n_num_b > *::after {
	content: "";
	width: 1px;
	height: 100%;
	background-color: #555;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	-webkit-transform: scaleX(0.5);
	-moz-transform: scaleX(0.5);
	transform: scaleX(0.5);
}

.n_num_b > *:nth-child(-n+3)::before {
	content: "";
	height: 0px;
}

.n_num_b > *:active, .n_b_b > *:active {
	background-color: #444;
}