/*----------------------------------------------------
** changemenu
**
** Ver.1.0
**
** copyright 2020 GRANTEST Inc.
**
**----------------------------------------------------*/
.changemenu{
	display:inline-block;
	margin:0 auto;
	position:relative;
	z-index:1;
	padding:2px 0 2px 2px;
	white-space:nowrap;
	border-radius:8px;
	height:32px;
	transform:translate3d(0,0,0);
}
.changemenu > .changebtn{
	display:inline-block;
	border-radius:6px;
	padding:0 7px;
	cursor:pointer;
	line-height:32px;
	font-size:12px;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
	margin:0 2px 0 0;
	color:#333;
	position:relative;
	z-index:3;
	transform:translate3d(0,0,0);
}
.changemenu > span{
	display:block;
	top:2px;
	height:32px;
	background-color:#FFF;
	border-radius:6px;
	position:absolute;
	z-index:1;
	box-shadow:1px 0px 3px #BBB;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
@-webkit-keyframes active{
	0%{
		opacity:0;
		-webkit-transform:scale(0.95);
  }
  100% {
    opacity:1;
  }
}
@keyframes active{
  0%{
    opacity:0;
		transform:scale(0.95);
  }
  100%{
    opacity:1;
  }
}
.changetarget > *{
	display:none;
}
.changetarget > .changeactive{
	display:block;
	-webkit-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
  -webkit-animation-name:active;
	animation-name:active;
}