@charset "UTF-8";
/* CSS Document */

.CFBanner180x180 {
	display: block;
	position: relative;
	width: 180px;
	height: 180px;
	overflow: hidden;
	background: #009BB4;
	font-family: 'Kanit', sans-serif;
	color:#4b4b4a;
	border:1px solid #CCC;
	box-sizing: border-box;
}

.CFClickArea {
	display: block;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index: 1000;
}


.CFBanner180x180 .CFMotoLogo {
	display: block;
	position: absolute;
	top:-15px;
	left:0px;
	width: 180px;
	height: 180px;
	z-index:11;
	animation-name: CFMotoLogo;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateY(0px);
}

@keyframes CFMotoLogo {
	0%		{transform:translateY(0px)}
	8%		{transform:translateY(0px)}
	10%		{transform:translateY(-180px)}
	93%		{transform:translateY(-180px)}
	95%		{transform:translateY(0px)}
	100%	{transform:translateY(0px)}
}



.CFBanner180x180 .CFExperience {
	display: block;
	position: absolute;
	height: 60px;
	top:60px;
	right:15px;
	animation-name: CFExperience;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:scale(.1);
	opacity: 0;
}

@keyframes CFExperience {
	0%		{transform:scale(.1); opacity:0;}
	86%		{transform:scale(.1); opacity:0;}
	88%		{transform:scale(1); opacity:1;}
	93%		{transform:scale(1); opacity:1;}
	95%		{transform:scale(1); opacity:0;}
	100%	{transform:scale(1); opacity:0;}
}


.CFBanner180x180 .CFMotoLink {
	display: block;
	position: absolute;
	bottom:10px;
	left:0;
	width: 100%;
	z-index:2;
	font-size: 1.2em;
	font-weight: 600;
	color: #FFF;
	text-align: center;
	animation-name: CFMotoLink;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateY(0px);
}

@keyframes CFMotoLink {
	0%		{transform:translateY(0px)}
	7%		{transform:translateY(0px)}
	8%		{transform:translateY(180px)}
	95%		{transform:translateY(180px)}
	96%		{transform:translateY(0px)}
	100%	{transform:translateY(0px)}
}




.CFBanner180x180 .CFBlockImg {
	display: block;
	position: absolute;
	top:0;
	left:0px;
	width: 180px;
	height: 180px;
	background: no-repeat center center;
}

.CFBanner180x180 .CFSlide1 .CFBlockImg {
	background-image: url(../images/cf-foto1.jpg);
	animation-name: CFSlide1;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(-180px);
}

@keyframes CFSlide1 {
	0%		{transform:translateX(-180px)}
	8%		{transform:translateX(-180px)}
	10%		{transform:translateX(0px)}
	18%		{transform:translateX(0px)}
	20%		{transform:translateX(180px)}
	100%	{transform:translateX(180px)}
}

.CFBanner180x180 .CFSlide2 .CFBlockImg {
	background-image: url(../images/cf-foto2.jpg);
	animation-name: CFSlide2;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateY(-180px)
}

@keyframes CFSlide2 {
	0%		{transform:translateY(-180px)}
	18%		{transform:translateY(-180px)}
	20%		{transform:translateY(0px)}
	28%		{transform:translateY(0px)}
	30%		{transform:translateY(180px)}
	100%	{transform:translateY(180px)}
}


.CFBanner180x180 .CFSlide3 .CFBlockImg {
	background-image: url(../images/cf-foto3.jpg);
	animation-name: CFSlide3;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(180px)
}

@keyframes CFSlide3 {
	0%		{transform:translateX(180px)}
	28%		{transform:translateX(180px)}
	30%		{transform:translateX(0px)}
	38%		{transform:translateX(0px)}
	40%		{transform:translateX(-180px)}
	100%	{transform:translateX(-180px)}
}

.CFBanner180x180 .CFSlide4 .CFBlockImg {
	background-image: url(../images/cf-foto4.jpg);
	animation-name: CFSlide4;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(180px)
}

@keyframes CFSlide4 {
	0%		{transform:translateY(180px)}
	38%		{transform:translateY(180px)}
	40%		{transform:translateY(0px)}
	48%		{transform:translateY(0px)}
	50%		{transform:translateY(-180px)}
	100%	{transform:translateY(-180px)}
}

.CFBanner180x180 .CFSlide5 .CFBlockImg {
	background-image: url(../images/cf-foto5.jpg);
	animation-name: CFSlide5;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(-480px)
}

@keyframes CFSlide5 {
	0%		{transform:translateX(-180px)}
	48%		{transform:translateX(-180px)}
	50%		{transform:translateX(0px)}
	58%		{transform:translateX(0px)}
	60%		{transform:translateX(180px)}
	100%	{transform:translateX(180px)}
}

.CFBanner180x180 .CFSlide6 .CFBlockImg {
	background-image: url(../images/cf-foto6.jpg);
	animation-name: CFSlide6;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(180px)
}

@keyframes CFSlide6 {
	0%		{transform:translateX(180px)}
	58%		{transform:translateX(180px)}
	60%		{transform:translateX(0px)}
	68%		{transform:translateX(0px)}
	70%		{transform:translateX(-180px)}
	100%	{transform:translateX(-180px)}
}


.CFBanner180x180 .CFSlide7 img {
	animation-name: CFSlide7;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:scale(2);
	opacity: 0;
}

@keyframes CFSlide7 {
	0%		{transform:scale(2); opacity:0;}
	68%		{transform:scale(2); opacity:0;}
	70%		{transform:scale(1); opacity:1;}
	84%		{transform:scale(1); opacity:1;}
	86%		{transform:scale(.1); opacity:0;}
	100%	{transform:scale(.1); opacity:0;}
}



.CFBanner180x180 .CFLabel {
	display: table;
	position: absolute;
	bottom:15px;
	left:0;
	width: 180px;
	height: 30px;
	box-sizing: border-box;
	z-index: 2;
	padding: 0 30px 0px 30px;
	box-sizing: border-box;
	transform:translateY(250px);	
}

.CFBanner180x180 .CFLabel {
	font-size: 1.0em;
	font-weight: 600;
	line-height: 1em;
	color:#FFF;
}


.CFBanner180x180 .CFLabel .Center {
	display: table-cell; 
	vertical-align: bottom; 
	text-align: center;
	width: 100%; 
	position: static;
}

.CFBanner180x180 .CFSlide1 .CFLabel {
	animation-name: CFLabel1;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(180px)
}

@keyframes CFLabel1 {
	0%		{transform:translateX(180px)}
	8%		{transform:translateX(180px)}
	10%		{transform:translateX(0px)}
	18%		{transform:translateX(0px)}
	20%		{transform:translateX(-180px)}
	100%	{transform:translateX(-180px)}
}

.CFBanner180x180 .CFSlide2 .CFLabel {
	animation-name: CFLabel2;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateY(180px)
}

@keyframes CFLabel2 {
	0%		{transform:translateY(180px)}
	18%		{transform:translateY(180px)}
	20%		{transform:translateY(0px)}
	28%		{transform:translateY(0px)}
	30%		{transform:translateY(-180px)}
	100%	{transform:translateY(-180px)}
}

.CFBanner180x180 .CFSlide3 .CFLabel {
	animation-name: CFLabel3;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateY(-180px)
}

@keyframes CFLabel3 {
	0%		{transform:translateY(-180px)}
	28%		{transform:translateY(-180px)}
	30%		{transform:translateY(0px)}
	38%		{transform:translateY(0px)}
	40%		{transform:translateY(180px)}
	100%	{transform:translateY(180px)}
}

.CFBanner180x180 .CFSlide4 .CFLabel {
	animation-name: CFLabel4;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateY(-180px)
}

@keyframes CFLabel4 {
	0%		{transform:translateY(-180px)}
	38%		{transform:translateY(-180px)}
	40%		{transform:translateY(0px)}
	48%		{transform:translateY(0px)}
	50%		{transform:translateY(180px)}
	100%	{transform:translateY(180px)}
}

.CFBanner180x180 .CFSlide5 .CFLabel {
	animation-name: CFLabel5;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(180px)
}

@keyframes CFLabel5 {
	0%		{transform:translateX(180px)}
	48%		{transform:translateX(180px)}
	50%		{transform:translateX(0px)}
	58%		{transform:translateX(0px)}
	60%		{transform:translateX(-180px)}
	100%	{transform:translateX(-180px)}
}

.CFBanner180x180 .CFSlide6 .CFLabel {
	animation-name: CFLabel6;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(-180px)
}

@keyframes CFLabel6 {
	0%		{transform:translateX(-180px)}
	58%		{transform:translateX(-180px)}
	60%		{transform:translateX(0px)}
	68%		{transform:translateX(0px)}
	70%		{transform:translateX(180px)}
	100%	{transform:translateX(180px)}
}