* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size:100px; } @media(max-width:767.99px){ html { font-size:44px; } } ul, li { list-style: none; } a { text-decoration: none; color: #fff; } body { overflow-x: hidden; background: #fff; } @font-face { font-family: Bebas; src: url("/uploads/asstes/bebas/Bebas-Regular.ttf"); } button, input, optgroup, select, textarea { margin: 0; padding: 0; font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; } button, select { text-transform: none; } [type="button"], [type="reset"], [type="submit"], button { -webkit-appearance: button; appearance: button; background-color: initial; background-image: none; } .area { /* position: relative; */ margin: 0 auto; width: 100%; max-width: 1400px; } /* 解决文字超出溢出问题 */ .text-cut-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .text-cut-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .text-cut-5 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } .fl { float: left; } .fr { float: right; } .clearFix::after { content: ""; display: block; clear: both; } /* 公共样式结束 */ header { background: #fff; } .nav { width: 100%; position: fixed; top: 0; z-index: 999; background: #02060c; } .nav-area { display: flex; justify-content: space-between; align-items: center; } .nav-logo-a { line-height: 0; z-index: 9; } .nav-logo { width: 3.29rem; } .nav-list { margin-left: 2rem; display: flex; justify-content: space-between; align-items: center; flex: 1; } .nav-list-content { width: 100%; position: absolute; top: 0.74rem; left: 0; background: #02060cbf; padding: 0.66rem 0 0.58rem 0; display: none; backdrop-filter: blur(5px); } .nav-list-content ul { /* display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); */ display: flex; justify-content: flex-start; } .nav-list-content ul li { border-right: 1px solid #fffefe47; font-weight: 400; font-size: 0.14rem; padding-right: 0.4rem; padding-left: 0.4rem; max-width: 25%; } .nav-list-content ul li:last-child { border-right: 1px solid transparent; padding-right: 0rem; } .nav-list-content ul li:first-child { padding-left: 0rem; } .nav-list > li { font-weight: bold; color: #ffffff; font-size: 0.2rem; padding: 0.24rem 0rem; } .nav-list-content-title { font-size: 0.2rem; font-family: Microsoft YaHei; color: #ffffff; } .nav-list-content-img { width: 100%; height: 2.35rem; display: flex; justify-content: center; align-items: center; /* margin-top:.6rem; margin-bottom:.8rem; */ } .nav-list-content-img img { width: 60%; } .nav-language { font-weight: 400 !important; color: #ffffff; font-size: 0.16rem !important; /* display:none; */ } .nav-language span { opacity: 0.7; cursor: pointer; } .nav-language .active { border-bottom: 1px solid #196fe9; color: #ffffff; padding-bottom: 5px; opacity: 1; } .banner { width: 100%; position: relative; } .bannerSwiper { width: 100%; } .bannerSwiper .swiper-slide { text-align: left; font-size: 18px; background: #fff; } .swiper-slide-start { width: 20px; height: 20px; /* background: url("/uploads/star-04.png") no-repeat; */ position: absolute; background-size: 100% 100%; /* animation: flash 2s alternate infinite; */ } /* .swiper-slide-start:hover{ transform: scale(1.2, 1.2) rotate(180deg) !important; transition: all 1s; } @keyframes flash { 0%{opacity: 0;} 100%{opacity: 1;} } */ /* .swiper-slide:nth-child(1) .slide-box { background-repeat: no-repeat; background-size: 100%, 100%; background-blend-mode: darken; background-position: center, right; animation: linear-bg 3s ease infinite; } */ .area-position { width: 100%; height: 100%; position: absolute; top: 0; display: flex; /* align-items: flex-start; */ align-items: center; padding-bottom: 24vh; /* padding-bottom: 1rem; */ /* padding-top: 2rem; */ } .bannerProduct-box { display: flex; flex-direction: column; } .bannerProduct { width: calc(100% - (100% - 1400px)/1.2 ); height: 35vw; position: absolute; left: calc((100% - 1400px) / 2); bottom: 0%; } .menuClick { cursor:pointer; } @media screen and (max-width: 1400px) { .bannerProduct { width: calc(100% - 0.4rem); height: 40vw; position: absolute; left: 0.2rem; bottom: 0%; } } @media screen and (max-width: 1280px) { .area-position { width: 100%; height: 100%; position: absolute; top: 0; display: flex; /* align-items: flex-start; */ align-items: center; padding-bottom: 20vh; /* padding-bottom: 1rem; */ /* padding-top: 2rem; */ } } @media screen and (max-width: 1024px) { .area-position { width: 100%; height: 100%; position: absolute; top: 0; display: flex; /* align-items: flex-start; */ align-items: center; padding-bottom: 15vh; /* padding-bottom: 1rem; */ /* padding-top: 2rem; */ } } .bannerProduct .swiper-wrapper { display: flex; align-items: flex-end; } .bannerProduct .swiper-slide { transition: height 0s; } .bannerProduct .swiper-slide:not(.swiper-slide-active) { width:20%; padding-bottom: 2% !important; } .bannerProduct .swiper-slide.swiper-slide-active { width:40%; padding-bottom: 0% !important; transform:scale(1.2) /* width:49%; */ } .bannerProduct-img { height: 90%; } .bannerSwiper .swiper-slide { background: transparent; padding-bottom: 100vh; } .slide-box-text { font-size: 0.54rem; color: #fff; line-height: 0.76rem; } .banner-pagination { width: 100%; height: 100%; position: absolute; top: 0; } .slide-box-video { width: 100%; height: 100%; object-fit: cover; } .banner-swiper-pagination { width: 40% !important; position: absolute; bottom: 42% !important; top: auto !important; background: #687790 !important; z-index: 1; } .banner .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #13c7e3 !important; } /* .slide-box-space { padding-top:.4rem; } */ .slide-box-text-en { font-size: 0.26rem; opacity: 0.8; color: #ffffffba; line-height: 0.31rem; } .slide-box-text-single { transform: translateY(50px); transition: all 2 ease; opacity: 0; } .ani-slide .slide-box-text-single { transform: translateY(0px); } .slide-box-text-single-en { transform: translateY(0.61rem); transition: all 2 ease; opacity: 0; } /* transform: translate3d(0px, 0em, 0px); */ .ani-slide .slide-box-text-single-en { transform: translateY(0.31rem); /* scale:1; */ } .slide-box-text-single-en2 { transform: translateY(0.31rem); transition: all 2 ease; opacity: 0; } .ani-slide .slide-box-text-single-en2 { transform: translateY(0px); } .slide-box-transfrom { height: 0.76rem; overflow: hidden; } .slide-box-transfrom-en { height: 0.71rem; overflow: hidden; } .slide-box-transfrom-en2 { height: 0.51rem; } .bannerSwiper .ani-slide p { opacity: 1; transition: all 1s ease; } .bannerSwiper .swiper-wrapper { transition-delay: 0.3s; } .bannerSwiper .swiper-slide { /* padding-bottom: 48.3%; */ position: relative; } .slide-box { position: absolute; top: 0; width: 100%; height: 100%; display: flex; align-items: center; } .banner-img { width: 100%; height: 100%; } .banner-brightness { position: absolute; top: 0; width: 60%; height: 60%; z-index: 1; } footer { width: 100%; background: url(/uploads/images/footer-bg.jpg) #000; background-size: cover; background-position: right bottom; background-repeat: no-repeat; color: #fff; /* position:fixed; bottom:0; */ z-index: -1; } .footer-box-ul p:hover { opacity: 1; } .footer-box-title { opacity: 1 !important; } .footer-top { padding: 0.74rem 0; border-bottom: 1px solid #ffffff5e; } .footer-logo { width: 2rem; display: block; padding-bottom: 0.24rem; } .footer-title { font-size: 0.24rem; } footer .line { width: 21px; height: 2px; background: #4b4e53; margin: 0.2rem 0 0.36rem 4px; } footer .active.line { width: 21px; height: 2px; background: #1963cb !important; margin: 0.2rem 0 0.36rem 4px; } .footer-box { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.74rem 0rem; color: #fff; } .footer-box p { font-size: 0.16rem; padding: 4px; opacity: 0.6; } .footer-box-title { font-size: 0.18rem; } .footer-box-ul { /* margin-bottom:.35rem; */ display: flex; justify-content: space-between; align-items: flex-start; flex: 1; padding-left: 1.5rem; } .footer-bottom { color: #fff; opacity: 0.7; font-size: 0.14rem; padding: 0rem 0rem 1.07rem 0rem; } .footer-copy { display: flex; justify-content: space-between; align-items: center; } .footer-bottom-box { padding-top: 0.36rem; border-top: 1px solid #ffffff5e; } .wechat { width: 34px; display: block; cursor: pointer; } .swiper-slide-first { } .nav-language-mobile { display: none; } .menu-button { display: none; margin-left: 20px; } .nav-mobile { display: flex; align-items: center; justify-content: flex-start; } .mask-mobile-area { display: none; } .footer-box-gzh { position: relative; } .gongzhonghao { width: 100%; height: 1px; } .gongzhonghao-img { width: 160%; position: absolute; bottom: -1.17rem; left: -52%; display: none; } /* 内页banner图 开始 */ .theme { width: 100%; padding-bottom: 40%; position: relative; } .theme-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; } .theme-title { width: 100%; height: 100%; position: absolute; top: 0; } .theme-title-box { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; height: 100%; } .theme-content { height: 100%; } .theme-title-zh { font-size: 0.64rem; color: #fff; } .theme-title-en { font-size: 0.32rem; color: #fff; text-transform: uppercase; padding-top: 10px; } @media screen and (max-width: 1710px) { .bannerSwiper .swiper-slide { /* padding-bottom: 54.3%!important; */ padding-bottom: 100vh !important; position: relative; } } @media screen and (max-width: 1536px) { .bannerSwiper .swiper-slide { /* padding-bottom: 55.3% !important; */ padding-bottom: 100vh !important; position: relative; } } /* 内页banner图 结束*/ @media screen and (max-width: 1480px) { .bannerSwiper .swiper-slide { /* padding-bottom: 61.3% !important; */ padding-bottom: 100vh !important; position: relative; } } @media screen and (max-width: 1400px) { .area { padding-left: 0.2rem; padding-right: 0.2rem; width: 100%; } .banner-swiper-pagination { left: 0.2rem !important; } } @media screen and (max-width: 767px) { .nav-area { padding-top: 0.2rem; padding-bottom: 0.3rem; } .nav-list { display: none; } .nav-language-mobile { display: block; } .menu-button { display: block; } .mask-mobile { position: absolute; top: 0; width: 100%; height: 100vh; background: #000000de; display: none; } /* 遮罩层 */ .mask-mobile-area { display: flex; justify-content: space-between; position: relative; padding-top: 100px; } .mask-left { width: 50%; border-right: 1px solid #fff; position: relative; } .mask-right { width: 50%; } .menu-title-zh { font-size: 22px; font-weight: 700; color: #fff; } .menu-title-en { font-size: 12px; padding-top: 10px; color: #ffffff9e; text-transform: uppercase; } .mask-left-li { margin-bottom: 20px; padding-left: 20px; } .menu-second { width: 100%; position: absolute; left: 118%; top: 0px; display: none; font-size: 16px; color: #fff; grid-template-columns: repeat(1, minmax(0, 1fr)); } .menu-second p { padding-bottom: 20px; } .md118-menu-button { width: 40px; height: 40px; flex-direction: column; gap: 5px 0; position: relative; display: flex; align-items: center; justify-content: center; border: 0; z-index: 9; } .md118-menu-button span { display: block; width: 30px; height: 2px; background: #ffffff; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: all 0.4s; transition: all 0.4s; } .nav-language { font-size: 14px !important; } .slide-box-text { font-size: 20px; line-height: 28px; } .swiper-slide:nth-child(1) .slide-box { /* padding-bottom: 30px; */ } .slide-box-text-en { font-size: 14px; line-height: 16px; } .slide-box-space { padding-top: 0px; } .bannerSwiper .swiper-slide { padding-bottom: 70.3% !important; margin-top: 50px; } .nav-logo { width: 192px; } .banner-swiper-pagination { bottom: 32% !important; } .area { padding-left: 0.4rem; padding-right: 0.4rem; width: 100%; } .banner-swiper-pagination { left: 0.4rem !important; } .product-bg-img-bottom { width: 178%; } .product-bg-img-top { width: 86%; margin-bottom: 2.6rem; } .product .ring { width: 35%; height: 35%; top: 47.333%; left: 32.33%; z-index: 0; } .product-ring-cover { width: 80%; height: 100%; border-radius: 50%; position: absolute; top: 28%; left: 9%; background: #f4f8ff; } .product-box { font-size: 11px; } .product-03 img { margin-bottom: 0px; } .partners-en { font-size: 12px; padding-top: 0px; } .about-us-right { position: relative; width: 100%; top: 0rem; } .about-us-text-content { width: 100%; } .about-us-text { font-size: 14px; line-height: 24px; padding-top: 20px; } .partners-title { padding-bottom: 0.8rem; } .about-us-list { display: flex; justify-content: space-around; align-items: center; margin-top: 0.7rem; } .about-us-list-num { font-size: 50px; margin-top: 12px; } .about-us-btn { width: 120px; height: 35px; padding: 4px; border-radius: 30px; margin-left: 30%; } .about-us-btn-add { width: 27px; height: 27px; border-radius: 50%; background: #1b54a4; display: flex; justify-content: center; align-items: center; margin-right: 0.15rem; } .btn-add { width: 13px; height: 13px; } .about-us-btn-more { font-size: 12px; color: #1b54a4; padding-right: 0.05rem; } .about-us-arrow { width: 15px; height: 5px; margin-top: 0.05rem; } .product-text-content { font-size: 12px; max-width: 100%; padding-top: 0.4rem; margin-bottom: 0.1rem; } .product-more { width: 80px; height: 22px; line-height: 22px; border-radius: 20px; background: #fff; color: #1b54a4; text-align: center; font-size: 11px; margin-bottom: 7px; } .product-text-title { font-size: 16px; padding-top: 20px; padding-bottom: 25px; } .partners-content { font-size: 14px; } .swiper-slide-start { width: 8px; height: 8px; background: url("/uploads/star-04.png") no-repeat; position: absolute; background-size: 100% 100%; animation: flash 2s alternate infinite; } .news-contrl-arrow-left { width: 6px; height: 12px; margin-top: 2px; } .news .swiper-pagination-bullet { width: 20px; height: 20px; margin: 0 0.1rem !important; } .news-contrl-arrow-right { width: 6px; height: 12px; margin-left: 0.1rem; margin-top: 2px; } .news-contrl-btn { width: 250px; height: 40px; right: 0.4rem; border-radius: 40px; } .news-btn-contrl { font-size: 12px; } .news-contrl-btn-bg { border-radius: 40px; } .news-swiper-pagination { font-size: 16px !important; } .news-contrl-box { margin-bottom: 10px; } .footer-logo { width: 100px; display: block; padding-bottom: 10px; } .footer-title { font-size: 14px; } .footer-box p { font-size: 12px; } .footer-box-title { font-size: 13px !important; opacity: 1 !important; } .footer-box { justify-content: space-between; color: #fff; flex-direction: column; align-items: flex-start; } .footer-box-ul { padding-left: 0rem; align-items: flex-start; padding-top: 30px; width: 100%; } .footer-bottom-box { font-size: 12px; } .footer-bottom { font-size: 12px; } .footer-copy { display: flex; flex-direction: column; align-items: flex-start; } .product-box img { margin-bottom: 0; } .product-text-title { display: none; } .swiper-pagination-progressbar.swiper-pagination-horizontal { height: 2px !important; } .theme { padding-bottom: 70%; } .wechat { width: 28px; display: block; cursor: pointer; } .area-position { padding-bottom: 2.5rem; /* padding-bottom: 1rem; */ /* padding-top: 1rem; */ } .gongzhonghao-img { width: 160%; position: absolute; bottom: -105px; left: -52%; display: none; } }