.content { padding: 80px 0; } .home2, .home3 { position: relative; } .home1 { position: relative; width: 100%; height: 720px; background: url(../images/sate2.png)no-repeat center; background-size: cover; /* background-size: cover; */ } .home1 .home1-content { position: absolute; top: 80px; left: 100px; height: 550px; width: 1400px; padding: 0 50px; background-color: rgba(0, 0, 0, 0.6); } .home1 .home1-box { margin: 100px 200px; /* color: #fff; */ } .home1 .home1-box .home1-header { font-size: 30px; color: #fff; padding: 0 0 20px 0; } .home1 .home1-box .home1-txt { font-size: 14px; color: #ccc; } .home2 .home2-header { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: 700; } .home2-content { position: absolute; top: 200px; left: 50%; transform: translateX(-50%); /* border: 1px solid green; */ width: 80%; font-weight: 500; } .home2-content .home2-items { display: flex; justify-content: center; flex-direction: column; } .home2-content-item1, .home2-content-item2 { display: flex; justify-content: space-between; height: 200px; width: 100%; } /* .home2-content-item1 .item-link, .home2-content-item2 .item-link { position: relative; display: flex; height: 200px; width: 55%; display: block; border: 2px solid pink; } */ .left-txt, .right-txt { position: relative; width: 45%; } .left-txt .txt-time, .right-txt .txt-time { position: absolute; right: 0; top: 10%; font-size: 20px; color: rgb(136, 7, 7); } .left-txt .txt-time { right: 0; } .right-txt .txt-time { left: 0; } .left-txt .txt-p, .right-txt .txt-p { position: absolute; top: 30%; font-size: 18px; color: #999999; text-indent: 2em; } .left-txt .txt-p { right: 0; } .right-txt .txt-p { left: 0; } .mid-column { display: flex; flex-direction: column; align-items: center; /* position: relative; */ width: 10%; /* border: 1px solid red; */ } .home2-content-item1 .item-link .mid-column { position: absolute; right: 0; } .mid-column .time-line-wrap { display: table-cell; width: 1px; background: #e4e0e0; height: 1000px; /* top: 0; */ /* left: 50%; */ margin-left: -0.5px; display: inline-block; /* border: 2px solid blue; */ } .mid-column .time-circle-wrap { height: 22px; } .left-img, .right-img { position: relative; width: 45%; } .left-img img, .right-img img { /* width: 80%; */ height: 100%; /* height: 200px; */ } .left-img img { position: absolute; right: 0; } .footer { position: absolute; bottom: 0; height: 200px; width: 100%; background-color: aqua; }