* {
   	padding: 0;
   	margin: 0;
   }
   body{
   	background: rgb(244, 244, 244);
   }
   
   .lists {
   	position: relative;
   	height: 120px;
   	overflow: hidden;
   }
   
   .box {
   	position: absolute;
   }
   
   .item {
   	float: left;
   	background: rgba(69,142,255,1);
   	border-radius: 8px;
   	height: 120px;
   	border: 1px solid rgba(61,27,215,1);
   	cursor: pointer;
   	box-sizing: border-box;
   }
   
   .item img {
   	width: 40px;
   	height: 40px;
   	display: block;
   	margin: 30px auto 0;
   	border: 6px solid gold;
   	border-radius: 50%;
   }
   
   .item p {
   	text-align: center;
   }
   
   .item.active {
   	background: linear-gradient(0deg,rgba(108,222,101,1) 0%,rgba(27,191,189,1) 100%);
   	font-size: 30px;
   }
   
   .item.active img {
   	width: 60px;
   	height: 60px;
   	border: 2px solid red;
    margin: 20px auto 0;
   }
   
   .item.active p {
   	font-size: 24px;
   	color: antiquewhite;
   }
   
   .right {
   	float: right;
   	width: 50px;
   	height: 50px;
   	background: goldenrod;
   	border: none;
   	color: rgba(255,255,255,1);
   	border-radius: 50%;
   	outline: none;
   	position: relative;
   }
   
   .left {
   	float: left;
   	width: 50px;
   	height: 50px;
   	background: green;
   	border: none;
   	border-radius: 50%;
   	color: rgba(255,255,255,1);
   	outline: none;
   	position: relative;
   }

   .left:active{
   	 top: 1px;
   	 left: 1px;
   	 opacity: 0.8;
   }
   
   .right:active{
   	 top: 1px;
   	 left: 1px;
   	 opacity: 0.8;
   }
   
   .content-all {
   	margin-bottom: 30px;
   	margin-left: 24px;
   	margin-right: 24px;
   	margin-top: 30px;
   }
   
   .index {
   	text-align: center;
   	font-size: 30px;
   	color: red;
   }