* {
margin:0;
padding:0;
}
a {
text-decoration:none;
}
li {
list-style:none;
}
#wrap {
position:relative;
width:700px;
height:400px;
margin:50px auto;
overflow:hidden;
}
#wrap .pic {
position:absolute;
top:0;
left:0;
width:1000%;
height:100%;
}
.pic li {
float:left;
width:700px;
height:400px;
color:#fff;
font-size:80px;
text-align:center;
line-height:400px;
}
.pic li img {
border:0;
vertical-align:middle;
/*width:700px;
height:400px;
*/
}
.tab {
position:absolute;
bottom:20px;
left:50%;
margin-left:-100px;
height:30px;
padding-left:10px;
background:rgba(0,0,0,.2);
border-radius:15px;
transition:0.5s;
}
.tab:hover {
background:rgba(0,0,0,.5);
transform:scale(1.2);
}
.tab li {
width:20px;
height:20px;
float:left;
background:#fff;
border-radius:50%;
margin:5px 10px 0 0;
/*opacity:0.35;
*/
cursor:pointer;
}
.tab li.on {
/*position:absolute;
top:0;
*/
background:#f60;
/*opacity:1;
z-index:99;
*/
}
p {
position:absolute;
top:50%;
margin-top:-30px;
width:30px;
background:rgba(0,0,0,0.2);
text-align:center;
font-size:28px;
font-weight:bold;
line-height:60px;
color:#fff;
cursor:pointer;
}
p:hover {
background:rgba(0,0,0,0.5);
}
.prev {
left:0;
}
.next {
right:0;
}