.box{width: 530px;height: 320px;overflow: hidden;position: relative;}
.box-1 ul{}
.box-1 ul li{width: 530px;height: 320px;position: relative;overflow: hidden;}
.box-1 ul li img{display:block;width: 530px; height: 320px;}
.box-1 ul li h2{position: absolute;left: 0;bottom: 0;height: 40px;width:300px;background: rgba(125,125,120,.4);text-indent: 2em;
				padding-right:500px ;font-size: 15px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;
				white-space: nowrap;font-weight: normal;color: ghostwhite;}
/*
.box-2{position: absolute;right: 10px;bottom: 14px;}
.box-2 ul li{float:left;width: 12px;height: 12px;overflow: hidden; margin: 0 5px; border-radius: 50%;
				background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;}
.box-2 ul .on{background: rgba(255,255,255,0.6);}
*/

.box-3 span{
position: absolute;
color: white;
width: 50px;
height: 60px;
top:50%; 
font-family: "宋体";
line-height: 60px;
font-size:50px;
margin-top: -40px;
text-align: center;
cursor: pointer;}
.box-3 .prev{left: -50px;}
.box-3 .next{right: -50px;}
.box:hover .box-3 .prev {
  left: 10px;}
.box:hover .box-3 .next {
  right: 10px;}
.box-3 span::selection{background: transparent;}
.box-3 span:hover{background: rgba(125,125,120,.8);}

.box-1 ul li > a > span {
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0px;
  padding: 15px;
  color: #fff;
  background-color: rgba(91,105,198,.5);}
.box-1 ul li > a > span > p{
  color: #fff;}

@media (max-width:568px) {
  .box-1 ul li > a > span {
    padding: 10px;}
}