* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.special-display {
position: relative;
display: flex;
height: 100%;
min-height: 600px;
}
.special-display ul {
list-style: none;
padding: 0;
margin: 0;
}
.special-display img {
object-fit: cover;
border-radius: 6px;
}
.special-display ul li{
position: absolute;
overflow: hidden;
border-radius: 20px;
}
.special-display ul li img{
width: 100%;
height: 100%;
object-fit: cover;
} .special-display {
width: 576px;
height: 496px; flex: none;
order: 1;
flex-grow: 1;
} .special-display ul li:nth-child(1) {
width: 160px;
height: 240px;
left: calc(50% - 160px/2 + 88px);
top: 0px;
} .special-display ul li:nth-child(2) {
width: 192px;
height: 128px;
left: calc(50% - 192px/2 + 192px);
top: 256px;
} .special-display ul li:nth-child(3) {
width: 192px;
height: 128px;
left: calc(50% - 192px/2 - 192px);
top: 256px;
} .special-display ul li:nth-child(4) {
width: 160px;
height: 240px;
left: calc(50% - 160px/2);
top: 256px;
} .special-display ul li:nth-child(5) {
width: 160px;
height: 160px;
left: calc(50% - 160px/2 - 88px);
top: 80px;
}
@media (max-width: 640px) {
.special-display {
width: 100%;
} .special-display ul li:nth-child(1) {
width: 90px;
height: 130px;
left: calc(50% - 150px/2 + 88px);
top: 116px;
} .special-display ul li:nth-child(2) {
width: 100px;
height: 80px;
left: calc(50% - 100px/2 + 105px);
top: 256px;
} .special-display ul li:nth-child(3) {
width: 110px;
height: 78px;
left: calc(50% - 110px/2 - 110px);
top: 256px;
} .special-display ul li:nth-child(4) {
width: 90px;
height: 120px;
left: calc(50% - 90px/2);
top: 256px;
} .special-display ul li:nth-child(5) {
width: 90px;
height: 90px;
left: calc(50% - 90px/2 - 40px);
top: 157px;
}
}