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

.AddWrapper {
	width: 100%;
	max-width: 480px;
	margin: auto;
	}

.AddContainer {
	position: relative;
	padding-bottom: 100%;
	height: 0; 
	overflow: hidden;
	border:1px solid #CCC;
	box-sizing: border-box;
	}



.CFBanner480x480 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #CCC;
	font-family: 'Kanit', sans-serif;
	color:#4b4b4a;
}

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



.CFBanner480x480 .CFBlockBlue {
	display: block;
	position: absolute;
	bottom:85%;
	left:0;
	width: 100%;
	height: 120%;
	background: #009BB4;
	transform: skewY(-3.2deg);
	z-index: 10;
	animation-name: CFBlockBlue;
	animation-duration: 25s;
	animation-iteration-count: infinite;
}


@keyframes CFBlockBlue {
	0%		{bottom:85%;}
	17%		{bottom:85%;}
	18.5%	{bottom:0%;}
	20%   	{bottom:85%;}
	37%		{bottom:85%;}
	38.5%  	{bottom:0%;}
	40%   	{bottom:85%;}
	57%   	{bottom:85%;}
	58.5%  	{bottom:0%;}
	60%   	{bottom:85%;}
	77%   	{bottom:85%;}
	78.5%  	{bottom:0%;}
	80%   	{bottom:85%;}
	97%   	{bottom:85%;}
	98.5%  	{bottom:0%;}
	100%   	{bottom:85%;}
}




.CFBanner480x480 .CFMotoLogo {
	display: block;
	position: absolute;
	top:3%;
	left:3%;
	width: 50%;
	z-index:11;
}

.CFBanner480x480 .CFMotoExperience {
	display: block;
	position: absolute;
	width: 25%;
	z-index:8;
}

.CFBanner480x480 .CFSlide1 .CFMotoExperience {
	top:18%;
	right:2%;
	animation-name: CFExperience1;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(0);
}

@keyframes CFExperience1 {
	0%		{transform:translateX(0px)}
	18.5%	{transform:translateX(0px)}
	18.51%	{transform:translateX(500%)}
	98.5%	{transform:translateX(500%)}
	98.51%	{transform:translateX(0px)}
	100%	{transform:translateX(0px)}
}

.CFBanner480x480 .CFSlide2 .CFMotoExperience {
	top:22%;
	left:2%;
	animation-name: CFExperience2;
	animation-duration: 25s;
	animation-iteration-count: infinite;
}

@keyframes CFExperience2 {
	0%		{transform:translateX(500%)}
	18.5%	{transform:translateX(500%)}
	18.51%	{transform:translateX(0)}
	38.5%	{transform:translateX(0)}
	38.51%	{transform:translateX(500%)}
	100%	{transform:translateX(500%)}
}


.CFBanner480x480 .CFSlide3 .CFMotoExperience {
	top:58%;
	left:2%;
	animation-name: CFExperience3;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(0px);
}
@keyframes CFExperience3 {
	0%		{transform:translateX(500%)}
	38.5%	{transform:translateX(500%)}
	38.51%	{transform:translateX(0)}
	58.5%	{transform:translateX(0)}
	58.51%	{transform:translateX(500%)}
	100%	{transform:translateX(500%)}
}

.CFBanner480x480 .CFSlide4 .CFMotoExperience {
	top:58%;
	left:2%;
	animation-name: CFExperience4;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(0px);
}

@keyframes CFExperience4 {
	0%		{transform:translateX(500%)}
	58.5%	{transform:translateX(500%)}
	58.51%	{transform:translateX(0)}
	78.5%	{transform:translateX(0)}
	78.51%	{transform:translateX(500%)}
	100%	{transform:translateX(500%)}
}

.CFBanner480x480 .CFSlide5 .CFMotoExperience {
	top:18%;
	right:2%;
	animation-name: CFExperience5;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(0px);
}

@keyframes CFExperience5 {
	0%		{transform:translateX(500%)}
	78.5%	{transform:translateX(500%)}
	78.51%	{transform:translateX(0)}
	98.5%	{transform:translateX(0)}
	98.51%	{transform:translateX(500%)}
	100%	{transform:translateX(500%)}
}


.CFBanner480x480 .CFMotoJMFootPrint {
	display: block;
	position: absolute;
	bottom:-25%;
	right:-5%;
	width: 50%;
	z-index:2;
	opacity: .8;
}

.CFBanner480x480 .CFMotoLink {
	display: block;
	position: absolute;
	bottom:.5%;
	left:0;
	width: 100%;
	z-index:2;
	font-size: 1.2em;
	font-weight: 600;
	color: #009BB4;
	text-align: center;
}

.CFBanner480x480 a.CFMotoLink {
	color: #009BB4;
	text-decoration: none;
}

.CFBanner480x480 a.CFMotoLink:hover {
	text-decoration: underline;
}





.CFBanner480x480 .CFBlockWhite {
	display: block;
	position: absolute;
	bottom:0;
	left:0px;
	width: 100%;
	height: 28%;
	background: #FFF;
	box-sizing: border-box;
	z-index: 1;
}


.CFBanner480x480 .CFBlockImg {
	display: block;
	position: absolute;
	top:12%;
	left:0;
	bottom: 28%;
	width: 100%;
	background: no-repeat center center;
	background-size: cover;
}

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

@keyframes CFSlide1 {
	0%		{transform:translateX(0)}
	18.5%	{transform:translateX(0)}
	18.51%	{transform:translateX(-200%)}
	98.5%	{transform:translateX(-200%)}
	98.51%	{transform:translateX(0)}
	100%	{transform:translateX(0)}
}

.CFBanner480x480 .CFSlide2 .CFBlockImg {
	background-image: url(../images/cf-foto2.jpg);
	animation-name: CFSlide2;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(-200%)
}

@keyframes CFSlide2 {
	0%		{transform:translateX(-200%)}
	18.5%	{transform:translateX(-200%)}
	18.51%	{transform:translateX(0)}
	38.5%	{transform:translateX(0)}
	38.51%	{transform:translateX(-200%)}
	100%	{transform:translateX(-200%)}
}


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

@keyframes CFSlide3 {
	0%		{transform:translateX(-200%)}
	38.5%	{transform:translateX(-200%)}
	38.51%	{transform:translateX(0)}
	58.5%	{transform:translateX(0)}
	58.51%	{transform:translateX(-200%)}
	100%	{transform:translateX(-200%)}
}

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

@keyframes CFSlide4 {
	0%		{transform:translateX(-200%)}
	58.5%	{transform:translateX(-200%)}
	58.51%	{transform:translateX(0)}
	78.5%	{transform:translateX(0)}
	78.51%	{transform:translateX(-200%)}
	100%	{transform:translateX(-200%)}
}

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

@keyframes CFSlide5 {
	0%		{transform:translateX(-200%)}
	78.5%	{transform:translateX(-200%)}
	78.51%	{transform:translateX(0)}
	98.5%	{transform:translateX(0)}
	98.51%	{transform:translateX(-200%)}
	100%	{transform:translateX(-200%)}
}


.CFBanner480x480 .CFLabel {
	display: table;
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 28%;
	box-sizing: border-box;
	z-index: 2;
	transform:translateY(250px);
	font-size: 100%;	
}

.CFBanner480x480 .CFLabel .CFH1 {
	font-size: 2.9em;
	font-weight: 600;
	line-height: 1em;
}

.CFBanner480x480 .CFLabel .CFH1.Blue {
	font-size: 4.4em;
	color: #009BB4;
}

.CFBanner480x480 .CFLabel .CFH2 {
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1.3em;
}

.CFBanner480x480 .CFLabel .CFH3 {
	font-size: 1.1em;
	font-weight: 500;
	line-height: 1.2em;
}


.CFBanner480x480 .CFLabel .Center {
	display: table-cell; 
	vertical-align: middle; 
	text-align: center;
	width: 100%; 
	position: static;
	padding: 0 2% 6% 2%;
	box-sizing: border-box;
}

.CFBanner480x480 .CFSlide1 .CFLabel {
	animation-name: CFLabel1;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateY(0)
}

@keyframes CFLabel1 {
	0%		{transform:translateY(0)}
	18.49%	{transform:translateY(0)}
	18.5%	{transform:translateY(128%)}
	98.5%	{transform:translateY(128%)}
	100%	{transform:translateY(0)}
}

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

@keyframes CFLabel2 {
	0%		{transform:translateY(128%)}
	18.49%	{transform:translateY(128%)}
	20%		{transform:translateY(0)}
	38.49%	{transform:translateY(0)}
	38.5%	{transform:translateY(128%)}
	100%	{transform:translateY(128%)}
}

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

@keyframes CFLabel3 {
	0%		{transform:translateY(128%)}
	38.49%	{transform:translateY(128%)}
	40%		{transform:translateY(0)}
	58.49%	{transform:translateY(0)}
	58.5%	{transform:translateY(128%)}
	100%	{transform:translateY(128%)}
}

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

@keyframes CFLabel4 {
	0%		{transform:translateY(128%)}
	58.49%	{transform:translateY(128%)}
	60%		{transform:translateY(0)}
	78.49%	{transform:translateY(0)}
	78.5%	{transform:translateY(128%)}
	100%	{transform:translateY(128%)}
}

.CFBanner480x480 .CFSlide5 .CFLabel {
	animation-name: CFLabel5;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateY(0)
}

@keyframes CFLabel5 {
	0%		{transform:translateY(128%)}
	78.49%	{transform:translateY(128%)}
	80%		{transform:translateY(0)}
	98.49%	{transform:translateY(0)}
	98.5%	{transform:translateY(128%)}
	100%	{transform:translateY(128%)}
}




@media only screen and (max-width: 480px) 
{
	.CFBanner480x480 .CFLabel {
	font-size: 90%;	
	}
}

@media only screen and (max-width: 380px) 
{
	.CFBanner480x480 .CFLabel {
	font-size: 70%;	
	}
}

@media only screen and (max-width: 300px) 
{
	.CFBanner480x480 .CFLabel {
	font-size: 60%;	
	}
}