.fullslide { position: relative; margin: 0 auto; } .fullslide .bd { position: relative; z-index: 0; } .fullslide .bd li img { width: 100%; vertical-align: top; /*height:750px;*/ } .fullslide .hd { position: absolute; height: 80px; z-index: 1; bottom: 0; width: 100%; } .fullslide .hd ul { width: 100%; display: flex; height: 100%; justify-content: center; align-items: center; } .fullslide .hd ul li { font-size: 0; width: 16px; height: 16px; border-radius: 8px; background: #fff; margin: 0 5px; } .fullslide .hd ul .on { background: #2f82ff; } .fullslide .prev, .fullslide .next { z-index: 1; display: block; width: 55px; height: 55px; position: relative; margin: -27% 0 0 3%; float: left; font-size: 40px; color: #333; opacity: 0.4; background-color: #f5f5f5; border-radius: 50%; text-align: center; line-height: 55px; transition: all 0.6s ease-in-out; } .fullslide .next { background-position: right 0; float: right; margin-right: 3% } .fullslide .prev:hover, .fullslide .next:hover { opacity: 0.8 } .fullslide .logowrap { width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; height: 118px; z-index: 2; } .fullslide .logowrap .logo { transition: all 0.6s ease-in-out; background: #0f5bab; opacity: 0.1; height: 100%; display: flex; align-items: center; padding-left: 10px; } .fullslide .logo:hover { opacity: 0.4; } .jieshao { margin: 50px 0; } .jieshao .one { font-size: 30px; color: #333; text-align: center; } .jieshao .two { font-size: 16px; color: #ccc; text-align: center; } .chanpin { width: 1300px; margin:70px auto; overflow: hidden; position: relative; padding: 0 60px; height: 330px; display: flex; align-items: center; } .chanpin .prev { position: absolute; font-size: 40px; border-radius: 50%; background-color: #f3f3f3; top: 128px; opacity: 0.2; transition: all 0.6s ease-in-out; } .chanpin .wrap { width: 100%; overflow: hidden; height: 330px; } .chanpin .iconzuoyou1 { left: 0; } .chanpin .iconzuoyou { right: 0; } .chanpin .swiper-wrapper .swiper-slide { height: 270px; position: relative; width: 300px; } .chanpin .swiper-wrapper .swiper-slide img{ height: 270px; width: 100%; } .chanpin .swiper-wrapper .swiper-slide p { color: #333; font-size: 20px; font-weight: 400; height: 30px; line-height: 30px; text-align: center; margin-top: 20px; } .chanpin .swiper-wrapper .swiper-slide p span { display: table-cell; vertical-align: middle; text-align: center; } .chanpin .prev:hover { opacity: 0.5; }