/* btn */
.%css-ctar% .aiin-btn {
	position:relative;
	display:inline-block;
	cursor:pointer;
	user-select:none;
	-moz-user-select:none;
	-webkit-tap-highlight-color:transparent;
	line-height:0;
}
/* gradframe */
.%css-ctar% .aiin-gradframe1 {
	position:relative;
	padding-top:20px;
	background-color:#800;
	border:4px double #c44;
	border-radius:5px;
	box-shadow:1px 1px 3px 0 #f88;
	overflow: hidden;
	width:80px;
	height:80px;
}
.%css-ctar% .aiin-btn:active .aiin-gradframe1 {
	top:1px;
	left:1px;
	box-shadow:none;
}
/* gradframe:circle */
.%css-ctar% .aiin-gradframe1-circle {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.%css-ctar% .aiin-gradframe1-circle1 {
	background:radial-gradient(circle at top left,white,white 3%,rgba(255,255,255,0) 50%, rgba(255,255,255,0));
}
.%css-ctar% .aiin-gradframe1-circle2 {
	background:radial-gradient(circle at bottom right,white,white 3%,rgba(255,255,255,0) 50%, rgba(255,255,255,0));
}
/* slashpanel */
.%css-ctar% .aiin-slashcontent1 {
	transform:rotateZ(-25deg);
}
/* slashlabel */
.%css-ctar% .aiin-slashlabel1 {
	position:relative;
	left:6px;
	height:18px;
	background:url(%url-tpl%img/label.png);
	background-size:auto 100%;
	background-repeat:no-repeat;
}
.%css-ctar% .aiin-btn:hover .aiin-slashlabel1 {
	animation-name:%css-ctar%-kf-slashlabel1-hover;
	animation-duration:1.3s;
}
@keyframes %css-ctar%-kf-slashlabel1-hover {
	20% {
		left:-100px;
	}
	20.1% {
		left:100px;
	}
}
/* slashline */
.%css-ctar% .aiin-slashline1 {
	margin:3px 0 8px 0;
	overflow:hidden;
}
.%css-ctar% .aiin-slashline1-fill {
	position:relative;
	height:1px;
	width:100%;
	left:-100%;
	background-color:white;
}
.%css-ctar% .aiin-btn:hover .aiin-slashline1-fill {
	animation-name:%css-ctar%-kf-slashline1-fill-hover;
	animation-duration:1s;
	animation-timing-function:linear;
}
@keyframes %css-ctar%-kf-slashline1-fill-hover {
	0% {
		left:-100%;
		opacity:1;
	}
	100% {
		left:100%;
		opacity:0.5;
	}
}
/* slashvcnt */
.%css-ctar% .aiin-slashvcnt1 {
	position:relative;
	text-align:center;
}
.%css-ctar% .aiin-slashvcnt1-vcnt {
	position:relative;
	left:-3px;
	text-align:center;
	font-size:12px;
	color:yellow;
	font-weight:bold;
	font-style:italic;
	text-shadow:0 0 3px #888;
}
.%css-ctar% .aiin-btn:hover .aiin-slashvcnt1-vcnt {
	animation-name:%css-ctar%-kf-slashvcnt1-vcnt-hover;
	animation-duration:1.3s;
}
@keyframes %css-ctar%-kf-slashvcnt1-vcnt-hover {
	20% {
		left:100px;
	}
	20.1% {
		left:-100px;
	}
}
.%css-ctar% .aiin-ipos1 {
	position:absolute;
	width:15px;
	height:15px;
	bottom:2px;
	right:2px;
}
/* vmark */
.%css-ctar% .aiin-vmstd1 {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:opacity 1s, transform 1s;
}
.%css-ctar% .aiin-vmstd1-on {
	background:url("%url-tpl%img/vmark-on.png");
	background-size:100% 100%;
	opacity:0;
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-vmstd1-on {
	opacity:1;
}
/* action */
.%css-ctar% .aiin-vmstd1-on {
	transform:rotateY(-180deg);
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-vmstd1-on {
	transform:rotateY(0);
}