body{
	overflow:hidden;
	margin:0px;
	padding:0px;
}

#canvas{
	display:block;
	border:1px solid #ccc;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-300px;
	margin-top:-300px;
	background:#000;
	opacity: 0.4;
 	/* background-image: url(../images/bg1.jpg); */
 }
 #canvas2{
	display:block;
	border:1px solid #ccc;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-300px;
	margin-top:-300px;
  }
 .reset{
 	position:absolute;
 	left:20%;
 	top:50%;
 
 
 }
.regret{
	position:absolute;
	left:20%;
 	top:60%;
 
}
input{
	background:url(../images/qi.jpg);
	opacity: 0.8;
	font-size:16px;
	font-weight:bold;
	width:70px;
 	height:30px;

}
 
.box{
   width: 100%;
   height: 770px;
   overflow:hidden;
}
.container{
   position: absolute;
   display: block;
   width: 3300px;
   height: 770px;
   overflow: hidden;
}
.container::before{
   position: absolute;
   height: 720px;
   width: 19920px;
   content:"";
   background-image:url(../images/river.jpg);
   background-size:19920px 720px;
   animation:before 450s linear infinite;
}
.container::after{
   position: absolute;
   height: 626px;
   width: 19860px;
   content:"";
   background-image:url(../images/river.jpg);
   background-size:19860px 626px;
   animation:after 450s linear infinite;
}
@-webkit-keyframes before{
   0% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0)
   }

   50% {
       -webkit-transform: translate3d(-19860px, 0, 0);
       transform: translate3d(-19860px, 0, 0)
   }

   50.001% {
       -webkit-transform: translate3d(19860px, 0, 0);
       transform: translate3d(19860px, 0, 0)
   }

   100% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0)
   }
}

@keyframes before{
   0% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0)
   }

   50% {
       -webkit-transform: translate3d(-19860px, 0, 0);
       transform: translate3d(-19860px, 0, 0)
   }

   50.001% {
       -webkit-transform: translate3d(19860px, 0, 0);
       transform: translate3d(19860px, 0, 0)
   }

   100% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0)
   }
}

@-webkit-keyframes after{
   0% {
       -webkit-transform: translate3d(19860px, 0, 0);
       transform: translate3d(19860px, 0, 0)
   }

   50% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0)
   }

   100% {
       -webkit-transform: translate3d(-19860px, 0, 0);
       transform: translate3d(-19860px, 0, 0)
   }
}

@keyframes after{
   0% {
       -webkit-transform: translate3d(19860px, 0, 0);
       transform: translate3d(19860px, 0, 0)
   }

   50% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0)
   }

   100% {
       -webkit-transform: translate3d(-19860px, 0, 0);
       transform: translate3d(-19860px, 0, 0)
   }
}