.banner-wrapper { width: 100%; position: relative; height: 100vh; overflow: hidden; } .banner-wrapper img { width: 100%; height: 100%; } .banner-wrapper:before, .develop-wrapper:before, .customer-says-wrapper:before { position: absolute; width: 100%; height: 100%; content: ""; z-index: 1; } .banner-content { position: absolute; top: 30%; width: 54%; z-index: 2; left: 24%; } .banner-line { display: inline-block; width: 3.5rem; height: 0.2rem; background: #FF7200; margin-left: 0 !important; } .banner-content span { color: #ffffff; vertical-align: middle; margin-left: 1rem; font-size: 1.4rem; } .banner-content .banner-title { display: flex; justify-content: space-between; } .banner-content .banner-title p { font-weight: 500; color: #ffffff; font-size: 6rem; margin: 5rem 0; letter-spacing: 0.8rem; } .banner-content .banner-title p:last-of-type { margin-right: 0; } .banner-content h6 { font-size: 2rem; color: #fff; font-weight: normal; letter-spacing: 0.2rem; margin-bottom: 1rem; } .banner-about-us { color: #fff; font-size: 1.6rem; display: inline-block; margin-top: 5rem; border: 1px #fff solid; width: 13rem; text-align: center; height: 4.6rem; line-height: 4.6rem; border-radius: 0.2rem; transition: color 0.5s, border 0.5s; } .banner-about-us:hover { color: #FF7200; border: 1px #FF7200 solid; } .index-data-wrapper { width: calc(100vw - 24rem); margin: 2rem auto; padding: 4rem 12rem; display: flex; justify-content: space-between; } .index-data-wrapper > div { font-size: 1.5rem; } .index-data-wrapper span { font-size: 4rem; font-weight: 500; margin-right: 1rem; } .index-data-wrapper p { font-size: 1.5rem; margin-top: 1.5rem; } .data-about-wrapper > img { opacity: 0.8; width: 100%; } .index-about-wrapper { width: calc(100vw - 24rem); display: flex; padding: 8rem 12rem 14rem 12rem; justify-content: space-between; align-items: start; margin: auto; } .index-about-wrapper > div { width: 50%; } .index-about-wrapper img { width: 40%; border-radius: 0.4rem; } .index-about-wrapper h2 { font-size: 4.6rem; font-weight: 500; letter-spacing: 0.3rem; } .index-about-wrapper span { font-size: 1.5rem; font-weight: 500; } .index-about-wrapper p { font-size: 1.6rem; line-height: 3rem; margin: 5rem 0; text-indent: 2em; } .index-about-wrapper a { display: block; font-size: 1.5rem; margin-top: 5rem; width: 12rem; border: #0147a6 1px solid; color: #fff; text-align: center; height: 4rem; line-height: 4rem; background: #0147a6; border-radius: 0.2rem; } .index-about-wrapper a:hover { background: #0054c7; } .product-wrapper { background: #f3f3f3; padding: 8rem 12rem; position: relative; } .product-content h3, .honor-wrapper h3, .index-news-wrapper h3, .partner-wrapper h3 { font-size: 4.6rem; font-weight: 500; text-align: center; letter-spacing: 0.3rem; margin-bottom: 10rem; } .product-list { display: flex; justify-content: space-between; flex-wrap: wrap; } .product-list > div { width: 49%; display: flex; background: #fff; padding: 6rem 4rem; margin-bottom: 3rem; border-radius: 0.4rem; align-items: center; } .product-list > div img { width: 100%; } .product-describe-content { margin-left: 8%; width: 100%; } .product-describe-content .tips { font-size: 1.2rem; display: inline-block; border: #FF7200 1px solid; padding: 0.2rem 0.4rem; margin: 1rem 0.8rem 1rem 0; letter-spacing: 0; border-radius: 0.2rem; color: #FF7200; } .product-describe-content .title { font-size: 2rem; font-weight: 600; } .product-describe-content .content { margin-top: 1rem; font-size: 1.5rem; line-height: 2.6rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 5.2rem; } .product-describe-content a { display: inline-block; border: #0147a6 1px solid; background: #0147a6; color: #ffffff; padding: 0.6rem 1rem; border-radius: 0.2rem; margin-top: 2rem; } .product-describe-content a:hover { border: #0054c7 1px solid; background: #0054c7; } .honor-wrapper { padding: 8rem 22rem; position: relative; } .honor-wrapper .swiper-slide img { width: calc(calc(100vw - 60rem) / 5) !important; border: #eeeeee 2px solid; padding: 3rem; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 12rem !important; } .swiper-button-next, .swiper-button-prev { top: 60% !important; color: #c1c1c1 !important; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 12rem !important; } .swiper-pagination-bullet { width: 1.2rem !important; height: 1.2rem !important; border-radius: 0.2rem !important; } .swiper-pagination { z-index: 0 !important; } .develop-wrapper { height: 86rem; overflow: hidden; margin-top: 8rem; position: relative; } .develop-wrapper video { width: 100%; position: relative; top: -16rem; } .develop-wrapper:before { height: 86rem; } .develop-wrapper .time-line { width: calc(100vw - 24rem); left: 12rem; position: absolute; bottom: 8rem; z-index: 1; } .develop-wrapper .line { background: #fff; height: 0.1rem; display: inline-block; width: 100%; opacity: 0.5; } .time-point, .time { position: relative; top: -1.1rem; padding: 0 12rem; display: flex; justify-content: space-between; } .time-point span { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #edf5ff; cursor: pointer; } .time-point > div { text-align: center; } .time-point-active span { border: #fff 0.6rem solid; width: 2.5rem !important; height: 2.5rem !important; margin-top: -0.5rem; background: #0147a6 !important; } .time-point-active p { font-size: 1.6rem !important; } .time-point > div p { font-size: 1.4rem; color: #ffffff; margin-top: 1rem; } .develop-content-wrapper { position: absolute; top: 30rem; z-index: 1; left: 30rem; width: calc(100vw - 60rem); } .develop-content-wrapper > div { justify-content: space-around; align-items: center; display: none; } .develop-content-wrapper .develop-show { display: flex; } .develop-content-wrapper .develop-img-wrapper { width: 44rem; border: #fff 1px dashed; padding: 1rem; border-radius: 4rem 0 4rem 0; overflow: hidden; height: 31.6rem; } .develop-content-wrapper img { width: 100%; padding: 1rem; border-radius: 4rem 0 4rem 0; } .develop-content-wrapper ul li { font-size: 1.5rem; color: #ffffff; margin: 2rem 0 2rem 2rem; list-style: square; } .develop-content-wrapper .title { font-size: 2rem; color: #ffffff; margin: 1.5rem 0 6rem 0; list-style: square; font-weight: 600; } .develop-content-wrapper .title span { font-size: 6rem; color: #ffffff; margin-right: 1.5rem; font-family: JetB, serif; } .swiper-pagination-bullet-active { background: #0147a6 !important; } .develop-content { position: absolute; top: 8rem; width: 100%; z-index: 1; } .develop-wrapper h3 { text-align: center; font-size: 4.6rem; font-weight: 500; letter-spacing: 0.3rem; margin-bottom: 10rem; color: #fff; position: absolute; top: 8rem; width: 100%; z-index: 1; } .index-news-wrapper { padding: 8rem 12rem; } .index-news-wrapper ul { display: flex; justify-content: space-between; } .index-news-wrapper ul li { background: #fff; width: 24%; border-radius: 0.6rem; box-shadow: 0 0.1rem 1rem 0.1rem rgb(0 84 199 / 10%); overflow: hidden; } .index-news-wrapper ul li:hover img { transform: translate(0) scale(1.1); transition: 1s ease-in; } .index-news-wrapper ul li div { height: 22rem; overflow: hidden; } .index-news-wrapper ul li img { width: 100%; transform: translate(0) scale(1); transition: 1s ease-out; } .index-news-wrapper ul li h5 { font-size: 1.6rem; padding: 2rem 1.5rem 0.5rem 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index-news-wrapper ul li span { font-size: 1.3rem; padding: 0 1.5rem; color: #c1c1c1; } .index-news-wrapper ul li p { font-size: 1.5rem; padding: 0 1.5rem; margin-top: 2rem; line-height: 2.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .index-news-wrapper ul li a { padding-bottom: 3rem; display: block; } .index-news-wrapper > a { display: block; border: #0147a6 1px solid; width: 15rem; font-size: 1.5rem; background: #0147a6; text-align: center; color: #ffffff; height: 4.4rem; line-height: 4.4rem; border-radius: 0.2rem; margin: 8rem auto 0 auto; } .index-news-wrapper > a:hover { background: #0054c7 } .partner-wrapper { background: #f3f3f3; padding: 8rem 36rem; } .partner-wrapper ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .partner-wrapper ul li { width: 16%; margin-bottom: 6rem; } .partner-wrapper ul li img { width: 60%; text-align: center; } .customer-says-wrapper { background: #266ac9; width: 100%; position: relative; } .customer-says-wrapper > div { padding: 5rem 12rem; position: relative; z-index: 2; } .customer-says-wrapper h3 { text-align: center; font-size: 4.6rem; font-weight: 500; letter-spacing: 0.3rem; margin-bottom: 6rem; color: #fff; } .customer-says-swiper { text-align: center; width: 56%; } .customer-says-swiper .content { color: #fff !important; font-size: 1.8rem; letter-spacing: 0.2rem; line-height: 3rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .customer-says-swiper .sign { color: #fff !important; margin-top: 3rem; font-size: 1.5rem; letter-spacing: 0.2rem; } .customer-says-swiper img { width: 15rem; margin-top: 5rem; } .product-list .img-wrapper { width: 30%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; } /* 兼容不同分辨率样式 */ @media screen and (max-width: 1919px) and (min-width: 1680px) { .banner-content { width: 64%; left: 18%; } .banner-content .banner-title p { font-size: 5.6rem; } .banner-content h6 { font-size: 1.8rem; margin-top: 1.5rem; } .banner-about-us { font-size: 1.5rem; width: 12rem; height: 4rem; line-height: 4rem; } .index-data-wrapper span { font-size: 3.8rem; } .index-data-wrapper, .index-about-wrapper { width: calc(100vw - 12rem); } .index-about-wrapper h2, .product-content h3, .honor-wrapper h3, .index-news-wrapper h3, .partner-wrapper h3, .develop-wrapper h3, .customer-says-wrapper h3 { font-size: 4.4rem; } .honor-wrapper .swiper-slide img { padding: 2rem; } .develop-wrapper video { top: 0; } .develop-content-wrapper .title span { font-size: 5.8rem; } .develop-content-wrapper { left: 18rem; width: calc(100vw - 36rem); } .partner-wrapper { padding: 8rem 24rem; } .customer-says-swiper { width: 65%; } .customer-says-swiper .content { font-size: 1.7rem; height: 6rem; line-height: 3.4rem; } .customer-says-swiper .sign { margin-top: 4rem; } .customer-says-swiper img { width: 13rem; } .customer-says-wrapper > div { padding: 6rem 12rem; } .product-list .img-wrapper { width: 35%; } } @media screen and (max-width: 1679px) and (min-width: 1600px) { .banner-content { width: 70%; left: 15%; } .product-list .img-wrapper { width: 35%; } .banner-content .banner-title p { font-size: 5.6rem; } .banner-content h6 { font-size: 1.8rem; margin-top: 1.5rem; } .banner-about-us { font-size: 1.5rem; width: 12rem; height: 4rem; line-height: 4rem; } .index-data-wrapper span { font-size: 3.8rem; } .index-data-wrapper, .index-about-wrapper { width: calc(100vw - 12rem); } .index-about-wrapper h2, .product-content h3, .honor-wrapper h3, .index-news-wrapper h3, .partner-wrapper h3, .develop-wrapper h3, .customer-says-wrapper h3 { font-size: 4.4rem; } .honor-wrapper .swiper-slide img { padding: 1rem; } .develop-wrapper video { top: 0; } .develop-content-wrapper .title span { font-size: 5.8rem; } .develop-content-wrapper { left: 18rem; width: calc(100vw - 36rem); top: 25rem; } .partner-wrapper { padding: 8rem 24rem; } .customer-says-swiper { width: 68%; } .customer-says-swiper .content { font-size: 1.6rem; height: 6rem; line-height: 3.4rem; } .customer-says-swiper .sign { margin-top: 4rem; font-size: 1.4rem; } .customer-says-swiper img { width: 13rem; } .customer-says-wrapper > div { padding: 6rem 12rem; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { font-size: 3.2rem !important; } .swiper-button-next, .swiper-button-prev { top: 64% !important; } .honor-wrapper { padding: 8rem 20rem; } .develop-wrapper { height: 80rem; } .develop-content-wrapper img { width: 42rem; } .index-news-wrapper ul li div { height: 20rem; } .index-news-wrapper ul li h5 { font-size: 1.5rem; } .index-news-wrapper ul li span { font-size: 1.2rem; } .index-news-wrapper ul li p { font-size: 1.4rem; -webkit-line-clamp: 1; } } @media screen and (max-width: 1599px) and (min-width: 1440px) { .banner-wrapper { height: 70rem; } .banner-line { height: 0.1rem; width: 3.2rem; } .banner-content span { font-size: 1.3rem; } .banner-content { width: 66%; left: 17%; } .banner-content .banner-title p { font-size: 5.4rem; } .banner-content h6 { font-size: 1.8rem; margin-bottom: 1.4rem; } .banner-about-us { font-size: 1.5rem; height: 4.4rem; line-height: 4.4rem; width: 12.6rem; } .index-data-wrapper { padding: 4rem 12rem; width: 100%; } .index-data-wrapper span { font-size: 3.6rem; } .index-about-wrapper { width: 100%; align-items: center; } .index-about-wrapper h2 { font-size: 4rem; } .index-about-wrapper p { font-size: 1.5rem; } .index-about-wrapper span, .index-about-wrapper a { font-size: 1.4rem; } .index-about-wrapper > div { width: 55% } .index-about-wrapper img { width: 38%; } .product-content h3, .honor-wrapper h3, .index-news-wrapper h3, .partner-wrapper h3, .develop-wrapper h3, .customer-says-wrapper h3 { font-size: 4rem; } .product-list > div { padding: 4rem 3rem; } .product-list .img-wrapper { width: 38%; } .product-describe-content .title { font-size: 1.8rem; } .product-wrapper, .index-news-wrapper { padding: 8rem 10rem; } .honor-wrapper .swiper-slide img { width: calc(calc(100vw - 58rem) / 5) !important; border: #eeeeee 1px solid; padding: 0.5rem; } .swiper-button-next, .swiper-button-prev { top: 64% !important; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10rem !important; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { font-size: 2.6rem !important; } .honor-wrapper { padding: 8rem 18rem; } .swiper-pagination-bullet { width: 1rem !important; height: 1rem !important; margin: 0 0.5rem !important; } .develop-content-wrapper { left: 12rem; width: calc(100vw - 24rem); } .develop-content-wrapper .title span { font-size: 5.4rem; } .develop-content-wrapper .develop-img-wrapper { width: 40rem; padding: 0.5rem; height: 28rem; } .time-point span { width: 1.3rem; height: 1.3rem; } .time-point-active span { border: #fff 0.4rem solid; width: 1.8rem !important; height: 1.8rem !important; margin-top: -0.2rem; } .develop-wrapper { height: 75rem; } .develop-content-wrapper { top: 23rem; } .develop-wrapper video { top: -5rem; } .index-news-wrapper ul li:last-of-type { display: none; } .index-news-wrapper ul li { width: 32%; } .partner-wrapper { padding: 8rem 20rem; } .customer-says-swiper { width: 72%; } .customer-says-swiper .content { font-size: 1.7rem; line-height: 3.4rem; } .customer-says-swiper .sign { margin-top: 3.4rem; } } @media screen and (max-width: 1439px) and (min-width: 1280px) { .banner-wrapper { height: 65rem; } .banner-line { height: 0.1rem; width: 3.2rem; } .banner-content span { font-size: 1.3rem; } .banner-content { width: 70%; left: 15%; } .banner-content .banner-title p { font-size: 4.8rem; } .banner-content h6 { font-size: 1.6rem; margin-bottom: 1.2rem; } .banner-about-us { font-size: 1.4rem; height: 4rem; line-height: 4rem; width: 11rem; } .index-data-wrapper { padding: 4rem 10rem; width: 100%; } .index-data-wrapper p { font-size: 1.4rem; } .index-data-wrapper span { font-size: 3.4rem; } .index-about-wrapper { width: 100%; align-items: center; padding: 6rem 10rem 8rem 10rem; } .index-about-wrapper h2 { font-size: 3.6rem; } .index-about-wrapper p { font-size: 1.5rem; margin: 4rem 0; } .index-about-wrapper span, .index-about-wrapper a { font-size: 1.4rem; } .index-about-wrapper > div { width: 58% } .index-about-wrapper img { width: 35%; } .product-content h3, .honor-wrapper h3, .index-news-wrapper h3, .partner-wrapper h3, .develop-wrapper h3, .customer-says-wrapper h3 { font-size: 3.6rem; margin-bottom: 8rem; } .product-list > div { padding: 3rem; } .product-list .img-wrapper { width: 38%; } .product-describe-content .title { font-size: 1.7rem; } .product-describe-content .content { font-size: 1.4rem; line-height: 2.2rem; height: 4.4rem; } .product-wrapper, .index-news-wrapper, .partner-wrapper { padding: 7rem 8rem; } .honor-wrapper .swiper-slide img { width: calc(calc(100vw - 46rem) / 5) !important; border: #eeeeee 1px solid; padding: 0.5rem; } .swiper-button-next, .swiper-button-prev { top: 64% !important; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 9rem !important; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 9rem !important; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { font-size: 2.6rem !important; } .honor-wrapper { padding: 7rem 14rem; } .swiper-pagination-bullet { width: 1rem !important; height: 1rem !important; margin: 0 0.5rem !important; } .develop-wrapper { margin-top: 7rem; } .develop-wrapper h3 { top: 7rem; } .develop-content-wrapper { left: 10rem; width: calc(100vw - 20rem); } .develop-content-wrapper .title span { font-size: 4.8rem; } .develop-content-wrapper .develop-img-wrapper { width: 35rem; padding: 0.5rem; height: 24.5rem; } .develop-wrapper .time-line { bottom: 5rem; } .time-point span { width: 1.3rem; height: 1.3rem; } .time-point-active span { border: #fff 0.4rem solid; width: 1.8rem !important; height: 1.8rem !important; margin-top: -0.2rem; } .develop-wrapper { height: 71rem; } .develop-content-wrapper { top: 20rem; } .develop-wrapper video { top: 0; } .index-news-wrapper ul li:last-of-type { display: none; } .index-news-wrapper ul li div { height: 20rem; } .index-news-wrapper ul li h5 { font-size: 1.5rem; } .index-news-wrapper ul li span { font-size: 1.2rem; } .index-news-wrapper ul li p { -webkit-line-clamp: 1; font-size: 1.4rem; } .index-news-wrapper > a { width: 13rem; font-size: 1.4rem; height: 4rem; line-height: 4rem; margin: 7rem auto 0 auto; } .index-news-wrapper ul li { width: 32%; } .partner-wrapper { padding: 7rem 12rem 2rem 12rem; } .partner-wrapper ul li { margin-bottom: 6rem; } .partner-wrapper ul li img { width: 55%; } .customer-says-wrapper > div { padding: 6rem 10rem; } .customer-says-swiper img { width: 14rem; } .customer-says-swiper { width: 74%; } .customer-says-swiper .content { font-size: 1.7rem; line-height: 3.4rem; } .customer-says-swiper .sign { margin-top: 3.4rem; } }