@charset "utf-8";

#wrap {
	position:relative;
	width:100%;
	height:100vh;
	background:rgba(8 60 153 / 0.03);
}

.num-wrap {
	width:100%;
	position: absolute;
	bottom:30px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	text-align: center;
}

h1 {
	width:120px;
	margin:0 auto;
	padding-top:25px;
}

.view {
	font-size: 32px;
	font-weight: 500;
	margin-bottom: 20px;
	color: #252525;
}

ul.key-pad {
	display: inline-block;
	width: 300px;
	text-align: center;
	font-size: 0;
}

ul.key-pad li {
	position:relative;
	display:inline-block;
	cursor:pointer;
	width: 27%;
	padding-bottom:27%;
	border-radius:100%;
	margin:2.5%;
	background: #fff;
	border:1px solid rgba(8 60 153 / 0.1);
	-webkit-transition: all 0.2s;
    transition: all 0.2s;
}

ul.key-pad li:active {
	background-color: rgba(8 60 153 / 1);
}

ul.key-pad li:nth-child(1),
ul.key-pad li:nth-child(4),
ul.key-pad li:nth-child(7),
ul.key-pad li:nth-child(10) {
	margin-left:0;
}

ul.key-pad li:nth-child(3),
ul.key-pad li:nth-child(6),
ul.key-pad li:nth-child(9),
ul.key-pad li:nth-child(12) {
	margin-right:0;
}

ul.key-pad li:nth-child(13) {
	background-color: rgba(8 60 153 / 1);
	border-color:rgba(8 60 153 / 1);
}

ul.key-pad li:nth-child(13) a {
	color:#fff;
}

ul.key-pad li a {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size:19px;
	font-weight:500;
	color:rgba(8 60 153 / 1);
}

ul.key-pad li:active a {
	color:#fff;
}

.num-wrap p {
	font-size: 10px;
	color: rgba(8 60 153 / 0.4);
	padding-top:20px;
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	ul.key-pad {
		width:30% !important;
	}
}

@media screen and (max-width: 1024px) {
	ul.key-pad {
		width:50%;
	}
	
	ul.key-pad li a {
		font-size:22px;
	}
}

@media screen and (max-width: 767px) {
	h1 {
		padding-top:17px;
		width: 70px;
	}
	
	ul.key-pad {
		width:70%;
	}

	ul.key-pad li a {
		font-size:19px;
	}
}