/* 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;
}
.%css-ctar% .aiin-framediv1 {
	position:relative;
	overflow:hidden;
	border:1px solid #ccc;
	width:160px;
	height:80px;
}
.%css-ctar% .aiin-middlediv1 {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
/* main */
.%css-ctar% .aiin-rollingboard1-main {
	width:260px;
	border:1px solid red;
	background-color:#fff;
}
.%css-ctar% .aiin-btn:hover .aiin-rollingboard1-main {
	animation-name:%css-ctar%-kf-rollingboard1-main;
	animation-duration:4s;
}
@keyframes %css-ctar%-kf-rollingboard1-main {
	15% {
		transform:rotateZ(-25deg);
	}
	70% {
		transform:rotateZ(5deg);
	}
}
/* boxes */
.%css-ctar% .aiin-rollingboard1-box-top {
	padding-top:65px;
	text-align:center;
}
.%css-ctar% .aiin-rollingboard1-box-bottom {
	border-color:#ccc;
	border-width:1px 0 0 0;
	border-style:solid;
	padding-bottom:65px;
	background:#eee;
}
/* balls */
.%css-ctar% .aiin-rollingboard1-ball {
	position:relative;
	display:inline-block;
}
.%css-ctar% .aiin-btn:hover .aiin-rollingboard1-ball {
	animation-name:%css-ctar%-kf-rollingboard1-ball;
	animation-duration:4s;
}
@keyframes %css-ctar%-kf-rollingboard1-ball {
	20% {
		transform:translateX(-180px);
	}
	20.0001% {
		transform:translateX(180px);
	}
	70% {
		transform:translateX(-10px);
	}
}
.%css-ctar% .aiin-rollingboard1-ball-inner {
	position:relative;
	width:30px;
	height:30px;
	line-height:30px;
	border-radius:50%;
	text-align:center;
	background:linear-gradient(to bottom,#34c,#79f);
}
.%css-ctar% .aiin-rollingboard1-ball-inner span {
	font-weight:bold;
	color:white;
	vertical-align:middle;
}
.%css-ctar% .aiin-btn:hover .aiin-rollingboard1-ball-inner {
	animation-name:%css-ctar%-kf-rollingboard1-ball-inner;
	animation-duration:4s;
}
@keyframes %css-ctar%-kf-rollingboard1-ball-inner {
	0% {
		transform:rotateZ(0deg);
	}
	70% {
		transform:rotateZ(-380deg);
	}
	100% {
		transform:rotateZ(-360deg);
	}
}
.%css-ctar% .aiin-rollingboard1-box-vcnt {
	position:relative;
	left:3px;
	text-align:center;
	font-size:12px;
	color:red;
	font-weight:bold;
	font-style:italic;
	text-shadow:0 0 1px #888;
	line-height:1.6;
}
.%css-ctar% .aiin-btn:hover .aiin-rollingboard1-box-vcnt {
	animation-name:%css-ctar%-kf-rollingboard1-box-vcnt;
	animation-duration:4s;
}
@keyframes %css-ctar%-kf-rollingboard1-box-vcnt {
	20% {
		left:-30px;
	}
	70% {
		left:+20px;
	}
}
.%css-ctar% .aiin-filldiv1 {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}
.%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 2s, transform 2s;
}
.%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:rotateZ(-30deg);
	transform-origin:+200% 0;
	transition:opacity <?php echo 2s; ?>, transform <?php echo 2s; ?> cubic-bezier(.77,1.37,.84,1.1);
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-vmstd1-on {
	transform:rotateZ(0);
}