.banner { height: 100vh; background: url('../../Images/tasteing/wedtea/banner.jpg')no-repeat center; background-size:cover; } .section{position:relative;} .section .section-title { font-size: 3rem; color: #e70310; } .desc > p { margin-bottom: 2rem; line-height: 2; } .part1,.part2,.part3{padding: 10rem 0 5rem;} .part1 img{width:100%} .part1 .wedTea { position: absolute; left: 25%; width: 10rem; } .part1 .desc { margin-left: 50%; width: 32%; margin-bottom: 10rem; } .part2 .section-title{position:absolute;left:25%} .part2 .desc{margin-left: 50%;} .part2 .party{ height: 51vw; position: relative; margin-top: -6rem; } .party>img,.party>i{position:absolute;z-index:1} .party .party-img1 { width: 40%; } .party .party-img2 { top: 30%; width: 33%; left: 29.5%; z-index:2; } .party .party-img3 { left: 62%; top: 23%; z-index: 3; width: 30%; } .party .party-img4 { top: 56%; left: 56%; width: 28%; z-index: 2; } .party .party-img5 { bottom: 0; left: 24%; width: 33%; } .party > i { bottom: 0; left: 60%; } .part4{text-align:center;padding-top:10rem} .part3 .party-show{width:40%;display:inline-block;margin-right:10%;} .party-show img{width:100%;} .part3 .content{width:33%;display:inline-block;vertical-align: top;} .part3 .section-title,.part4 .section-title{margin-bottom:3rem;} .part4 img{width:25%;vertical-align:bottom} .part4 .content{width:25%;display:inline-block;text-align: left;vertical-align: top;} .upgrade { padding-left: 20%; display: flex; padding-right: 15%; justify-content: space-between; } .upgrade div{ text-align: center; width: 30%; } .upgrade div p { margin-top: -15%; color: #aaa; }