.index-banner{ width: 100%; height: 8.5rem; position: relative; } .indexBanner-box { /*background: rgba(0, 0, 0, .3);*/ /*padding: 0.5rem 0.7rem;*/ position: absolute; right: 1.83rem; top: 3.52rem; /*right: 0;*/ /*bottom: 0;*/ /*transform: translate(-50%, -50%) !important;*/ color: #fff; text-align: center; } .indexBanner-title { font-size: 0.6rem; font-family: MicrosoftYaHei-Bold, MicrosoftYaHei; font-weight: bold; color: #333333; line-height: 0.6rem; } .indexBanner-p { font-size: 0.4rem; font-family: MicrosoftYaHei-Bold, MicrosoftYaHei; font-weight: bold; color: #333333; line-height: 0.4rem; margin-top: 0.2rem; } .indexBanner{ width: 100%; height: 100%; } .indexBanner .swiper-slide a{ height: 100%; } .indexBanner .swiper-slide img{ width: 100%; height: 100%; /*object-fit: cover;*/ } .indexBanner .swiper-pagination { width: 100%; height: 0.73rem; /*background: rgba(0, 0, 0, .2);*/ bottom: 0 !important; display: flex; align-items: center; justify-content: center; } .indexBanner .swiper-pagination-bullet { border-radius: 0%; width: 0.58rem; height: 0.06rem; background: #fff; opacity: 1; } .indexBanner .swiper-pagination-bullet-active{ background: #014098; } .index-about-wrap video{ width: 100%; /*height: 7.12rem;*/ } .index-about{ margin: 0 auto; height: 2.5rem; position: relative; } .index-about-list{ position: absolute; top: .8rem; left: 0; width: 100%; z-index: 2; display: flex; justify-content: center; border: 1px solid #DBDBDB; background: #fff; } .index-about-item-box{ position: relative; width: 3.2rem; height: 2.2rem; border-right: 1px solid #DBDBDB; } .index-about-item-box:last-of-type{ border-right: 0; } .index-about-item{ width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; flex-direction: column; justify-content: center; color: #014098; transition: all .4s ease; } .indexBanner-boxgap1{ display: flex; align-items: center; } .indexBanner-boxgap1box{ font-size: 0.6rem; font-family: MicrosoftYaHei-Bold, MicrosoftYaHei; font-weight: bold; color: #333333; line-height: 0.6rem; } .indexBanner-boxgap1box:first-child{ margin-right: 0.88rem; } .ndexBanner-boxgap2{ float: right; margin-top: 0.44rem; display: flex; align-items: center; } .ndexBanner-boxgap2-left{ font-size: 0.4rem; font-family: MicrosoftYaHei-Bold, MicrosoftYaHei; font-weight: bold; color: #333333; line-height: 0.4rem; } .ndexBanner-boxgap2-rig{ margin-left: 0.21rem; width: 0.62rem; } .ndexBanner-boxgap2-rig img{ width: 100%; height: 100%; object-fit: cover; } /*.index-about-item:hover{*/ /* width: 110%;*/ /* height: 110%;*/ /* background-color: #014098;*/ /* color: #fff;*/ /*}*/ .index-about-num{ font-size: 0.2rem; font-family: MicrosoftYaHei; } .index-about-num span{ font-size: 0.7rem; font-family: Impact-Regular, Impact; } .index-about-p{ font-size: 0.2rem; color: #000; margin-top: 0.2rem; font-family: 寰蒋闆呴粦; } .index-about-video{ width: 100%; height: 7.12rem; position: relative; } .index-about-video-bg{ width: 100%; height: 100%; object-fit: cover; } .index-about-video-play{ width: 1.02rem; height: 1.02rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer; } /* 浜у搧灞曠ず */ .index-product-wrap{ margin: 0 auto; margin-top: 0.8rem; display: flex; justify-content: center; } .index-product{ flex: 1; position: relative; height: 5.42rem; margin: 0 0.025rem; transition: all .4s ease; } .index-product-img{ width: 100%; height: 100%; object-fit: cover; transition: all .4s ease; } .index-product-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; transition: all .4s ease; } .index-product-left{ display: flex; align-items: center; transition: all .4s ease; } .index-product-text{ font-size: 0.24rem; font-family: MicrosoftYaHei-Bold, MicrosoftYaHei; font-weight: bold; color: #FFFFFF; flex-shrink: 0; transition: all .4s ease; } .index-product-p{ height: 100%; flex: 1; font-size:var(--font18); font-family: MicrosoftYaHei; color: #FFFFFF; border-left: 1px solid #fff; padding-left: 0.18rem; margin-left: 0.18rem; display: none !important; transition: all .4s ease; } .index-product-icon{ width: 0.3rem; height: 0.3rem; display: none; flex-shrink: 0; margin-left: 0.3rem; transition: all .4s ease; } .index-product-icon img{ width: 100%; height: 100%; } .index-product-wrap .active{ flex: 2.5; } .index-product-wrap .active .index-product-box { height: 1rem; padding: 0 0.3rem; bottom: 0; top: auto; } .index-product-wrap .active .index-product-p {display: -webkit-box !important;} .index-product-wrap .active .index-product-icon {display: block;} /* 鎶€鏈爺鍙 */ .index-technology-wrap{ width: 100%; margin-top: 0.8rem; display: flex; } .index-technology-left{ width: 50%; position: relative; height: 6.37rem; } .index-technology-img{ width: 100%; height: 100%; object-fit: cover; } .index-technology-content{ display: flex; justify-content: space-between; align-items: flex-end; } .index-technology-title{ flex-shrink: 0; } .index-technology-cn{ font-size: 0.3rem; font-family: MicrosoftYaHei-Bold, MicrosoftYaHei; font-weight: bold; color: #FFFFFF; } .index-technology-en{ font-size: 0.2rem; font-family: MicrosoftYaHei; color: #FFFFFF; margin-top:0.15rem; } .index-technology-p{ display: none; font-size: 0.18rem; font-family: MicrosoftYaHei; color: #FFFFFF; margin-left: 0.25rem; } .index-technology-bt{ width: 100%; display: flex; /*justify-content: flex-end;*/ margin-top: 0.3rem; opacity: 0; transition: all .4s ease; } .index-technology-bt a{ width: 1.76rem; height: 0.41rem; border-radius: 0.05rem; border: 0.01rem solid #FFFFFF; font-size:var(--font18); font-family: MicrosoftYaHei; color: #FFFFFF; line-height: 0.41rem; text-align: center; cursor: pointer; } .index-technology-left:hover .index-technology-bt{ opacity: 1; } .index-technology:hover .index-technology-bt { opacity: 1; } .index-technology-right{ width: 50%; position: relative; height: 6.37rem; display: flex; flex-direction: column; justify-content: space-between; } .index-technology{ height: 3.17rem; position: relative; } .index-technology-box { width: 100%; padding: 0.6rem 0.6rem; position: absolute; top: 0; } /* 甯傚満棰嗗煙 */ .index-market-wrap{ margin: 0 auto; margin-top: 0.8rem; display: flex; flex-wrap: wrap; justify-content: space-between; } .index-market{ position: relative; width: 7.92rem; height: 4.07rem; } .index-market2{ width: 5.23rem; height: 3.74rem; margin-top: 0.15rem; } .index-market-img{ width: 100%; height: 100%; object-fit: cover; } .index-market-box{ width: 100%; height: 0.54rem; background: rgba(0, 0, 0, 0.5); padding: 0 0.35rem; position: absolute; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; } .index-market-p{ flex: 1; font-size: 0.2rem; font-family: MicrosoftYaHei; color: #E0E0E0; } .index-market-icon{ flex-shrink: 0; width: 0.15rem; height: auto; margin-left: 0.2rem; } /* 鏈€鏂拌祫璁 */ .index-news-wrap{ margin: 0 auto; margin-top: 0.8rem; } .index-news-list{ display: flex; justify-content: space-between; } .index-news-item{ width: 7.82rem; } .index-news-img-box{ width: 100%; height: 4.07rem; overflow: hidden; } .index-news-img{ width: 100%; height: 4.07rem; object-fit: cover; } .index-news-box{ padding: 0.2rem 0; display: flex; align-items: center; justify-content: space-between; position: relative; } .index-news-box::after{ content: ''; width: 0.41rem; height: 1px ; background: #666666; position: absolute; left: 0; bottom: 0; transition: all .4s; } .index-news-left{ flex: 1; } .index-news-time{ font-size: 0.12rem; font-family: MicrosoftYaHei; color: #999999; } .index-news-text { font-size:var(--font18); font-family: MicrosoftYaHei; color: #333333; margin-top: 0.1rem; } .index-news-icon{ flex-shrink: 0; width: 0.28rem; height: 0.28rem; margin-left: 0.2rem; } .index-news-icon img{ width: 100%; height: 100%; } .index-news-icon img { transform: scale(1,1) !important; } .index-news-icon1{ display: block; } .index-news-icon2{ display: none; } .index-news-item:hover .index-news-icon1{ display: none; } .index-news-item:hover .index-news-icon2 { display: block; } .index-news-item:hover .index-news-box::after { width: 100%; background: #014098; } .index-news-more{ width: 1.87rem; height: 0.56rem; background: #FFFFFF; border-radius: 0.08rem; border: 0.01rem solid #014098; margin: 0.8rem auto 1rem auto; font-size:var(--font18); font-family: MicrosoftYaHei; color: #014098; line-height: 0.56rem; text-align: center; transition: all .365s; } .index-news-more:hover{ background: #014098; color: #fff; } /* 鎵€灞炲叕鍙 */ .index-company-wrap { width: 100%; overflow: hidden; background-image: url(../image/index/company-bg.png); background-size: 100% 4.68rem; background-position: top; background-repeat: no-repeat; } .index-company-wrap .index-title{ margin-top: 0.8rem; } .index-company-wrap .index-title-en { color: rgba(255, 255, 255, .37); } .index-company-wrap .index-title-cn { color:#fff; } .index-company-introd { font-size:var(--font18); font-family: MicrosoftYaHei; color: #FFFFFF; margin: 0.4rem 0 0.6rem 0; text-align: center; } .index-company-banner { margin: 0 auto; width: 84%; } .companySwiper{ width: 100%; height: auto; position: relative; } .companySwiper .swiper-slide{ /*border: 1px solid #C8C8C8;*/ } .index-company-img-box{ width: 100%; height: 2.23rem; overflow: hidden; } .index-company-img{ width: 100%; height: 100%; object-fit: cover; } .index-company-box{ border: 1px solid #C8C8C8; padding: 0.08rem 0.2rem; background: #fff; transition: all .365s; color: #333; } .index-company-text{ line-height: 0.18rem; font-size: 0.17rem; font-family: MicrosoftYaHei; } .index-company-en{ font-size: 0.1rem; font-family: MicrosoftYaHei; margin-top: 0.1rem; line-height:0.18rem; /*height: 0.2rem;*/ } .companySwiper .swiper-slide:hover .index-company-box { color: #fff; background: #014098; } .index-company-bt{ display: flex; align-items: center; justify-content: center; margin: 0.56rem 0 1rem 0; } .index-company-left img, .index-company-right img{ width: 0.11rem; height: auto; cursor: pointer; } .index-company-left2, .index-company-right2{ display: none; } .index-company-center{ margin: 0 0.42rem; cursor: pointer; } .index-company-center img{ width: 0.26rem; height: auto; } .index-company-left:hover .index-company-left1{ display: none; } .index-company-left:hover .index-company-left2{ display: block; } .index-company-right:hover .index-company-right1 { display: none; } .index-company-right:hover .index-company-right2 { display: block; } .index-about-video-mobile{display: none;} @media only screen and (max-width: 1024px) { .indexBanner-box{ right: 0.5rem; top: 0.88rem; } .companySwiper .swiper-slide{ padding: 0.01rem; } .index-company-banner{ width: 96% !important; } .indexBanner-boxgap1box{ font-size: 0.3rem; } .ndexBanner-boxgap2-left{ font-size: 0.25rem; } .ndexBanner-boxgap2{ margin-top: 0.24rem; } .indexBanner-boxgap1box:first-child{ margin-right: 0.2rem; } .indexBanner-boxgap1box:last-child{ display: none; } .index-about-list{ display: block; display: flex; flex-wrap: wrap; padding: 0 15px; } .index-about-item-box { width: 33.33%; } .index-about{ margin-top: 0.4rem; } .index-about-item-box{ margin: 0 auto; margin-bottom: 0.2rem; } .index-about-p{ font-size: 0.28rem; font-family: MicrosoftYaHei-, MicrosoftYaHei; font-weight: normal; color: #6C6C6C; line-height: 0.24rem; } .index-banner{ height: 3.5rem; } .index-about-num span{ font-weight: bold; font-size: 0.45rem; } .indexBanner .swiper-pagination{ height: auto; padding: 0.15rem 0; } .index-about{ height: auto; /* padding:0 0.25rem; */ padding-bottom: 0.3rem; } .index-about-list{ position: initial; border: 0 solid #000; } .index-about-item-box{ height: auto; border: 0; } .index-about-wrap>video{ display: none; } .index-about-item{ position: initial; transform: none; } .index-about-item:hover{ width: 100%; height: 100%; background: none; color: #014098; } .index-about-num { font-size: 0.28rem; font-weight: bold; } .index-about-p{ font-size: 0.26rem; } .index-about-video{ display: none; } .index-about-video-mobile{ height: 4rem; display: block; } .index-about-video-mobile video { width: 100% !important; height: 100% !important; object-fit: contain; } .index-product-wrap{ flex-direction: column; padding: 0 0.25rem; } .index-product{ width: 100%; height: 3rem; margin: 0; margin-bottom: 0.2rem; } /*.index-product-img{*/ /* height: 3rem;*/ /*}*/ .index-product-box { height: 1rem; padding: 0 0.3rem; bottom: 0; top: auto; } .index-product-text{ font-size: 0.26rem; } .index-product-p { display: -webkit-box !important; font-size: 0.26rem; } .index-product-p p{ font-size: 0.26rem; } .index-product-icon { display: block; } .index-technology-wrap{ display: block; padding: 0 0.25rem; } .index-technology-left{ width: 100%; height: 3rem; } .index-technology-p{display: none !important;} .index-technology-bt{display: block;opacity: 1;} .index-technology-right{ width: 100%; height: auto; } .index-technology { width: 100%; height: 3rem; margin-top: 0.2rem; } .index-technology-bt a { width: 2rem; height: 0.5rem; border-radius: 0.05rem; border: 0.01rem solid #FFFFFF; font-size: 0.24rem; font-family: MicrosoftYaHei; color: #FFFFFF; line-height: 0.5rem; text-align: center; cursor: pointer; } .index-market-wrap{ margin: 0 0.25rem; margin-top: 0.6rem; } .index-market, .index-market2 { width: 100%; height: 3rem; margin-top: 0.2rem; } .index-market-box{height: 0.6rem;} .index-market-p{ font-size: 0.26rem; } .index-news-wrap{ padding: 0 0.25rem; } .index-news-list{ flex-wrap: wrap; } .index-news-item{ width: 100%; margin-bottom: 0.4rem; } .index-news-img-box{ height: 3rem; } .index-news-time{ font-size: 0.26rem; } .index-news-text{ font-size: 0.26rem; } .index-news-icon{ display: none; } .index-news-more{ width: 2rem; font-size: 0.26rem; height: 0.6rem; line-height: 0.6rem; margin: 0.4rem auto 0 auto; } .index-company-wrap{ background: none; padding: 0 0.25rem; } .index-company-wrap .index-title-en{ color: #E0E0E0; } .index-company-wrap .index-title-cn{ color: #333; } .index-company-introd{ color: #333; font-size: 0.26rem; line-height: 0.45rem; } .index-company-box{ padding: 0.2rem 0.1rem; } .index-company-img-box{ height: 3.8rem; } .index-company-text, .index-company-en { font-size: 0.26rem; line-height: 0.41rem; } .index-company-en{ margin-top: 0.15rem; } .index-company-bt{ margin: 0.4rem 0 0.8rem 0; } .index-company-left img, .index-company-right img{ width: 0.2rem; } .index-company-center img{ width: 0.4rem; } }