@charset "utf-8";



*, *:before, *:after {
box-sizing: border-box;
}


#wrap{
display: block;
margin: 0 auto;
width: 70%;
justify-content: center;
background-color: #333;
}
#slider{
width: 100%;
padding: 0;
margin: 0;
}

#slider{
	background-color: aliceblue;
}

.slide-item img{
width: 100%;
	background-color: aliceblue;
}
#thumbnail-list{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap:wrap;
padding: 0;
margin: 0;
list-style-type: none;
}
.thumbnail-item{
flex:  25%;
box-sizing: border-box;
position:relative;
padding: 0;
margin: 0;
cursor: pointer;
	background-color: aliceblue;
}




.five{
flex: 20%!important;
box-sizing: border-box;
position:relative;
padding: 0;
margin: 0;
cursor: pointer;
}

.five:hover,.thumbnail-item:hover{
opacity: 0.6;
}


.thumbnail-item::before{
content:'';

position:absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
}

.thumbnail-current::before{
border: 2px solid #fff;
box-sizing: border-box;
}
.thumbnail-current img::after{
width: 100%;
margin: 0 auto;
border: 2px solid #fff;
box-sizing: border-box;
}