@charset "utf-8"; /*头部*/ body{ max-width: 1920px; margin: 0 auto; } .header .box { width: 100% ; margin: 0 auto; height: 68px; font-size: 14px; position: fixed; z-index: 999; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); top: 0; left: 0; right: 0; } .header .logoTxt { position: relative; width: 304px; } .header .logoTxt:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 280px; height: 68px; background: linear-gradient(90deg, #20308A 0%, #62B4E0 100%); } .header .group{ display: none; } .header .logoTxt:before { content: ""; position: absolute; top: 0; right: -13px; ; width: 100px; ; height: 68px; ; background: #62B4E0; transform: skewX(-30deg); border-bottom-right-radius: 10px; ; } .header .logoTxt span { color: #fff; position: absolute; top: 15px; ; left: 120px; ; z-index: 1; } .header .menu { float: right; margin-right: 120px; } .header .menu li { float: left; margin-left: 76px; height: 68px; line-height: 68px; position: relative; } .header .menu li a { font-size: 14px; ; color: rgba(29, 29, 31, 0.6); } .header .menu li i { margin-right: 15px; ; display: inline-block; width: 25px; ; height: 25px; ; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 100%; opacity: .7 } .header .menu li.on a, .header .menu li:hover a { background: linear-gradient(90deg, #20308A 0%, #62B4E0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .header .menu li.on::after { content: ""; display: inline-block; width: 100%; height: 2px; background: linear-gradient(90deg, #20308A 0%, #62B4E0 100%); position: relative; top: -39px; } .header .menu li::after{ content: ""; display: inline-block; width: 100%; height: 2px; background: transparent; position: relative; top: -39px; } .header .menu li.on i { opacity: 1 } .banner img { width: 100%; } /* .container { width: 100%; display: flex; flex-direction: column; } .carousel { position: relative; width: 100%; text-align: center; height: 804px; } .carousel-inner { position: relative; width: 100%; } */ .carousel-item { /* position: absolute; top: 0; left: 50%; width: 100%; height: 804px; transform: translateX(-50%); z-index: 1; background: linear-gradient(90deg, #D5E1ED 0%, #80ADCF 87%); */ /* 初始状态：裁剪到右下角一个点 */ /* clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%); */ /* transition: clip-path 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); */ /* transition: clip-path 1.2s linear; */ } /* .carousel-item:nth-of-type(2) { background: linear-gradient(89deg, #D5DDE0 0%, #A09986 100%); } .carousel-item:nth-of-type(3) { background: linear-gradient(90deg, #91B8DC 0%, #32506A 100%); } .carousel-item img { object-fit: cover; } .carousel-item.prev-active { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); z-index: 2; } .carousel-item.active { clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%); z-index: 3; animation: reveal 1s linear forwards; } @keyframes reveal { 0% { clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%); } 100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } } .carousel-img { width: 1920px; height: 804px; } .carousel-controls { display: flex; justify-content: center; gap: 25px; margin-top: 30px; z-index: 30; display: none; } .control-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.12); } .indicators { display: flex; } .indicator { width: calc(100vw / 3); height: 4px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.5s ease; } .indicator.active { background: #257DFF; width: calc(100vw / 3) } */ /* .control-btn { width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); display: blur(10px); display: flex; justify-content: center; align-items: center; cursor: pointer; color: white; font-size: 1.4px; transition: all 0.3s ease; border: 2px solid rgba(255, 255, 255, 0.3); } */ .Products { display: none; } @media(min-width: 1920px) { html{ font-size: calc(100vw / 1920) } .header .box{ width: 1920px !important; margin: 0 auto; } .carousel-img { width: 1920px !important; height: 804px; margin: 0 auto; } .slick-dots { width: 1920px !important; margin: 0 auto; } .slick-dots li { width: calc(1920 / 3); height: 4px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.5s ease; } .carousel-item:nth-of-type(1) { background: linear-gradient(90deg, #D5E1ED 0%, #80ADCF 87%); } .carousel-item:nth-of-type(2) { background: linear-gradient(89deg, #D5DDE0 0%, #A09986 100%); } .carousel-item:nth-of-type(3) { background: linear-gradient(90deg, #32506A 0%, #91B8DC 100%); } footer .box{ width: 1920px; } footer .box>img{ width: 99%; } } .carousel-inner { position: relative; width: 100%; } .carousel-item img { object-fit: cover; object-position: center; } .carousel-img { width: 100%; height: 804px; /* image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; */ } .container .slick-arrow{ display: none !important; } .slick-dots{ display: flex; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 4px; margin: 0 auto; } .slick-dots li{ width: calc((100vw - 15px) / 3); height: 4px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.5s ease; } .slick-dots li.slick-active{ background: #257DFF; } .slick-dots li button{ display: none !important; } .indicator.active { background: #257DFF; width: calc(100vw / 3) } .index01{ padding: 78px 0 58px; } .weap .t1{ font-size: 32px; color: #1D1D1F; margin-bottom: 8px; line-height: 48px; /* font-family: 'AliPuHuiTi Bold'; */ font-family: 'AliPuHuiTi Regular'; font-weight: 900; } .weap .t2{ font-weight: 400; font-size: 40px; color: #6E6E73; margin-bottom: 50px; line-height: 48px; } .index01 ul{ gap: 24px; } .index01 ul li{ width: 588px; height: 420px; border-radius: 16px; overflow: hidden; position: relative; } .index01 ul li .txt{ position: absolute; width: 100%; height: 88px; left: 0; bottom: 0; color: #fff; padding: 0 32px; } .index01 ul li .txt h3 { font-weight: bold; font-size: 20px; } .index01 ul li .txt .eng { font-size: 16px; } .index01 ul li .txt .btn { cursor: pointer; height: 44px; line-height: 48px; border-radius: 44px; font-size: 16px; font-weight: normal; padding: 0 24px; /* border: 1px solid #62B4E0; */ background: linear-gradient(90deg, #20308A 0%, #62B4E0 100%); } .index01 ul li .txt .btn:hover{ /* border: 1px solid #fff; */ box-shadow: 0px 0px 10px 1px rgba(255,255,255, 1); } .index01 ul li .txt .btn i { display: inline-block; width: 16px; height: 16px; background: url(../img/right.webp) no-repeat center; background-image: image-set(url('../img/right.webp') 1x, url('../img/right@2x.webp') 2x); background-size: 100%; margin-left: 8px; position: relative; top: 1px; } .index01 ul li .txt .btn span { position: relative; top: -2px; } .index01 ul li:hover img{ transform: scale(1.1); transition: all 0.5s ease; } .index01 ul li img { /* width: 100%; height: 100%; */ width: 588px; height: 420px; object-fit: cover; transition: all 0.5s ease; } .index02{ background: #F5F5F7; padding: 78px 0 58px; } .index02 .nav{ font-weight: bold; font-size: 16px; color: #1D1D1F; line-height: 24px; text-align: center; border-bottom: 1px solid #ccc; } .index02 .nav li{ cursor: pointer; } .index02 .nav li div:first-child{ margin-bottom: 8px; } .index02 .nav li.active{ padding-bottom: 24px; border-bottom: 5px solid; border-image: linear-gradient(90deg, #21318A 0%, #63B4E0 100%) 1; } .index02 .nav .eng{ font-weight: 400; font-size: 12px; color: #6E6E73; line-height: 20px; } .index02 .nav .active div:first-child,.index02 .nav li:hover div:first-child{ background: linear-gradient(90deg, #21318A 0%, #63B4E0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .index02 .Products{ padding: 32px 0; display: flex; flex-wrap: wrap; gap: 24px; position: relative; } #Productsbox { height: 552px; } #Productsbox .Products { position: absolute; width: 1200px; background-color: #F5F5F7; } #Productsbox .active { z-index: 100; } .index02 .Products .slick-prev{ position: absolute; /* left: 10px; */ left: 12px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: url(../img/lunboL.webp) no-repeat center; background-image: image-set(url('../img/lunboL.webp') 1x, url('../img/lunboL@2x.webp') 2x); border-radius: 50%; z-index: 10; border: 2px solid transparent; box-shadow: 0 0 10px 2px rgba(50, 50, 50, 0.1); cursor: pointer; } .index02 .Products .slick-prev:hover{ background: url(../img/lunboLH.webp) no-repeat center; background-image: image-set(url('../img/lunboLH.webp') 1x, url('../img/lunboLH@2x.webp') 2x); border-color: #21318B; } .index02 .Products .slick-next:hover{ background: url(../img/lunboRH.webp) no-repeat center; background-image: image-set(url('../img/lunboRH.webp') 1x, url('../img/lunboRH@2x.webp') 2x); border-color: #21318B } .index02 .Products .slick-next{ border: 2px solid transparent; box-shadow: 0 0 10px 2px rgba(50, 50, 50, 0.1); cursor: pointer; position: absolute; /* right: 10px; */ right: 12px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: url(../img/lunboR.webp) no-repeat center; background-image: image-set(url('../img/lunboR.webp') 1x, url('../img/lunboR@2x.webp') 2x); } .flexbox{ display: flex !important; gap: 24px; } .index02 .Products .box{ box-sizing: border-box; padding: 32px 10px 24px; border-radius: 16px; background: #fff; text-align: center; width: 282px; height: 270px; gap: 24px; margin:0 10px; border: 2px solid transparent; position: relative; cursor: pointer; } .index02 .Products .box:hover{ border-color: rgba(99, 180, 224, 1); /* clip-path: inset(0 round 16px); border-image: linear-gradient(180deg, rgba(33, 49, 139, 1), rgba(99, 180, 224, 1)) 1; */ } .index02 .Products .box img{ margin: 0 auto; margin-bottom: 24px; width: 168px; height: 112px; } .index02 .Products .box div:nth-child(2){ font-size: 16px; color: #1D1D1F; line-height: 24px; margin-bottom: 4px; } .index02 .Products .box div:nth-child(3){ font-size: 12px; color: #B1B1B1; line-height: 20px; margin-bottom: 8px; } .index02 .Products .box div:nth-child(4){ font-size: 12px; color: #95C037; line-height: 20px; } .index02 .Products .box div:nth-child(4) i{ display: inline-block; width: 12px; height: 12px; background: url(../img/rightgreen.webp) no-repeat center; background-image: image-set(url('../img/rightgreen.webp') 1x, url('../img/rightgreen@2x.webp') 2x); background-size: 100%; margin-left: 4px; vertical-align: middle; position: relative; top: -1px; } .video video{ width: 100%; height: 100%; object-fit: cover; } .video video:hover{ cursor: pointer; } video::-webkit-media-controls-fullscreen-button { display: none; } video::-webkit-media-controls-toggle-closed-captions-button { display: none; } .index03{ padding-top: 78px; } .index03 .video>div{ position: relative; } .index03 .video div{ width: 894px; height: 506px; overflow: hidden; border-radius: 16px; } .index03 .video aside{ display: flex; flex-direction: column; justify-content: space-between; } .index03 .video>div .pause { z-index: -1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background:url(../img/pause.webp) no-repeat center; cursor: pointer; } .index03 .video aside div{ width: 282px; height: 154px; border-radius: 14px; overflow: hidden; border: 2px solid transparent; cursor: pointer; } .index03 .video aside div.active{ border: 2px solid #21318B; box-shadow: 0px 4px 12px 0px rgba(49, 124, 254, 0.15); } .index03 .video aside>div{ position: relative; } .index03 .video aside>div .pause{ z-index: -1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background:url(../img/pause.webp) no-repeat center; cursor: pointer; } .index03 .video aside>div:hover{ border: 2px solid #21318B; box-shadow: 0px 4px 12px 0px rgba(49, 124, 254, 0.15); } .index03 .product{ padding-top: 78px; } .index03 .product .item{ gap: 24px; } .index03 .product .item>div{ width: 588px; height: 488px; background: #F5F5F7; overflow: hidden; border-radius: 16px; padding: 68px 0; text-align: center; position: relative; } .index03 .product .item .hid{ cursor: pointer; justify-content: center; display: flex; flex-wrap: wrap; align-items: center; padding: 0 16px; position: absolute; width: 588px; height: 488px; bottom: -488px; background: url(../img/3-1-h.webp) no-repeat center; background-image: image-set(url('../img/3-1-h.webp') 1x, url('../img/3-1-h@2x.webp') 2x); background-size: 100%; } .index03 .product .item .hid2{ background: url(../img/3-2-h.webp) no-repeat center; background-image: image-set(url('../img/3-2-h.webp') 1x, url('../img/3-2-h@2x.webp') 2x); background-size: 100%; } .index03 .product .item .hid3{ background: url(../img/3-3-h.webp) no-repeat center; background-image: image-set(url('../img/3-3-h.webp') 1x, url('../img/3-3-h@2x.webp') 2x); background-size: 100%; } .index03 .product .item .hid4{ background: url(../img/3-4-h.webp) no-repeat center; background-image: image-set(url('../img/3-4-h.webp') 1x, url('../img/3-4-h@2x.webp') 2x); background-size: 100%; } .index03 .product .item .hid5{ background: url(../img/3-5-h.webp) no-repeat center; background-image: image-set(url('../img/3-5-h.webp') 1x, url('../img/3-5-h@2x.webp') 2x); background-size: 100%; } .index03 .product .item .hid6{ background: url(../img/3-6-h.webp) no-repeat center; background-image: image-set(url('../img/3-6-h.webp') 1x, url('../img/3-6-h@2x.webp') 2x); background-size: 100%; } .index03 .product .item .hid .box{ gap: 20px; } .index03 .product .item .hid .box div{ width: 172px; height: 68px; border-radius: 8px; border: 1px solid #FFFFFF; padding: 15px 9px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-direction: column; } .index03 .product .item .hid p{ font-weight: bold; font-size: 14px; color: #FFFFFF; /* line-height: 22px; */ text-align: center; } .index03 .product .item .hid p.eng { font-weight: 400; font-size: 12px; } .index03 .product .item img{ width: 148px; height: 148px; } .index03 .item div .txt h3 { /* font-family: 'AliPuHuiTi medium'; */ font-family: 'AliPuHuiTi Regular'; font-weight: 600; font-size: 24px; line-height: 32px; margin-top: 32px; font-weight: 100; } .index03 .item div .txt .eng { font-size: 16px; color: #6E6E73; line-height: 24px; margin-bottom: 64px; margin-top: 8px; } .index03 .item div .txt .btn { width: 130px; margin: 0 auto; color: #fff; height: 44px; line-height: 44px; border-radius: 44px; font-size: 16px; font-weight: normal; background: linear-gradient(90deg, #20308A 0%, #62B4E0 100%); } .index03 .item div .txt .btn i { display: inline-block; width: 16px; height: 16px; background: url(../img/up.webp) no-repeat center; background-image: image-set(url('../img/up.webp') 1x, url('../img/up@2x.webp') 2x); background-size: 100%; margin-left: 8px; vertical-align: middle; position: relative; top: -1px; } .index04{ padding-top: 78px; } .index04 .about{ position: relative; height: 572px; margin-top: 60px; font-size: 18px; color: #FFFFFF; line-height: 26px; } .index04 .about .zh{ width: 816px; padding-top: 75px; margin-bottom: 24px; } .index04 .about .eng{ font-size: 16px; color: rgba(255, 255, 255, 0.8); line-height: 26px; } .index04 .about::after{ content: ""; z-index: -1; position: absolute; top: 40px; height: 300px; width: 100%; transform: skewY(7deg); background: linear-gradient(90deg, #20308A 0%, #62B4E0 100%); } .index04 .about::before{ content: ""; z-index: -1; position: absolute; bottom: 40px; width: 100%; height: 356px; background: linear-gradient(90deg, #20308A 0%, #62B4E0 100%); } .index04 .about img{ position:absolute; top: -120px; right: 0; width: 380px; } .index04 .wow{ margin-bottom: 78px; } .index04 .wow img{ margin-right: 24px; box-sizing: border-box; width: 100px; } .index04 .wow .txt{ width: 430px; font-size: 18px; color: #1D1D1F; line-height: 26px; } .index04 .wow .txt p:first-child{ padding: 10px 0; } .index04 .wow ul{ gap: 88px; } footer{ background: #000E2C; } footer .box{ position: relative; width: 100%; margin: 0 auto; height: 744px; background: url(../img/footer.webp) no-repeat center; background-image:image-set(url('../img/footer.webp') 1x,url('../img/footer@2x.webp') 2x); } footer .box>img{ width: 100%; } footer .Contact img { width: 100px; } footer .Contact{ height: 280px; width: 250px; padding-top: 240px; margin-left: 60px; text-align: center; } footer .Contact h1{ font-weight: 400; margin-top: 48px; font-size: 32px; color: #F5F5F7; line-height: 40px; } footer .Contact h5{ margin-top: 12px; font-weight: 400; font-size: 18px; color: #F5F5F7; line-height: 26px; } footer .Contact h6{ margin-top: 40px; font-weight: 400; font-size: 14px; color: #F5F5F7; line-height: 22px; padding: 8px 25px; box-sizing: border-box; background: url(../img/mailbg.webp); background-image: image-set(url('../img/mailbg.webp') 1x, url('../img/mailbg@2x.webp') 2x); } footer p.CopyrightPC{ position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(255, 255, 255, 0.6); line-height: 20px; bottom: 24px; width: 100%; text-align: center; } .CopyrightPC{ display: block; } .CopyrightMobile { display: none; } @media screen and (min-width: 1200px) and (max-width: 1900px) { .carousel-img { width: 100%; height: 713px; } } @media(max-width:1200px) { .header .logoTxt:after { width: 160px; height: 68rem; } .header .logoTxt:before { right: 120px; width: 75px; height: 68rem; } .header .box { height: 68rem; font-size: 14rem; } .header .logo { width: 304rem; } .header .logoTxt span{ left: 80px; top: 15rem; } .header .menu { margin-right: 60rem; } .header .menu li { margin-left: 24rem; height: 68rem; line-height: 68rem; } .header .menu li a { font-size: 14rem; } .header .menu li i { margin-right: 15rem; width: 25rem; height: 25rem; } .header .menu li.on::after { height: 2rem; top: -39rem; ; } .carousel { height: 804rem; } .carousel-item { height: 804rem; } .carousel-img { width: 100%; height: 804rem; } html { font-size: calc(100vw / 1250); } .weap { width: 95%; } .index01 { padding: 78rem 0 58rem; } .weap .t1 { font-size: 32px; margin-bottom: 8rem; line-height: 48rem; } .weap .t2 { font-size: 40rem; margin-bottom: 50rem; line-height: 48rem; } .index01 ul { gap: 24rem; } .index01 ul li { width: 588rem; height: 420rem; border-radius: 16rem; } .index01 ul li .txt { height: 88rem; padding: 0 32rem; } .index01 ul li .txt h3 { font-size: 20rem; } .index01 ul li .txt .eng { font-size: 16rem; } .index01 ul li .txt .btn { height: 44rem; line-height: 48rem; border-radius: 44rem; font-size: 16rem; padding: 0 24rem; } .index01 ul li .txt .btn i { width: 16rem; height: 16rem; margin-left: 8rem; } .index01 ul li .txt .btn span { top: -2rem; } .index01 ul li { width: 48%; } .index02 { padding: 78rem 0 58rem; } .index02 .nav { font-size: 16rem; line-height: 24rem; } .index02 .nav li.active { padding-bottom: 24rem; border-bottom: 5rem solid; } .index02 .nav .eng { font-size: 12px; line-height: 20rem; } .index02 .Products { padding: 32rem 0; gap: 24rem; } #Productsbox { height: 552rem; } #Productsbox .Products { width: 1200rem; } .index02 .Products .box { padding: 32rem 10rem 24rem; border-radius: 16rem; width: 282rem; height: auto; gap: 24rem; border: 2rem solid transparent; } .index02 .Products .box img { margin: 0 auto; width: 168rem; height: 112rem; margin-bottom: 24rem; } .index02 .Products .box div:nth-child(2) { font-size: 16rem; line-height: 24rem; margin-bottom: 4rem; } .index02 .Products .box div:nth-child(3) { font-size: 12px; line-height: 20rem; margin-bottom: 8rem; } .index02 .Products .box div:nth-child(4) { font-size: 12px; line-height: 20rem; } .index02 .Products .box div:nth-child(4) i { width: 12rem; height: 12rem; margin-left: 4rem; } .index02 .Products .box{ width: 31.9%; } .index02 .Products .box img{ width: 80%; } .index03 { padding-top: 78rem; } .index03 .video div { width: 894rem; height: 506rem; border-radius: 16rem; } .index03 .video aside div { width: 278rem; height: 154rem; border-radius: 14rem; border: 2rem solid transparent; } .index03 .video aside div:hover { box-shadow: 1px 1px 10rem rgba(99, 180, 224, 1); } .index03 .product { padding-top: 78rem; } .index03 .product .item { gap: 24rem; } .index03 .product .item>div { width: 588rem; height: 488rem; border-radius: 16rem; padding: 68rem 0; } .index03 .product .item .hid { padding: 0 16rem; width: 588rem; height: 488rem; bottom: -488rem; } .index03 .product .item .hid .box { gap: 20rem; } .index03 .product .item .hid .box div { width: 167rem; height: 68rem; border-radius: 8rem; padding: 15rem 9rem; } .index03 .product .item .hid p { font-size: 14rem; /* line-height: 22rem; */ } .index03 .product .item .hid p.eng { font-size: 12rem; overflow-wrap: break-word; } .index03 .product .item img { width: 148rem; height: 148rem; } .index03 .item div .txt h3 { font-size: 24rem; line-height: 32rem; margin-top: 32rem; } .index03 .item div .txt .eng { font-size: 16rem; line-height: 24rem; margin-bottom: 64rem; margin-top: 8rem; } .index03 .item div .txt .btn { width: 130rem; height: 44rem; line-height: 44rem; border-radius: 44rem; font-size: 16rem; } .index03 .item div .txt .btn i { width: 16rem; height: 16rem; margin-left: 8rem; } .index03 .product .item>div{ width: 48.9%; /* height: auto; */ padding: 68rem 0; } .index03 .item div .txt h3{ margin-top: 15rem; } .index03 .item div .txt .eng{ margin-bottom: 30rem; margin-top: 5rem; } .index03 .video div{ width: 875rem; } .index04 { padding-top: 78rem; } .index04 .about { height: 572rem; margin-top: 60rem; font-size: 18rem; line-height: 26rem; } .index04 .about .zh { width: 816rem; padding-top: 75rem; margin-bottom: 24rem; } .index04 .about .eng { font-size: 16rem; color: rgba(255, 255, 255, 0.8); line-height: 26rem; } .index04 .about::after { top: 40rem; height: 250rem; } .index04 .about::before { bottom: 40rem; height: 356rem; border-bottom-right-radius: 10rem; } .index04 .about img { top: -120rem; width: 394rem; } .index04 .wow { margin-bottom: 78rem; } .index04 .wow img { margin-right: 24px; width: 100rem; } .index04 .wow .txt { width: 430rem; font-size: 18rem; line-height: 26rem; } .index04 .wow .txt p:first-child { padding: 10rem 0; } .index04 .wow ul { gap: 88rem; } .index04 .about .zh{ width: 810rem; } .index04 .about img { position: absolute; top: -95rem; right: 25rem; width: 350rem; } .index04 .wow ul li{ width: 46.1%; } footer .Contact img { width: 100rem; } footer .weap{ width: 100%; } footer .Contact { height: 280rem; width: 262rem; padding-top: 255rem; margin-left: 70rem; } footer .box{ height: 744rem; background-size: cover; } footer .Contact h6 { background-size: cover; } footer .Contact h1 { margin-top: 48rem; font-size: 32rem; line-height: 40rem; } footer .Contact h5 { margin-top: 12rem; font-size: 18rem; line-height: 26rem; } footer .Contact h6 { margin-top: 40rem; font-size: 14rem; line-height: 22rem; padding: 8rem 25rem; } footer p { font-size: 12rem; line-height: 20rem; bottom: 24rem; } footer .Contact{ top: 165rem; left: 140rem; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .index02 .Products .box img{ height: auto; } } @media(max-width:768px){ html, body, h1, h2, h3, h4, h5, h6, hr, p, iframe, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td, fieldset { letter-spacing: 0; } html{ font-size: calc(100vw / 390); } .weap{ width:358rem; } .header .logoTxt:after { width: 60px; height: 44px; } .header .logoTxt span { left: 16px; top: 8px; font-size: 10px; } .header .group { display: block; position: absolute; top: 6px; right: 11px; width: 32px; line-height: 32px; height: 32px; text-align: center; background: rgba(255, 255, 255, 0.6); border-radius: 0px 0px 0px 0px; border-radius: 50%; } .header .group ul{ display: none; position: absolute; right: 0; top: 42rem; width: 148rem; font-weight: 400; border-radius: 4rem; color: rgba(29, 29, 31, 0.6); background: #fff; padding: 0 16rem; } .header .group ul::before{ content: ""; display: block; position: absolute; top:-8rem; right:8rem; width: 16rem; height: 8rem; background: url(../img/topM.webp) no-repeat center; background-image: image-set(url('../img/topM.webp') 1x, url('../img/topM@2x.webp') 2x); } .header .group ul li{ padding: 12rem 0; border-bottom: 1px solid #F3F3F4;; } .header .group ul li.active{ background: linear-gradient(359.99999599005923deg, #20308A 0%, #62B4E0 100%);; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .header .group ul li a{ font-size: 12rem; } .header .logoTxt:before { right: 220px; width: 86px; height: 44px; } .header .box { height: 44px; /* font-family: 'AliPuHuiTi medium'; */ font-family: 'AliPuHuiTi Regular'; font-weight: 600; } .menu { display: none; } .carousel { height: 588rem; } .carousel-img { width: 100%; height: 588rem; } .carousel-item { height: 588rem; } .carousel-img { width: 100%; height: 588rem; } .index01 { padding: 56rem 0; } .weap .t1 { font-size: 14rem; margin-bottom: 4rem; line-height: 20rem; } .weap .t2 { font-size: 18rem; margin-bottom: 16rem; line-height: 26rem; } .index01 ul { gap: 8rem; } .index01 ul li { width: 175rem; height: 125rem; border-radius: 8rem; } .index01 ul li img{ width: 100%; height: 100%; } .index01 ul li .txt { position: absolute; z-index: 1; height: 40rem; padding: 0 13rem; /* background: url(../img/btnBG.webp) no-repeat center; background-image: image-set(url('../img/btnBG.webp') 1x, url('../img/btnBG@2x.webp') 2x); background-size: cover; */ } .index01 ul li::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 40rem; background: url(../img/btnBG.webp) no-repeat center; background-size: cover; opacity: 0.7; } .index01 ul li .txt>div:after{ content: ""; display: block; position: absolute; right: 13rem; top: 12rem; border-radius: 50%; width: 16rem; height: 16rem; background-repeat: no-repeat; background-position: center; background-image: image-set(url('../img/mright.webp') 1x, url('../img/mright@2x.webp') 2x), linear-gradient(90deg, #20308A 0%, #62B4E0 100%); } .index01 ul li .txt h3 { font-size: 12rem; /* font-family: 'AliPuHuiTi Bold'; */ font-family: 'AliPuHuiTi Regular'; font-weight: 900; } .index01 ul li .txt .eng { font-size: 10rem; } .index01 ul li .txt .btn { display: none; } .index02 { padding: 32rem 0; } .index02 .nav{ flex-wrap: nowrap; gap: 32rem; overflow: auto; -webkit-overflow-scrolling: touch; /* clip-path: inset(0 0 6rem); position: relative; */ } .index02 .nav>div{ position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; /* background-color: #ccc; */ } .index02 .nav li { cursor: pointer; text-wrap: nowrap; } .index02 .nav li div:first-child { margin-bottom: 0; font-size: 14rem; } .index02 .nav li.active { padding-bottom: 16rem; border-bottom: 2px solid; } .index02 .nav .eng { font-size: 10rem; } #Productsbox .Products { width: 358rem; padding-bottom: 32rem; } .index02 .Products .box { box-sizing: border-box; background: #fff; text-align: center; /* margin:0 10px; */ border: 2px solid transparent; position: relative; cursor: pointer; } .index02 .Products .box img { margin: 0 auto; margin-bottom: 12rem; width: 101rem; height: 67rem; } .index02 .Products .slick-prev, .index02 .Products .slick-next { display: none !important; } .index02 .Products .box div:nth-child(2) { font-size: 12rem; margin-bottom: 7rem; line-height: 1; } .index02 .Products .box div:nth-child(3) { font-size: 10rem; margin-bottom: 8rem; line-height: 1; } .index02 .Products .box div:nth-child(4) { font-size: 10px; line-height: 20rem; } .index02 .Products { position: absolute; display: flex; width: 358rem; padding: 17rem 0; gap: 8rem; display: flex; flex-wrap: nowrap; background-color:#F5F5F7 ; gap: 8px; /* position: relative; */ } .index02 .Products .box div:nth-child(4) i { width: 12rem; height: 12rem; margin-left: 4rem; } .index02 .Products .box { padding:12rem 0; width: 168rem; height: 162rem; border-radius: 9rem; margin-right: 8rem; } .index02 .Products .box img { width: 101rem; } #Productsbox{ height: 321rem; } .index03 { padding-top: 56rem; } .index03 .video{ flex-direction: column; } .index03 .video div { width: 358rem; height: 202rem; } .index03 .video aside{ flex-direction: row; margin-top: 8rem; } .index03 .video aside div { width: 114rem; height: 64rem; border-radius: 8rem; border: 2rem solid transparent; } .index03 .product { padding-top: 56rem; } #index02 .t1{ width: 236rem; } .index03 .product .item>div { width: 175rem; height: 146rem; border-radius: 8rem; padding: 14rem 0; } .index03 .product .item .hid { padding: 8rem; width: 175rem; height: 146rem; bottom: -146rem; overflow-y: auto; } .index03 .product .item .hid .box { gap: 8rem; } .index03 .product .item .hid .box div { width: 159rem; height: 40rem; border-radius: 4rem; padding: 6rem 3rem; } .index03 .product .item .hid p { font-size: 10rem; /* line-height: 22rem; */ } .index03 .product .item .hid p.eng { font-size: 12rem; overflow-wrap: break-word; } .index03 .product .item img { width: 48rem; height: 48rem; } .index03 .item div .txt h3 { line-height: 1; margin-top: 8rem; font-weight: bold; font-size: 14rem; } .index03 .item div .txt .eng { font-weight: 400; font-size: 10px; line-height: 1; margin-top: 4rem; margin-bottom: 14rem; } .index03 .item div .txt .btn { width: 72rem; height: 16rem; line-height: 16rem; padding: 0 12rem; font-weight: 400; font-size: 10rem; border-radius: 8rem; color: #FFFFFF; } .index03 .item div .txt .btn i { width: 12rem; height: 12rem; margin-left: 4rem; background-image: image-set(url('../img/rightm.webp') 1x, url('../img/rightm@2x.webp') 2x); } .index03 .product .item { gap: 8rem; } .index04 .about { height: 800rem; margin-top: -20rem; font-size: 14rem; line-height: 22rem; margin-bottom: 56rem; } .index04 .about .zh{ width: 358rem; margin-bottom: 16rem; line-height: 22rem; } .index04 .about .eng{ font-size: 12rem; } .index04 .about img { width: 164rem; height: 167rem; top: -60rem; } .index04 .about::before { bottom: 0; height: 356rem; border-bottom-right-radius: 0; } .index04 .about::after { bottom: 0; height: 500rem; border-bottom-right-radius: 0; } .index04 .wow { margin-bottom: 56rem; } .index04 .wow img { width: 48rem; height: 48rem; margin-right: 24px; box-sizing: border-box; } .index04 .wow .txt{ font-weight: 400; font-size: 14rem; line-height: 22rem; } .index04 .wow .txt p:first-child { padding: 4rem 0; } .index04 .wow ul{ gap: 32rem; } .index04 .wow ul li{ width: 100%; } footer .box { position: relative; width: 100%; margin: 0 auto; height:417rem; background: url(../img/footerm.webp) no-repeat center; background-image: image-set(url('../img/footerm.webp') 1x, url('../img/footerm@2x.webp') 2x); } footer .Contact{ position: absolute; top: 145rem; left: 0; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } footer .Contact .logo{ width: 32rem; height: 32rem; } footer .Contact .logo img{ width: 32rem; } footer .Contact img{ width: 32rem; height: 24rem; } footer .Contact h1 { margin-top: 12rem; font-weight: bold; font-size: 12rem; line-height: 1; } footer .Contact h5 { margin-top:2rem; font-size:10rem; line-height: 1; } footer .Contact h6 { width: 162rem; margin: 0 auto; margin-top: 8rem; font-weight: 400; font-size: 10rem; line-height: 1; padding: 3rem 14rem; box-sizing: border-box; background: url(../img/mailbg.webp); background-image: image-set(url('../img/mailbg.webp') 1x, url('../img/mailbg@2x.webp') 2x); background-size: 100%; } footer .CopyrightMobile { position: absolute; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.6); line-height: 1; bottom: 15rem; width: 100%; text-align: center; } .CopyrightPC { display: none; } .CopyrightMobile { display: block; } .CopyrightMobile p{ font-size: 10rem; line-height: 14rem; } }