/* btn */
.%css-ctar% .aiin-btn {
	position:relative;
	display:inline-block;
	width:200px;
	height:120px;
	text-align:center;

	cursor:pointer;
	user-select:none;
	-moz-user-select:none;
	-webkit-tap-highlight-color:transparent;
	line-height:0;
}
/* box */
.%css-ctar% .aiin-t-box,
.%css-ctar% .aiin-b-box {
	position:absolute;
	left:0;
	width:100%;
	height:50%;
}
.%css-ctar% .aiin-t-box {
	top:0;
}
.%css-ctar% .aiin-b-box {
	bottom:0;
}
/* origin */
.%css-ctar% .aiin-t-origin {
	transform-origin:50% 0%;
}
.%css-ctar% .aiin-b-origin {
	transform-origin:50% 100%;
}
/* frame */
.%css-ctar% .aiin-frame {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:transform 0.6s;
	overflow:hidden;
}
.%css-ctar% .aiin-frame1 {
	transform:scaleY(1);
}
.%css-ctar% .aiin-frame2 {
	transform:scaleY(0);
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-frame1,
.%css-ctar% .aiin-btn:hover .aiin-frame1 {
	transform:scaleY(0);
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-frame2,
.%css-ctar% .aiin-btn:hover .aiin-frame2 {
	transform:scaleY(1);
}
/* pic */
.%css-ctar% .aiin-pic {
	position:absolute;
	left:0;
	width:100%;
	height:200%;
}
.%css-ctar% .aiin-t-pic {
	top:0;
}
.%css-ctar% .aiin-b-pic {
	bottom:0;
}
.%css-ctar% .aiin-pic1 {
	background:url("%url-tpl%img/pic1.jpg");
	background-size:cover;
	background-position:center center;
}
.%css-ctar% .aiin-pic2 {
	background:url("%url-tpl%img/pic2.jpg");
	background-size:cover;
	background-position:center center;
}
/* tint */
.%css-ctar% .aiin-tint {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	transition:opacity 0.6s;
}
.%css-ctar% .aiin-tint-0-1 {
	opacity:0;
}
.%css-ctar% .aiin-tint-1-0 {
	opacity:1;
}
.%css-ctar% .aiin-btn.aiin-sel  .aiin-tint-0-1,
.%css-ctar% .aiin-btn:hover .aiin-tint-0-1 {
	opacity:1;
}
.%css-ctar% .aiin-btn.aiin-sel  .aiin-tint-1-0,
.%css-ctar% .aiin-btn:hover .aiin-tint-1-0 {
	opacity:0;
}
/* label */
.%css-ctar% .aiin-label-ctar {
	display:inline-block;
	position:absolute;
	top:13%;
	left:4%;
	padding:4px 12px;
	background-color:rgba(255,255,255,0.6);
	border-radius:10px;
}
.%css-ctar% .aiin-label {
	height:12px;
	line-height:1;
	opacity:0.7;
}
/* vcnt */
.%css-ctar% .aiin-vcnt-ctar {
	display:inline-block;
	position:absolute;
	bottom:13%;
	left:4%;
	padding:4px 12px;
	background-color:rgba(255,255,255,0.6);
	background:linear-gradient(
		50deg,
		rgba(255,255,255,0.6) 0%,
		rgba(255,255,255,0.6) 20%,
		rgba(255,255,255,0.9) 50%,
		rgba(255,255,255,0.6) 80%,
		rgba(255,255,255,0.6) 100%);
	border-radius:10px;
}
.%css-ctar% .aiin-vcnt {
	color:black;
	font-weight:bold;
	font-family:"Arial";
	font-size:13px;
	line-height:1;
}
/* check */
.%css-ctar% .aiin-check-board {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
.%css-ctar% .aiin-check {
	position:absolute;
	bottom:8%;
	right:4%;
	width:12px;
	height:12px;
	background:url("%url-tpl%img/check.png");
	background-size:cover;
	background-position:center center;

	opacity:0;
	transform:rotateZ(-150deg) translate(180px,-100px) scale(10);
	transition:opacity 1s, transform 1s;
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-check {
	opacity:1;
	transform:rotateZ(0deg) translate(0px,0px) scale(1);
}