.topBanner{ width: 100%; height: 68vh; background-color: #030045; display: flex; justify-content: center; align-items: start; /* background: palegoldenrod; */ overflow: hidden; background-image: url(../imgs/approaching/prospect.png); background-repeat: no-repeat; background-size:80vw auto; background-position:20vw -6vw; position: relative; } .topBannerLeft{ width: 50%; height: 80%; color: #fff; position: absolute; top: 5vh; left: 12vw; } .topBannerLeftTitle{ /* background: palegoldenrod; */ margin-top: 8vh; position: relative; } .lightImg{ width: 34vw; height: auto; } .topBannerLeft p:nth-child(1){ font-size: 3vw; font-weight: 600; letter-spacing: 0.5vw; position: absolute; top: 0.8vw; left: 1.5vw; } .topBannerLeft p:nth-child(2){ font-size: 1.3vw; color: #01A0D0; margin-top: 18px; line-height: 5vh; } .top{ width: 20vw; position: absolute; top: 0vh; left: 20vw; } .btLeft{ width: 20vw; position: absolute; bottom: 15vh; left: -5.5vw; } .tpRight{ width: 17vw; position: absolute; top: 10vh; right: -6vw; } .btRight{ width:70vw; position: absolute; bottom: -1.3vh; right: 0vw; } /* --------------------- */ .future{ width: 100%; height: 100vh; background: #01326C; color: #fff; padding-top: 5vh; } .futureList{ width: 90%; height: 100%; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; /* background: paleturquoise; */ } .futureList li{ width: 25%; height: 80%; /* background: palegoldenrod; */ border: 4px solid #00EAEB; border-radius: 20px; text-align: center; padding: 18px; position: relative; } .futureImg{ width: 100%; height:auto; } .futureContent{ margin-top: 5vh; } .futureContent p:nth-child(1){ font-size: 1.5vw; font-weight: 600; } .futureContent p:nth-child(2){ font-size: 1.2vw; width: 90%; margin: 0 auto; margin-top: 2vh; text-align: left; line-height: 4vh; text-align: justify; } .futureCircle{ width: 8vw; height: 8vw; border: 4px solid #00EAEB; border-radius: 50%; position: absolute; top: -3vw; left: -1vw; display: flex; justify-content: center; align-items: center; } .futureCircleInner{ width: 6.8vw; height: 6.8vw; border-radius: 50%; background: #019FCF; color: #fff; font-size: 1.5vw; font-weight: 600; display: flex; justify-content: center; align-items: center; padding: 1.2vw; } /* 英文状态下样式 */ .topBannerLeftTitle p.en { font-size: 2vw; letter-spacing: normal; left: -3.5vw; } /* .futureList.en li { font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif; background: rgba(0,236,236,0.06); border-radius: 12px; margin-bottom: 2vw; padding: 2vw 2vw 2vw 2vw; color: #00ECEC; box-shadow: 0 2px 8px rgba(0,236,236,0.08); display: flex; align-items: flex-start; gap: 2vw; } */ .futureList.en .futureContent p:nth-child(1) { font-weight: bold; font-size: 1.2vw; font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif; } .futureList.en .futureContent p:nth-child(2) { width: 96%; /* font-weight: bold; */ font-size: 1vw; text-align: left; line-height: 2.7vh; font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif; } .futureList.en .futureCircleInner { font-size: 1vw; } .textOne .Right p.en, .textTwo .Right p.en, .textThree .Right p.en { font-family: 'Segoe UI', 'Arial', 'Helvetica Neue', sans-serif; }