#menu{
	cursor:pointer;
}
#camera-area{
	display:none;
	background-color:black;
	position:absolute;
	left:0;
	width:100%;
	height:100%;
	z-index:99999999999;
	overflow:hidden;
	bottom:0;
}
	#flash{
		position:fixed;
		background-color:white;
		width:100%;
		height:100%;
		z-index:999999999999999;
		top:0;
		left:0;	
		right:0;
		bottom:0;
		display:none;
	}
#splash{
	display:flex;
	position:fixed;
	z-index:9999;
	background-color:white;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	justify-content:center;
	align-content:center;
}
#splash video{
	margin-top:-50px;
	width:50vh;
}
#footer{
	display:flex;
	position:fixed;
	z-index:9999;
	background-color:white;
	bottom:0;
	padding:0px;
	width:100vw;
	padding-bottom:20px;
}
#footer ul{
	display:flex;
	width:100vw;
	flex-wrap:nowrap;
	justify-content:space-evenly;
}
#footer .btn{
	position: absolute ;
	width:40px;
	height:40px;
	#margin:10px;
	cursor:pointer;
	background-size:80px 40px;
	background-position:40px 0px;
}
#footer ul li{
	text-align:center;	
	min-width:65px;
	padding:5px;
	display:flex;
	position:relative;
	height:65px;
	flex-direction:column;
	justify-content-flex-start;
	align-items:center;
}
#footer span{
	display:block;
	padding:0px;
	margin:0px;
	margin-top:35px;
	
}
#footer .btn.on{
	background-position:0px 0px;
}
#footer .btn.on+span{
	color:#3fa9f5;
}
#footer .btn:hover{
	
}
#btn_home{
	background-image:url( '../images/icon/icon_home.png' );
}
#btn_event{
	background-image:url( '../images/icon/icon_event.png' );
}
#btn_message{
	background-image:url( '../images/icon/icon_message.png' );
}
#btn_coupon{
	background-image:url( '../images/icon/icon_coupon.png' );
}
#btn_wallet{
	background-image:url( '../images/icon/icon_wallet.png' );
}
#home{
	display:flex !important;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}
#front{
	position:absolute;
	transform:rotateY(0deg);
}
#back{
	position:absolute;
	transform:rotateY(180deg);
}
#front.flip{
	transform:rotateY(180deg);
}
#back.flip{
	transform:rotateY(0deg);
}


.member-card{
	transition:all 0.6s;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	max-width:350px;
	min-width:350px;
	width:350px;
	height:480px;
	margin:20px;
	top:70px;
	background-color:rgba(255,255,255,0.8);
	border-radius: 8px;
	box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
	position:relative;
	#background-image: linear-gradient(90deg, rgba(253, 219, 146, 0.87), rgba(209, 253, 254, 1));
	backdrop-filter: blur(5px);
}
#person{
	width:32px;
	height:32px;
	position:absolute;
	top:0;
	width:100%;
	text-align:right;
}
#person-image{
	width:40px;
	height:40px;
	background-color:#cccccc;
	border-radius:40px;
	margin:10px;
	margin-right:15px;
	background-image:url( '../images/icon/icon_person.png' );
	background-size:cover;
	background-position:0 0;
	object-fit:cover;
	
}
.photo-area{
	height:300px;
	width:350px;
	position:absolute;
	display:flex;
	
	justify-content:center;
	background-position:0 100px;
	align-content:center;
}
#member-photo{
	width:200px;
	height:200px;
	background-color:#cccccc;
	margin:0 50%;
	position:absolute;
	top:50px;
	object-fit:cover;
	background-image:url( '../images/icon/icon_person.png' );
	background-size:cover;
}
#v-member-photo{
	width:130px;
	height:150px;
	background-color:#cccccc;
	margin:46px 30px;
	object-fit:cover;
	background-image:url( '../images/icon/icon_person.png' );
	background-size:contain;
	background-position:0 20px;
	background-repeat:no-repeat;
}
.member-label{
	border-top-left-radius:8px;
	position:absolute;
	top:0px;
	left:0px;
	width:190px;
	height:28px;
	padding:12px 28px;
	text-align:left;
	font-weight:bold;
# background-image: linear-gradient(90deg, rgba(226, 207, 255, 1), rgba(251, 253, 191, 1));
#  background-image: linear-gradient(321deg, rgba(255, 255, 255, 0) 24%, rgba(172, 172, 172, 1) 98%);
#  background-image: linear-gradient(90deg, rgba(226, 207, 255, 1), rgba(255, 255, 255, 0) 61%, rgba(251, 253, 191, 0.29));
}
.main-info{
	position:absolute;
	right:20px;
	height:50vh;	
	left:180px;
	top:43px;
}
.member-card p{
	margin-top:-5px;
	color:#333333;
}
.main-info .name>p{
	font-size:16px;
	font-weight:bold;
}
.main-info .name>p.rubi{
	font-size:12px;
	font-weight:revert;
	margin-left:3px;
}
.member-card label{
	font-size:12px;
	font-weight:bold;
}
.sub-info{
	position:absolute;
	right:20px;
	height:35vh;
	left:30px;
	top:200px;
}
.member-no{
	position:absolute;
	left:95px;
}
.member-no p{
	margin-top:-14px !important;
	font-size:24px;
	font-weight:bold;
}
.member-kind{
	position:absolute;
	left:0px;
	top:0px;
}
.member-bar-code-qr{
	padding:45px 30px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	margin:30px;
}
#qr-code canvas{
	width:150px;
	height:150px;
}
p.member-period{
	color:red !important;
	font-weight:bold;
}
#v-current-time{
}
.current-time p{
	position:absolute;
	left:15px;
	bottom:10px;
}
.member-publication-date p{
	margin-left:5px;
	display:inline-block;
}
.member-publication-date{
	position:absolute;
	right:15px;
	bottom:10px;
}
#snap-photo{
	background-image:url( '../images/icon/icon_snap_photo.png' );
#	left:50%;
	top:140px;
}
.circle-btn{
	cursor:pointer;
	width:35px;
	height:35px;
	background-color:#cccccc;
	background-size:contain;
	border-radius:30px;
	position:absolute;
}
.circle-btn.transparent{
	background-color:rgba(128,128,128,0.5) !important;
}
#edit-back{
	background-image:url( '../images/icon/icon_flip.png' );
	right:-10px;
	top:-10px;
}
#edit-member{
	background-image:url( '../images/icon/icon_edit.png' );
	right:-10px;
	top:-10px;
}
#ori-wrapper{
	display:none;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
#ori{
	width:100%;
	height:100%;
	display:flex;
	position:fixed;
	background-color:#000000;
	z-index:999999999;
	top:0;
	left:0;	
	right:0;
	bottom:0;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}
#ori p{
	color:white;
}
body{
}
*{
	user-select:none;
	image-rendering: -webkit-optimize-contrast;
#	padding:0;
#	margin:0;
#	overflow:hidden;
}
	.input-group{
		max-width:220px !important;
		position:relative;
		box-sizing:border-box;
	}
	.member-edit-form{
		position:absolute;
		right:30px;
		left:30px;
		top:280px;
		display:flex;
		flex-direction:column;
		align-items:flex-start;
	}
	.member-edit-form .input-text{
		padding-bottom:10px;
	}
	.member-edit-form label{
		display:inline-block;
		width:60px;
	}
	.clear-button{
		background-image:url( ../images/icon/icon_cross.png );
		background-repeat:no-repeat;
		background-size:contain;
		width:32px;
		height:32px;
		outline:none;
		border-style:none;
		background-color:transparent;
	}
	input{
		border-style:solid;
		border-width:4px;
		border-color:#ececec;
		background-color:#ececec;
		border-radius:20px;
		font-size:16px;
		line-height:28px;
		height:28px;
		outline:none;
		padding:3px;
		padding-right:30px;
		padding-left:10px;
		box-sizing:border-box;
		width:220px;
	}
	input::placeholder{
		font-size:14px;
	}
	.clear-button{
		position:absolute;
		z-index:9999;
		right:-1px;
		top:-2px;
		cursor:pointer;
	}
	.input-text{
		position:relative;
		display:flex;
		justify-content:space-evenly;
		align-items:center;
		
		
	}
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    -webkit-appearance: none;
    height: 28px;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
}
	input[type="date"]{
		text-align:left;
		width:197px;
		padding-left:10px !important;
		border-style:solid;
		border-width:4px;
		font-size:16px !important;
		color:black;
	}

.card-wrap{
	position:relative;
}
#camera{
	width:100vw;
	height:100vh;
	object-fit:cover;	
}
#face-capture{
	width:100vw;
	height:100vh;
	opacity:0;
	object-fit:cover;
}
#qr-reader{
	opacity:0;
}
#qr-reader-overlay,
#qr-reader{
	width:100vw;
	height:100vh;
	object-fit:cover;
}
#qr-reader-overlay{
	position:absolute;
	left:0;
	top:0;
}
#qr-reader-result{

	box-sizing:border-box;
	width:100vw;
	font-size:20px;
	color:red;
	position:absolute;
	background-color:rgba(255,255,255,0.5);
	left:0;
	top:60px;
	height:auto;
	z-index:9999999;
	text-align:center;
}
#camera-area .buttons{
		width:100%;
		position:fixed;
		display:flex;	
		justify-content:space-around;
		height:50px;
		bottom:0;
		left:0;
		right:0;
		padding:10px 10px;
		background-color:rgba(0,0,0,0.5);
		max-height:70px;
}
	#camera-face{
		background-image:url( "../images/icon/icon_face.png" );
	}
	#camera-back{
		background-image:url( "../images/icon/icon_back.png" );
	}
	#camera-take{
		background-image:url( "../images/icon/icon_take_photo.png" );
	}
	#camera-rotate{
		background-image:url( "../images/icon/icon_rotate_camera.png" );
	}
	.c-btn{
		max-width:50px;
		min-height:50px;
		display:block;
		width:50px;
		height:50px;
		background-repeat:no-repeat;
		background-size:contain;
		touch-action:manipulation;
		cursor:pointer;
		transition: all 0.1s ease-out allow-discrete;
	}

		section{
			transition:all 0.2s;
		}
		#section-wrapper{
			position:fixed;
			width:100vw;
			heigh:100vh;
		}
		#home{
			left:0;
		}
		#content{
			width:100vw;
			height:100vh;
			position:fixed;
		}
		#face-recognition{
			position:fixed;
			top:0;
			left:200vw;
			width:100vw;
			height:100vh;
			background-color:transparent;
		}
		#face-area{
			display:flex;
			padding:0;
			margin-top:60px;
			flex-direction:column;
//			flex-direction:row;
			justify-content:flex-start;
			align-items:center;
			
			width:100vw;
			height:calc( 100svh - 75px - 60px );
			position:relative;
		}
		.face-box p{
			padding:10px;
			color:#333333;
			font-size:20px;
			font-weight:bold;
			position:absolute;
  text-shadow:
    1px 1px 0 #fff,
    -1px 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff;
			
		}
		.face-box{
			display:flex;
			flex-direction:column;
			align-items:center;
			background-color:rgba(255,255,255,0.8) !important;
			border-style:solid;
			border-width:5px;
			border-color:rgba(63,169,245,0.2);
//			box-sizing:border-box;
//			border-radius:20px;
//			width:calc( 100vw - 40px );
//			width:250px;
width:80vw;
height:calc( 100vh - 100px );
//			margin:20px;
			box-shadow:rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
		}
		#face-area-top{
			position:relative;
			margin-top:20px;
			margin-bottom:20px;

			background-color:transparent;
			flex:1;
			margin-bottom:20px;
		}
		#face-area-down{
			margin-top:20px;
			margin-bottom:20px;
			background-color:transparent;
			flex:1;
		}
		#face-buttons{
			height:70px;
			position:absolute;
			bottom:0px;
			background-color:rgba(0,0,0,0.5);
			width:80vw;
			height:70px;	
		}
		.face-snap{
			display:block;
			object-fit:cover;
			width:-webkit-fill-available;
		//	height:-webkit-fill-available;
width:80vw;
height:calc( 100svh - 75px - 60px - 40px );
//			margin:20px;
//			width:inhelit;
	//		width:100vw;
			flex:1;
	//		height:max-content;
		}
		#btn-recognition{
			//margin-top:10px;
			cursor:pointer;
			display:none;
			position:absolute;
			width:50px;
			height:50px;
			background-image:url( '../images/icon/icon_face.png' );
			background-size:30px;
			border-radius:300px;
			left:calc( 50% - 25px );
			top:calc( 50% - 25px );
			background-color:#cccccc;
			background-repeat:no-repeat;
			background-position:center;
			box-shadow:rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
			transition: .2s;
			z-index:999999999;
		}
#btn-recognition:before, #btn-recognition:after {
  content: "";
  position: absolute;
  z-index: -10;
  width: 60px;
  height: 60px;
  top: -5px;
  left: -5px;
  border-radius: 80px;
  background: rgba(200,200,200,0.2);
  transform: translate3d(0,0,0);
}

#btn-recognition:before {
  animation: anime 1s ease-out infinite;
}

#btn-recognition:after {
  animation: anime 1s ease-out 1s infinite;
}

@keyframes anime{
0%{transform:scale(.95); opacity:1}
90%{opacity:.1}to{transform:scale(1.2,1.4); opacity:0}
}	

		#QR-entry{

			position:fixed;
			top:0;
			left:100vw;
			width:100vw;
			height:100vh;
			background-color:black;
		}
		#qr-area{
			display:flex;
			width:100vw;
			height:100vh;
		}
		#qr-area p{
			position:absolute;
			left:0;
			top:130px;
			font-size:20px;
			z-index:99999999;
			text-align:center;
			width:100vw;
			color:white;
		}