@import url(keyframes.css);

#cck-top-slide{
	position:relative;
	width: 1024px;
	height: 409px;
	overflow: hidden;
	margin: 0 auto;


/*#cck-top-slide div.title
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
*/
}
#cck-top-slide ul{
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
}
#cck-top-slide ul li>*{
	position: absolute;
}

#cck-top-slide ul li{
	position: relative;
	z-index: 1;
}


#cck-top-slide .title a {
	
	text-decoration: none;
	
}


#cck-top-slide-nav a{
	position: absolute;
	display: block;
	width: 43px;
	height: 81px;
	bottom: 160px;
	z-index: 100;
	opacity: 0.6;
}
#cck-top-slide-nav a:hover{
	text-decoration: none;
	opacity: 1;
}
#cck-top-slide-nav a.prev{
	left: 6px;
	background: url('../images/prev.png') no-repeat center;
}
#cck-top-slide-nav a.next{
	right: 6px;
	background: url('../images/next.png') no-repeat center;
}

#cck-top-slide div.title,
#cck-top-slide div.subtittle,
#cck-top-slide div.image1,
#cck-top-slide div.image2,
#cck-top-slide div.image3{
	opacity: 0;
	left: 0;
}

#cck-top-slide div.title{
	font-size: 2em;
	white-space: nowrap;
	position: absolute;
	z-index: 6;
}
#cck-top-slide div.subtittle{
	font-size: 1.6em;
	white-space: nowrap;
	top: 286px;
	z-index: 8;
}

#cck-top-slide div.image1,
#cck-top-slide div.image2,
#cck-top-slide div.image3{
	top: 0;
	left: 120%;
}


/*animation-in*/
#cck-top-slide li.animate-in div.title{
	-webkit-animation: titleIn 0.3s ease-out both;
	-moz-animation: titleIn 0.3s ease-out both;
	-o-animation: titleIn 0.3s ease-out both;
	-ms-animation: titleIn 0.3s ease-out both;
	animation: titleIn 0.3s ease-out both;
}
#cck-top-slide li.animate-in div.subtittle{
	-webkit-animation: subtitleIn 0.4s ease-out both;
	-moz-animation: subtitleIn 0.4s ease-out both;
	-o-animation: subtitleIn 0.4s ease-out both;
	-ms-animation: subtitleIn 0.4s ease-out both;
	animation: subtitleIn 0.4s ease-out both;
}

#cck-top-slide li.animate-in div.image1{
	-webkit-animation: image1In 0.6s ease-out both;
	-moz-animation: image1In 0.6s ease-out both;
	-o-animation: image1In 0.6s ease-out both;
	-ms-animation: image1In 0.6s ease-out both;
	animation: image1In 0.6s ease-out both;
}
#cck-top-slide li.animate-in div.image2{
	-webkit-animation: image2In 0.8s ease-out both;
	-moz-animation: image2In 0.8s ease-out both;
	-o-animation: image2In 0.8s ease-out both;
	-ms-animation: image2In 0.8s ease-out both;
	animation: image2In 0.8s ease-out both;
}
#cck-top-slide li.animate-in div.image3{
	-webkit-animation: image3In 0.7s ease-out both;
	-moz-animation: image3In 0.7s ease-out both;
	-o-animation: image3In 0.7s ease-out both;
	-ms-animation: image3In 0.7s ease-out both;
	animation: image3In 0.7s ease-out both;
}

/*animation-out*/
#cck-top-slide li.animate-out div.title{
	-webkit-animation: titleOut 0.4s ease-in both;
	-moz-animation: titleOut 0.4s ease-in both;
	-o-animation: titleOut 0.4s ease-in both;
	-ms-animation: titleOut 0.4s ease-in both;
	animation: titleOut 0.4s ease-in both;
}
#cck-top-slide li.animate-out div.subtittle{
	-webkit-animation: subtitleOut 0.3s ease-in both;
	-moz-animation: subtitleOut 0.3s ease-in both;
	-o-animation: subtitleOut 0.3s ease-in both;
	-ms-animation: subtitleOut 0.3s ease-in both;
	animation: subtitleOut 0.3s ease-in both;
}
#cck-top-slide li.animate-out div.image1{
	-webkit-animation: image1Out 0.3s ease-in both;
	-moz-animation: image1Out 0.3s ease-in both;
	-o-animation: image1Out 0.3s ease-in both;
	-ms-animation: image1Out 0.3s ease-in both;
	animation: image1Out 0.3s ease-in both;
}
#cck-top-slide li.animate-out div.image2{
	-webkit-animation: image2Out 0.3s ease-in both;
	-moz-animation: image2Out 0.3s ease-in both;
	-o-animation: image2Out 0.3s ease-in both;
	-ms-animation: image2Out 0.3s ease-in both;
	animation: image2Out 0.3s ease-in both;
}
#cck-top-slide li.animate-out div.image3{
	-webkit-animation: image3Out 0.3s ease-in both;
	-moz-animation: image3Out 0.3s ease-in both;
	-o-animation: image3Out 0.3s ease-in both;
	-ms-animation: image3Out 0.3s ease-in both;
	animation: image3Out 0.3s ease-in both;
}