.all-content { width: 100%; position: relative; z-index: 4; background-color: #fff; } .all-content nav { width: 100%; height: 0.525rem; line-height: 0.525rem; border-bottom: 1px solid #E7E7E7; } .all-content nav .nav { margin-left: 1.95rem; display: flex; } .all-content nav .nav li { width: 1.2825rem; position: relative; text-align: center; } .all-content nav .nav li::after { content: ""; display: block; height: 0.15rem; width: 1px; background-color: #BCBCBC; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .all-content nav .nav li:last-child::after { display: none; } .all-content nav .nav li .nav-active { color: #EA4027; } .all-content nav .nav li a { font-size: 0.15rem; font-weight: bold; color: #000; transition: all 0.4s; } .all-content nav .nav li a:hover { color: #EA4027; } .all-content .img-box { width: 100%; height: 6.6002rem; position: relative; } .all-content .img-box .Swiper1, .all-content .img-box .Swiper2 { width: 100%; height: 100%; } .all-content .img-box .Swiper1 .swiper-img, .all-content .img-box .Swiper2 .swiper-img { width: 100%; height: 100%; position: relative; } .all-content .img-box .Swiper1 .swiper-img img, .all-content .img-box .Swiper2 .swiper-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .all-content .img-box .Swiper1 .swiper-img .cover, .all-content .img-box .Swiper2 .swiper-img .cover { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #000 -60%, transparent); position: absolute; top: 0; left: 0; } .all-content .img-box .Swiper1 .swiper-img .text, .all-content .img-box .Swiper2 .swiper-img .text { width: 70%; text-align: center; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); } .all-content .img-box .Swiper1 .swiper-img .text p, .all-content .img-box .Swiper2 .swiper-img .text p { font-size: 0.15rem; text-align: center; font-weight: 400; color: #fff; line-height: 0.3rem; } .all-content .img-box .Swiper1 .prev1, .all-content .img-box .Swiper2 .prev1, .all-content .img-box .Swiper1 .next1, .all-content .img-box .Swiper2 .next1, .all-content .img-box .Swiper1 .prev2, .all-content .img-box .Swiper2 .prev2, .all-content .img-box .Swiper1 .next2, .all-content .img-box .Swiper2 .next2 { width: 0.5rem; height: 0.5rem; background-color: #fff; box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.2); border-radius: 50%; color: #e84127; transition: all 0.5s; } .all-content .img-box .Swiper1 .prev1:hover, .all-content .img-box .Swiper2 .prev1:hover, .all-content .img-box .Swiper1 .next1:hover, .all-content .img-box .Swiper2 .next1:hover, .all-content .img-box .Swiper1 .prev2:hover, .all-content .img-box .Swiper2 .prev2:hover, .all-content .img-box .Swiper1 .next2:hover, .all-content .img-box .Swiper2 .next2:hover { background-color: #e84127; color: #fff; } .all-content .img-box .Swiper1 .prev1::after, .all-content .img-box .Swiper2 .prev1::after, .all-content .img-box .Swiper1 .next1::after, .all-content .img-box .Swiper2 .next1::after, .all-content .img-box .Swiper1 .prev2::after, .all-content .img-box .Swiper2 .prev2::after, .all-content .img-box .Swiper1 .next2::after, .all-content .img-box .Swiper2 .next2::after { font-size: 0.165rem; } .all-content .img-box .Swiper1 .prev1, .all-content .img-box .Swiper2 .prev1, .all-content .img-box .Swiper1 .prev2, .all-content .img-box .Swiper2 .prev2 { margin-left: 0.5rem; } .all-content .img-box .Swiper1 .next1, .all-content .img-box .Swiper2 .next1, .all-content .img-box .Swiper1 .next2, .all-content .img-box .Swiper2 .next2 { margin-right: 0.5rem; } .all-content .img-box .Swiper1 .one, .all-content .img-box .Swiper2 .one, .all-content .img-box .Swiper1 .two, .all-content .img-box .Swiper2 .two { display: none; } .all-content .img-box .Swiper1 .one .swiper-pagination-bullet, .all-content .img-box .Swiper2 .one .swiper-pagination-bullet, .all-content .img-box .Swiper1 .two .swiper-pagination-bullet, .all-content .img-box .Swiper2 .two .swiper-pagination-bullet { background-color: #fff; opacity: 0.5; } .all-content .img-box .Swiper1 .one .swiper-pagination-bullet-active, .all-content .img-box .Swiper2 .one .swiper-pagination-bullet-active, .all-content .img-box .Swiper1 .two .swiper-pagination-bullet-active, .all-content .img-box .Swiper2 .two .swiper-pagination-bullet-active { opacity: 1; } .all-content .top-text, .all-content .bot-text { width: 100%; margin-top: 0.8175rem; margin-bottom: 0.9rem; text-align: center; } .all-content .top-text .english, .all-content .bot-text .english { text-align: center; font-size: 0.6rem; line-height: 0.6rem; font-family: DIN; font-weight: bold; color: #EEEEEE; } .all-content .top-text .title, .all-content .bot-text .title { display: inline-block; margin-top: 0.42rem; height: 0.45rem; font-size: 0.45rem; font-weight: bold; color: #000; line-height: 0.45rem; border-left: 0.06rem solid #EA4027; padding-left: 0.1425rem; } .all-content .top-text .inform, .all-content .bot-text .inform { text-align: center; margin-top: 0.39rem; font-size: 0.25rem; line-height: 0.25rem; font-weight: 400; color: #000000; } .all-content .top-text .intro, .all-content .bot-text .intro { margin-top: 0.3rem; width: 100%; } .all-content .top-text .intro p, .all-content .bot-text .intro p { font-size: 0.15rem; text-align: center; font-weight: 400; color: #000; line-height: 0.3rem; } @media screen and (max-width: 1020px) { .all-content nav { width: 100%; height: 1rem; line-height: 1rem; border-bottom: 1px solid #E7E7E7; } .all-content nav .nav { margin: 0; display: flex; justify-content: center; } .all-content nav .nav li { width: 2rem; position: relative; text-align: center; } .all-content nav .nav li a { font-size: 0.3rem; font-weight: 500; color: #000; transition: all 0.4s; } .all-content .top-text .english, .all-content .bot-text .english { text-align: center; font-size: 0.6rem; line-height: 0.6rem; letter-spacing: -0.03rem; font-family: DIN-BOLD; font-weight: bold; color: #EEEEEE; } .all-content .img-box { width: 100%; height: 5rem; position: relative; } .all-content .img-box .text .intro { margin-top: 0.555rem; font-size: 0.25rem; font-weight: 400; color: #FFFFFF; line-height: 0.4rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .all-content .top-text .text-one, .all-content .top-text .text-two, .all-content .bot-text .text-one, .all-content .bot-text .text-two { width: 90%; margin: 0 auto; } .all-content .top-text .intro p, .all-content .bot-text .intro p { margin: 0 auto; width: 90%; font-size: 0.25rem; text-align: center; font-weight: 400; color: #000; line-height: 0.45rem; } .all-content .top-text .inform, .all-content .bot-text .inform { text-align: center; margin-top: 0.39rem; font-size: 0.36rem; line-height: 0.5rem; font-weight: 400; color: #000000; } .all-content .bot-text .inform { margin: 0 auto; width: 90%; line-height: 0.6rem; } .all-content .img-box .Swiper1 .swiper-img .text p, .all-content .img-box .Swiper2 .swiper-img .text p { font-size: 0.25rem; text-align: center; font-weight: 400; color: #fff; line-height: 0.45rem; } .all-content .img-box .Swiper1 .prev1, .all-content .img-box .Swiper2 .prev1, .all-content .img-box .Swiper1 .next1, .all-content .img-box .Swiper2 .next1, .all-content .img-box .Swiper1 .prev2, .all-content .img-box .Swiper2 .prev2, .all-content .img-box .Swiper1 .next2, .all-content .img-box .Swiper2 .next2 { width: 0.6rem; height: 0.6rem; background-color: #fff; box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.2); border-radius: 50%; color: #e84127; transition: all 0.5s; display: none; } .all-content .img-box .Swiper1 .prev1, .all-content .img-box .Swiper2 .prev1, .all-content .img-box .Swiper1 .prev2, .all-content .img-box .Swiper2 .prev2 { margin-left: 0.05rem; } .all-content .img-box .Swiper1 .next1, .all-content .img-box .Swiper2 .next1, .all-content .img-box .Swiper1 .next2, .all-content .img-box .Swiper2 .next2 { margin-right: 0.05rem; } .all-content .img-box .Swiper1 .one, .all-content .img-box .Swiper2 .one, .all-content .img-box .Swiper1 .two, .all-content .img-box .Swiper2 .two { display: block; } }