.clearbox:after{
				content: '';
				display: block;
				height: 0;
				clear: both;
			}
			.content{
				/*width: 80%;*/
				margin: 30px auto;
				/*border: 1px solid red;*/
				/*min-width: 980px;*/
			}
           .changbox{
           	  width: 30%;
           	  margin:20px 0 0 5%;
           	  position: relative;
           	  float: left;
           	  height: 300px;
           }
           .changfix{
           	display: block;
           	 position: absolute;
           	 left: 0;
           	 top: 0;
           	 width: 80%;
           	 height: 80%;
           	 z-index: 12;
           	 margin: 10%;
           	 opacity: 0;
           	 cursor: pointer;
           }
           .changbox>img{
           	height: 100%;
           }
          .img{
	          width: 100%;
	          vertical-align: middle;
           }
           .changbox:nth-child(3n+1){
           	  margin-left: 0!important;
           }
           .mbbox{
           	 position: absolute;
           	 bottom: 0px;
           	 left: 0px;
           	 height: 40px;
           	 width: 100%;
           }
           .mbbox div{
           	  background: #000;
           	  opacity: 0.5;
           	  width: 100%;
           	  height: 100%;
           }
           .mbbox p{
           	 position: absolute;
           	 top: 0;
           	 left: 0;
           	 width: 90%;
           	 padding: 0 5%;
           	 height: 100%;
           	 font-size: 16px;
           	 color: #fff;
			 line-height: 40px;
           }
           .anamationbox{
              position: absolute;
           	  width:100%;
           	  height: 100%;
           	  top: 0;
           	  left: 0;
           	  opacity: 0;
           	  overflow: hidden;
           	  background: #FFFFFF;
           	  transform: scale(0.5);
              z-index: 11;;
           }

           #scale{
           	 animation: scale 0.5s  forwards;
           }
            #scale1{
           	 animation: scale1 0.5s  forwards;
           }
           .anamationtop{
	           	position: absolute;
	           	height: 50%;
	           	width: 100%;
	           	top: -50%;
	           	opacity: 0;
	           	left: 0;
	           	z-index: 10;
	           	background: #fff;
	           	z-index: 11;
	           	/*animation: ratetop 1s  forwards;*/

           }
           #ratetop{
           	animation: ratetop 0.5s  forwards;
           }
           #ratetop1{
           	animation: ratetop1 0.5s  forwards;
           }
			.anamationtop>div{
				position: absolute;
				bottom: 10px;
				width: 100%;
			}
           .anamationtop div div{
           	  width: 60px;
           	  height: 60px;
           	  border-radius: 50%;
           	  margin: 10px auto;
           	  overflow: hidden;
           }
           .anamationtop div p{
           	 font-size: 20px;
           	 text-align: center;

           }

           .anamationbot{
	           	position: absolute;
	           	height: 50%;
	           	width: 100%;
	           	top: 100%;
	           	left: 0;
	           	opacity: 0;
	           	z-index: 10;
	           	background: #fff;
	           	z-index: 11;
	           	/*animation: ratebot 1s  forwards;*/
           }
           #ratebot{
           	animation: ratebot 0.5s  forwards;
           }
           #ratebot1{
           	animation: ratebot1 0.5s  forwards;
           }
           .anamationbot p{
	           	/*font-size: 18px;*/
	           	color: #666;
	           	text-align: center;
           }
           .anamationbot a{
           	 display: block;
           	 margin:10px auto;
           	 background: #666;
           	 color: #FFFFFF;
           	 width: 40%;
           	 text-align: center;
             line-height: 30px;
             border-radius: 5px;

           }
           @keyframes scale{
           	0%{
           		opacity: 0;
           		transform: scale(0.5);
           	}
           	50%{
           		opacity: 1;

           	}
           	100%{
           		opacity: 1;
           		transform: scale(1);

           	}
           }

           @keyframes scale1{
	           	0%{
	           		opacity: 1;
	           		transform: scale(1);
	           	}
	           	/*50%{
	           		opacity: 0.4;
	           		transform: scale(0.7);

	           	}*/
	           	100%{
	           		opacity:0;
	           		transform: scale(0.5);
                    display: none;
	           	}
           }

            @keyframes ratetop{
           	0%{
           		opacity: 0;
           		top: -50%;
           	}
           	50%{
           		opacity: 0.5;
           	}
           	100%{
           		top: 0;
				opacity: 1;
				background: #fff;
           	}
           }
            @keyframes ratebot{
           	0%{
           		opacity: 0;
           		top: 100%;
           	}
           	50%{
           		opacity: 0.5;
           	}
           	100%{
           		top: 50%;
				opacity: 1;
				background: #fff;
           	}
           }

           @keyframes ratetop1{
           	0%{
           		opacity: 1;
           		top: 0;
           	}
           	50%{
           	  /*opacity: 0;*/
           	}
           	100%{
           		top: -50%;
				/*opacity: 0;*/
				display: none!important;
           	}
           }
            @keyframes ratebot1{
           	0%{
           		opacity: 1;
           		top: 50%;
           	}
           	50%{
           	  /*opacity: 0;*/
           	}
           	100%{
           		top: 100%;
				/*opacity: 0;*/
				display: none;
           	}
           }