/* 轮播样式 start */ .banner-swiper { overflow-x: hidden; height: 76vh; position: relative; background-color: #FFFFFF; } .banner-swiper .swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .banner-swiper .swiper-slide h1{ position: absolute; color: #FFFFFF; text-shadow: 2px 3px 10px rgba(0,0,0,.8); } /* 指示点默认样式 */ .banner-swiper .swiper-pagination-bullet { width: 20px; height: 20px; line-height: 20px; text-align: center; } /* 鼠标悬浮样式、当前选中指示点样式 */ .banner-swiper .swiper-pagination-bullet:hover,.banner-swiper .swiper-pagination-bullet-active { background-color: rgba(0,0,0,.8); color: #FFFFFF; opacity: 1; } /* 轮播样式 end */ /* 导航 start */ .header { position: sticky; top: 0; box-shadow: 0px 2px 0px rgba(0,0,0,.1); } .header-content { display: flex; justify-content: space-between; align-items: center; } .nav-box { position: relative; padding-bottom: 12px; } /* 下滑线 */ .nav-box .line { height: 2px; position: absolute; bottom: 0; margin: 10px 0 0 0; background: #FF1847; } .nav-box ul { padding: 0; margin: 0; list-style: none; display: flex; } .nav-box ul li { margin: 0 40px 0 0; opacity: 0.4; transition: all 0.4s ease; } /* 鼠标悬浮 */ .nav-box ul li:hover { opacity: 0.7; } /* 当前选中 */ .nav-box ul li.active { opacity: 1; } /* 最后一个li */ /* .nav-box ul li:last-child { margin-right: 0; } */ .nav-box ul li a { text-transform: uppercase; font-weight: 600; letter-spacing: 0.2em; font-size: 14px; } /* 导航 end */ .footer { width: 100%; height: 200vh; }