.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 .top-text { width: 100%; height: 9rem; text-align: center; position: relative; } .all-content .top-text .img { width: 100%; height: 5.3701rem; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .all-content .top-text .img img { width: 100%; } .all-content .top-text .title { margin-top: 0.8rem; display: inline-block; 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; position: relative; } .all-content .top-text .english { margin-top: 0.225rem; text-align: center; font-size: 0.225rem; font-family: Arial; font-weight: 400; color: #999999; position: relative; } .all-content .top-text .intro { margin-top: 0.2475rem; position: relative; } .all-content .top-text .intro p { font-size: 0.15rem; color: #000; line-height: 0.27rem; } .all-content .top-text .number-top { margin-top: 2.8rem; } .all-content .top-text .number-bot { margin-top: 0.2rem; } .all-content .top-text .number-top, .all-content .top-text .number-bot { width: 100%; display: flex; justify-content: center; position: relative; } .all-content .top-text .number-top li, .all-content .top-text .number-bot li { margin: 0 0.1125rem; flex-shrink: 0; width: 2.475rem; height: 1.125rem; background-color: #FFFFFF; box-shadow: 0px 5px 27px 0px rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; } .all-content .top-text .number-top li .num, .all-content .top-text .number-bot li .num { width: 100%; display: block; font-size: 0.4875rem; line-height: 0.4875rem; font-family: DIN; font-weight: bold; color: #000; transition: all 0.5s; } .all-content .top-text .number-top li .text, .all-content .top-text .number-bot li .text { margin-top: 0.1rem; display: block; height: 0.135rem; font-size: 0.135rem; color: #666666; } .all-content .top-text .number-top li:hover .num, .all-content .top-text .number-bot li:hover .num { color: #EA4027; } .all-content .pictures { width: 100%; height: 8.9rem; background-color: #fff; position: relative; overflow: hidden; } .all-content .pictures .img { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; position: absolute; top: 0; left: 0; } .all-content .pictures .cover { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; } .all-content .pictures .img-text { margin-top: 0.6525rem; width: 100%; text-align: center; position: relative; } .all-content .pictures .img-text .title { display: inline-block; padding-left: 0.15rem; height: 0.3rem; border-left: 0.045rem solid #ea4027; font-size: 0.315rem; line-height: 0.315rem; font-weight: bold; color: #fff; } .all-content .pictures .img-text .english { margin-top: 0.225rem; font-size: 0.225rem; font-family: Arial; font-weight: 400; color: #fff; } .all-content .pictures .made { margin: 0 auto; margin-top: 0.3rem; width: 11.1002rem; position: relative; } .all-content .pictures .made .madeSwiper2 { margin: 0 auto; width: 8.88rem; height: 6.5rem; } .all-content .pictures .made .madeSwiper2 .made-img { width: 100%; height: 5.25rem; position: relative; } .all-content .pictures .made .madeSwiper2 .made-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .all-content .pictures .made .madeSwiper2 .made-img .title { width: 100%; position: absolute; bottom: -0.6rem; } .all-content .pictures .made .madeSwiper2 .made-img .title p { width: 100%; height: 0.21rem; font-size: 0.21rem; line-height: 0.21rem; color: #FFFFFF; text-align: center; } .all-content .pictures .made .madeSwiper2 .m-swiper-pagination { top: 6.3rem; height: 1px; background-color: rgba(255, 255, 255, 0.3); } .all-content .pictures .made .madeSwiper2 .m-swiper-pagination span { height: 0.1rem; top: -0.04rem; background-color: #ea4027; } .all-content .pictures .made .mprev, .all-content .pictures .made .mnext { width: 0.4125rem; height: 0.4125rem; background-color: rgba(255, 255, 255, 0.1); box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.1); border-radius: 50%; color: #fff; transition: all 0.5s; top: 2.6rem; } .all-content .pictures .made .mprev:hover, .all-content .pictures .made .mnext:hover { background-color: #ffffff; color: #e84127; } .all-content .pictures .made .mprev::after, .all-content .pictures .made .mnext::after { font-size: 0.165rem; } @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 { padding-bottom: 0.5rem; width: 100%; height: auto; text-align: center; position: relative; } .all-content .top-text .english { margin-top: 0.225rem; text-align: center; font-size: 0.25rem; font-family: Arial; font-weight: 400; color: #999999; position: relative; } .all-content .top-text .img { width: 100%; height: 5.3701rem; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .all-content .top-text .img img { width: 100%; position: relative; top: 50%; transform: translateY(-50%); } .all-content .top-text .title { margin-top: 0.5rem; display: inline-block; 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; position: relative; } .all-content .top-text .intro p { margin: 0 auto; width: 90%; font-size: 0.22rem; color: #000; line-height: 0.35rem; } .all-content .top-text .number-top { margin-top: 1rem; } .all-content .top-text .number-top li, .all-content .top-text .number-bot li { margin: 0 0.05rem; flex-shrink: 0; width: 1.8rem; height: 1.7rem; background-color: #FFFFFF; box-shadow: 0px 5px 27px 0px rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; } .all-content .top-text .number-top li .num, .all-content .top-text .number-bot li .num { width: 100%; display: block; font-size: 0.5rem; line-height: 0.5rem; font-family: DIN-BOLD; letter-spacing: -0.03rem; font-weight: bold; color: #000; transition: all 0.5s; } .all-content .top-text .number-top li .text, .all-content .top-text .number-bot li .text { margin-top: 0.1rem; display: block; height: 0.14rem; font-size: 0.2rem; color: #666666; } .all-content .pictures { width: 100%; height: auto; background-color: #fff; position: relative; overflow: hidden; } .all-content .pictures .img-text { margin: 0 auto; margin-top: 0.6525rem; width: 90%; text-align: center; position: relative; } .all-content .pictures .img-text .title { padding-left: 0.15rem; height: 0.4rem; border-left: 0.045rem solid #ea4027; font-size: 0.4rem; line-height: 0.4rem; font-weight: bold; color: #fff; } .all-content .pictures .img-text .intro { width: 90%; margin: 0 auto; margin-top: 0.2475rem; font-size: 0.25rem; color: #FFFFFF; line-height: 0.4rem; } .all-content .pictures .made { margin: 0 auto; margin-top: 0.6rem; width: 90%; position: relative; } .all-content .pictures .made .madeSwiper2 { margin: 0 auto; width: 100%; height: 7rem; } .all-content .pictures .made .mprev, .all-content .pictures .made .mnext { width: 0.6rem; height: 0.6rem; background-color: rgba(255, 255, 255, 0.1); box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.1); border-radius: 50%; color: #fff; transition: all 0.5s; top: 2.6rem; } .all-content .pictures .made .madeSwiper2 .made-img .title p { width: 100%; height: 0.3rem; font-size: 0.3rem; line-height: 0.3rem; color: #FFFFFF; text-align: center; } }