.proContent { width: 80%; padding: 80px 10%; position: relative; height: 600px; } .ba1{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 1; /*display: none;*/ } .ba1 img{ width: 100%; object-fit: cover; } .proContent>img { height: 100%; width: 100%; } .product { width: 70%; height: 500px; padding: 50px 5%; position: absolute; top: 80px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; z-index: 22; } .product>li { width: 200px; display: flex; align-items: center; } .product>li>a { display: flex; align-items: center; } .product>li:hover .yuan { background: #0015ff; } .product>li:hover .yuan::after { content: ""; position: absolute; top: -8px; width: 86px; height: 86px; background: #0015ff2a; z-index: -1; border-radius: 100px; } .product>li:hover .tuyu { background: #ffffff; color: black; } .yuan { width: 70px; height: 70px; border-radius: 100px; display: flex; align-items: center; justify-content: center; background: #414e64; z-index: 10; transition: all 0.6s; position: relative; } .tuyu { width: 130px; height: 45px; border-radius: 50px; background: #6b778c; display: flex; align-items: center; justify-content: center; margin-left: -30px; z-index: 5; font-size: 15px; color: white; transition: all 0.6s; position: relative; padding-left: 10px; } .introduce { width: 44%; padding: 25px 3%; background: #0015ff; position: absolute; right: 0; bottom: 0; display: none; align-items: center; color: white; } .introduce .fontS13 { margin-top: 10px; line-height: 25px; } .introduce>a { width: 180px; border-radius: 3px; font-size: 14px; /*margin-left: 3%;*/ margin-top: 20px; display: flex; height: 40px; align-items: center; justify-content: center; background: #f97111; } .proContend { width: 0; height: 0; overflow: hidden; } .proContendShow { width: 100%; height: 600px; } .proContend { width: 80%; padding: 0 10%; } .nieironga { width: 80%; height: 100%; display: flex; justify-content: space-between; align-items: center; } .neileft { width: 40%; } .neileft>.fontS14 { margin-top: 40px; color: #999999; line-height: 30px; } .neright { width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; } .neright>img { width: 50%; } @media (max-width: 1200px) { .proContent { overflow: hidden; height: 680px; margin-left: 10%; padding: 80px 0 !important; } .product { width: 90%; height: 600px !important; justify-content: flex-start; } .proContent>img { width: auto !important; } .introduce { width:94%; display: flex; flex-wrap: wrap; } .rightCe{ width:100%; } .introduce>a{ margin-top: 20px; } .product>li{ margin-bottom: 20px; } } @media (max-width: 1000px) { .nieironga{ flex-wrap: wrap; } .neileft{ width: 100%; } .neright{ width: 100%; height: 300px; } .navdao{ top: -100px; } } @media (max-width: 800px) { .navigation{ height: auto !important; flex-wrap: wrap; justify-content: space-between; } .navigation>li{ height: 50px !important; } }