.main-about { z-index: 8; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; } .main-about-mask-1 { background: linear-gradient(180deg, rgba(6, 119, 161, .3) 0%, rgba(0, 0, 0, .7) 100%); } .main-about-mask-2 { background: linear-gradient(180deg, rgba(197, 81, 42, .3) 0%, rgba(0, 0, 0, .7) 100%); } .main-about-mask-3 { background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .7) 100%); } .main-about { color: white; } .main-about .container { /* height: auto; */ } .main-about h2 { position: relative; padding: 0 0 1rem .5rem; color: #ffc000; } .main-about h2::after { content: ''; width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid #ffc000; position: absolute; top: .6rem; left: -1rem; } .main-about .nav-img { z-index: 8; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 6rem; opacity: .6; } .main-about img { display: block; width: 100%; } .main-about p { padding: 0 0 0 .5rem; line-height: 1.5rem; font-size: 1rem; opacity: .9; } .content-1 { position: absolute; top: 50%; left: 1rem; right: 1rem; transform: translateY(-50%); } /*分会*/ .city-items { z-index: 10; position: absolute; top: 50%; left: 9rem; right: 1rem; transform: translateY(-50%); } .city-items > div { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; font-size: 1.2rem; } .city-items h5 { width: 100%; border-bottom: 1px solid #ffc000; padding-bottom: .5rem; font-size: 1.2rem; line-height: 1.5rem; font-weight: bold; color: #ffc000; } .city-items label { width: 100%; color: #ffc000; font-weight: bold; border-bottom: 1px solid rgba(255, 255, 255, .7); padding: .3rem 0; } .city-items span { position: relative; width: 25%; padding: .1rem 0; } /*使命*/ .sm { position: absolute; top: 50%; left: 9rem; right: 1rem; transform: translateY(-50%); font-size: 1.1rem; } .sm h3 { padding-top: 1.5rem; font-size: 1.2rem; color: #ffc000; } .sm p { margin: 0; padding: .2rem 0; font-size: 1rem; line-height: 1.4rem; } .main-about img.map { z-index: 1; position: absolute; left: 50%; top: 50%; width: 70%; opacity: .3; transform: translate3d(-50%, -50%, 0); } @media (max-width: 767.98px) { .main-about img.map{ width: 100%; } .sm,.city-items { left: 8rem; } .city-items span { width: 50%; } }