@charset "utf-8";
#rolling{
	position: relative;
	width: 100%;
	overflow: hidden;
}
#rolling .itemWrapper {
	display: inline-block;
	width: 100%;
	white-space: nowrap;
	position:relative;
	transform: translate3d(0%, 0, 0);
	animation: autorolling 20s linear infinite;
}
@keyframes autorolling {
	/*0% {
		transform: translate3d(0%, 0, 0);
	}
	3% {
		transform: translate3d(-100%, 0, 0);
	}
	20% {
		transform: translate3d(-100%, 0, 0);
	}
	23% {
		transform: translate3d(-200%, 0, 0);
	}
	40% {
		transform: translate3d(-200%, 0, 0);
	}
	43% {
		transform: translate3d(-300%, 0, 0);
	}
	60% {
		transform: translate3d(-300%, 0, 0);
	}
	63% {
		transform: translate3d(-400%, 0, 0);
	}
	80% {
		transform: translate3d(-400%, 0, 0);
	}
	100% {
		transform: translate3d(-400%, 0, 0);
	}*/

 0% {
      transform: translate3d(0%, 0, 0);
   }
   3% {
      transform: translate3d(-100%, 0, 0);
   }
   33% {
      transform: translate3d(-100%, 0, 0);
   }
   36% {
      transform: translate3d(-200%, 0, 0);
   }
   66% {
      transform: translate3d(-200%, 0, 0);
   }
   69% {
      transform: translate3d(-300%, 0, 0);
   }
   100% {
      transform: translate3d(-300%, 0, 0);
   }
}
#rolling .item{
	z-index: 1;
	display: inline-block;
	position: relative;
	width: 100%;
	padding-top: 450px;
}
#rolling .title-area {
	z-index: 1;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
    white-space: normal;
	text-align: right;
	transform: translate(-50%,-50%);
}
#rolling .title {
	display: inline-block;
	width: 100%;
	max-width: 500px;
	padding: 20px 30px;
	text-align: left;
}
#rolling .title h1 {
	font-size: 3.4em;
	line-height: 1em;
}
#rolling .title h2 {
	font-size: 2em;
}
#rolling .title p {
	font-size: 1.1em;
	padding-top: 20px;
}
#rolling .controller{
	overflow:hidden;
	position:relative;
	margin: 0 auto;
}
#rolling .controller p{
	margin:0 4px 0;
	width:0px;
	height:0px;
	float:left;
	cursor:pointer;
}

@media screen and (max-width:800px) {
	#rolling .item {
		padding-top: 240px;
	}itemWrapper
	#rolling .title h1 {
		font-size: 2.4em;
		line-height: 1em;
	}
	#rolling .title h2 {
		font-size: 1.1em;
	}
	#rolling .title p {
		font-size: .9em;
		padding-top: 10px;
	}
}