body { padding-top: 0px; } body, html { width: 100%; height: 100%; position: relative; } /* banner */ .indexBanner { width: 100%; height: 100%; overflow: hidden; position: relative; } .indexBanner li.swiper-slide { position: relative; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; /* object-fit: contain; */ } .indexBanner .indexBannerTxt { position: absolute; /* top: 50%; transform: translateY(-50%); */ left: 13%; } /* 底部圆点 */ .indexBanner .swiper-pagination { position: absolute; bottom: 30px; } .indexBanner .swiper-pagination .swiper-pagination-bullet { width: 20px; height: 4px; background: #075a94; border-radius: 23px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .indexBanner .swiper-pagination .swiper-pagination-bullet-active { width: 100px; background: #1E95E8; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /* banner1 文字 */ .indexBannerTxt1 { top: 30%; color: #333; } .indexBannerTxt1 img { display: block; height: 62px; width: auto; margin-bottom: 60px; } .indexBannerTxt1 h2 { margin-bottom: 32px; } .indexBannerTxt1 .btn { margin-top: 80px; } /* banner2 文字 */ .indexBannerTxt2 { top: 26%; color: #333; } .indexBannerTxt2 h2 { margin-bottom: 60px; } .indexBannerTxt2 ul { margin-bottom: 100px; } .indexBannerTxt2 li { display: flex; align-items: flex-end; margin-bottom: 40px; } .indexBannerTxt2 li h3 { font-family: Rany-Medium; margin-right: 12px; } .indexBannerTxt2 li:last-child { margin-right: 0px; } .indexBannerTxt2 p>img{ height: 60px; width: auto; margin-bottom: 60px; } .indexBannerTxt1 .btn, .indexBannerTxt2 .btn { padding: 0px 42px; background: #fff; box-shadow: 2px 2px 20px rgba(189, 206, 240, 0.33); border-radius: 23px; } .indexBannerTxt1 .btn span, .indexBannerTxt2 .btn span { display: block; line-height: 46px; color: #1E95E8; padding-right: 30px; background: url(../images/go.png)no-repeat center right; background-size: 18px 18px; } .indexBannerTxt1 .btn:hover, .indexBannerTxt2 .btn:hover { background: #1E95E8; } .indexBannerTxt1 .btn:hover span, .indexBannerTxt2 .btn:hover span { color: #fff; background: url(../images/goW.png)no-repeat center right; background-size: 18px 18px; } /* 核心技术 */ .coreTechnology { padding-bottom: 50px; } .coreTechnology .pbulicIndexTitle { margin-bottom: 110px; } .coreTechnology .conBox { height: 760px; background: url(../images/hxbg.png)no-repeat center center; background-size: 100% 100%; position: relative; } .coreTechnology .conBox>div { position: absolute; } .coreTechnology .core1, .coreTechnology .core2 { text-align: right; } .coreTechnology .core3, .coreTechnology .core4 { text-align: left; } .coreTechnology .core1 { max-width: 330px; top: 26px; left: 0px; } .coreTechnology .core2 { max-width: 330px; left: 0px; bottom: 160px; } .coreTechnology .core3 { max-width: 330px; right: 0px; top: 0px; } .coreTechnology .core4 { max-width: 330px; right: 0px; bottom: 150px; } .coreTechnology h2 { color: #333; margin-bottom: 18px; } .coreTechnology .conBox p { color: #7686A3; margin-bottom: 20px; line-height: 1.7; } .coreTechnology .more { display: inline-block; border: 1px solid #1E95E8; box-shadow: 2px 2px 20px rgba(189, 206, 240, 0.33); border-radius: 23px; background: #fff; } .coreTechnology a { display: block; line-height: 46px; padding: 0px 64px 0px 34px; text-transform: uppercase; color: #1E95E8; background: url(../images/go.png)no-repeat center right 34px; background-size: 18px 18px; } .coreTechnology .more:hover { background: #1E95E8; } .coreTechnology .more:hover a { background: url(../images/goW.png)no-repeat center right 34px; color: #fff; background-size: 18px 18px; } /* 产品中心 */ .productCenter .conBox { padding-top: 25px; display: flex; align-items: center; padding-bottom: 80px; padding-top: 120px; } /*.productCenter .publicTab li,*/ /*.productCenter .publicTab .whiteBg {*/ /* width: 170px;*/ /*}*/ .applicationL { width: 20%; position: relative; /*margin-right: 40px;*/ margin-top: 30px; } .applicationL::after { content: ""; display: block; height: 92%; border-left: 1px dashed #8695B1; position: absolute; left: 5.5px; top: 12px; z-index: -1; opacity: 0.4; } .applicationL li { cursor: pointer; padding-left: 32px; color: #8695B1; background: url(../images/point1.png)no-repeat center left; background-size: 12px 12px; margin-bottom: 40px; } /*.applicationL li:last-child {*/ /* margin-bottom: 0px;*/ /*}*/ .applicationL li.active { color: #1E95E8; font-weight: 500; background: url(../images/point2.png)no-repeat center left; background-size: 12px 12px; } .productCon { width: 80%; /*padding-top: 120px;*/ /*padding-bottom: 80px;*/ } .productCon li { display: none; } .productCon li>div { display: flex; align-items: center; justify-content: space-around; } .productCon li>div>img{ width: 530px; height: auto; } .productCon .txt { max-width: 510px; } .productCon .txt h2 { color: #333; margin-bottom: 26px; } .productCon .txt i { display: inline-block; width: 24px; height: 24px; margin-right: 14px; margin-bottom: -3px; } .productCon .ico1 { background: url(../images/indexProduct1Ico.png)no-repeat center center; background-size: 24px 24px; } .productCon .ico2 { background: url(../images/indexProduct2Ico.png)no-repeat center center; background-size: 24px 24px; } .productCon .ico3 { background: url(../images/indexProduct3Ico.png)no-repeat center center; background-size: 24px 24px; } .productCon .ico4 { background: url(../images/indexProduct4Ico.png)no-repeat center center; background-size: 24px 24px; } .productCon .ico5 { background: url(../images/indexProduct5Ico.png)no-repeat center center; background-size: 24px 24px; } .productCon .ico6 { background: url(../images/indexProduct6Ico.png)no-repeat center center; background-size: 24px 24px; } .productCon .ico7 { background: url(../images/indexProduct7Ico.png)no-repeat center center; background-size: 24px 24px; } /* 新增的两个图标 */ .productCon .ico8 { background: url(../images/indexProduct8Ico.png)no-repeat center center; background-size: 24px 24px; } .productCon .ico9 { background: url(../images/indexProduct9Ico.png)no-repeat center center; background-size: 24px 24px; } .productCon .txt span { display: block; font-weight: 500; color: #1E95E8; margin-bottom: 22px; } .productCon .txt p { color: #8695B1; line-height: 1.7; text-align: justify; margin-bottom: 50px; } .productCon .txt .more { display: inline-block; box-shadow: 2px 2px 20px rgba(189, 206, 240, 0.33); border-radius: 23px; background: #fff; } .productCon .txt a { display: block; line-height: 46px; padding: 0px 64px 0px 34px; text-transform: uppercase; color: #1E95E8; background: url(../images/go.png)no-repeat center right 34px; background-size: 18px 18px; } .productCon .txt .more:hover { background: #1E95E8; } .productCon .txt .more:hover a { background: url(../images/goW.png)no-repeat center right 34px; color: #fff; background-size: 18px 18px; } /* 关于小视 */ .about { height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: url(../images/indexAbout.png)no-repeat center center; background-size: 100% 100%; } .about h2 { text-align: center; color: #333; margin-bottom: 80px; } /* 更多 */ .about .more { display: inline-block; box-shadow: 2px 2px 20px rgba(189, 206, 240, 0.33); border-radius: 23px; background: #fff; } .about a { display: block; line-height: 46px; padding: 0px 64px 0px 34px; color: #1E95E8; background: url(../images/go.png)no-repeat center right 34px; background-size: 18px 18px; } .about .more:hover { background: #1E95E8; } .about .more:hover a { background: url(../images/goW.png)no-repeat center right 34px; color: #fff; background-size: 18px 18px; } /* 数字累加 */ .numCount { margin-bottom: 70px; } .numCount ul { display: flex; justify-content: center; } .numCount li { text-align: center; /*margin-right: 200px;*/ width: 33%; } .numCount li:last-child { margin-right: 0px; } .numCount li .numU { font-family: Rany-Bold; color: #333; } .numCount li .item .indc { color: #666666; margin-top: 8px; } .numCount li .numU sup { vertical-align: top; } .numCount li .numU sub { vertical-align: baseline; } /* 行业应用 */ .industry { padding-bottom: 60px; } .industry .pbulicIndexTitle { margin-bottom: 75px; } .industry .publicTab li, .industry .publicTab .whiteBg { width: 166px; } .industryCon { margin-top: 65px; height: 432px; background: url(../images/industryBg.png)no-repeat right bottom, #fff; background-size: 440px 140px; box-shadow: 0px 0px 20px rgba(189, 206, 240, 0.33); border-radius: 24px; overflow: hidden; } .industryCon li { display: none; height: 100%; } .industryCon li>div { display: flex; height: 100%; } .industryCon li img { width: 760px; height: 100%; } .industryCon .txt { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .industryCon .txt h2 { color: #333; margin-bottom: 30px; } .industryCon .txt p { line-height: 1.7; color: #8695B1; text-align: justify; } .industryCon .more { display: inline-block; box-shadow: 2px 2px 20px rgba(189, 206, 240, 0.33); border-radius: 23px; background: #fff; } .industryCon a { display: block; line-height: 46px; padding: 0px 64px 0px 34px; text-transform: uppercase; color: #1E95E8; background: url(../images/go.png)no-repeat center right 34px; background-size: 18px 18px; } .industryCon .more:hover { background: #1E95E8; } .industryCon .more:hover a { background: url(../images/goW.png)no-repeat center right 34px; color: #fff; background-size: 18px 18px; } /* 新增宣传视频 */ .video-background { position: relative; width: 100%; height: auto; /* object-fit: cover; */ } /* 移动端 */ @media (max-width: 767px) { body { padding-top: 55px; } .indexBanner { height: auto; } .swiper-slide img { height: auto; } .indexBanner .indexBannerTxt { left: 16px; } /* banner1 文字 */ .indexBannerTxt1 { top: 18%; color: #333; } .indexBannerTxt1 img { height: 20px; width: auto; margin-bottom: 14px; } .indexBannerTxt2 p>img{ height: 26px; width: auto; margin-bottom: 20px; } .indexBannerTxt1 h2 { font-size: 16px; margin-bottom: 8px; } .indexBannerTxt1 .btn { margin-top: 22px; } /* banner2 文字 */ .indexBannerTxt2 { top: 12%; color: #333; } .indexBannerTxt2 h2 { font-size: 14px; margin-bottom: 18px; } .indexBannerTxt2 ul { margin-bottom: 22px; } .indexBannerTxt2 li { display: flex; align-items: flex-end; margin-bottom: 12px; } .indexBannerTxt2 li h3 { font-size: 18px; font-family: Rany-Medium; margin-right: 5px; } .indexBannerTxt1 .btn, .indexBannerTxt2 .btn { padding: 0px 12px; background: #fff; box-shadow: 2px 2px 20px rgba(189, 206, 240, 0.33); border-radius: 23px; } .indexBannerTxt1 .btn span, .indexBannerTxt2 .btn span { font-size: 10px; display: block; line-height: 26px; color: #1E95E8; padding-right: 15px; background: url(../images/go.png)no-repeat center right; background-size: 9px 9px; } .indexBanner .swiper-pagination { bottom: 4px; } .indexBanner .swiper-pagination .swiper-pagination-bullet { width: 14px; } .indexBanner .swiper-pagination .swiper-pagination-bullet-active { width: 30px; } /* */ .coreTechnology .pbulicIndexTitle { margin-bottom: 30px; } .coreTechnology .conBox { height: auto; background: url(../images/hxbg.png)no-repeat center top; background-size: 100% auto; padding-top: 200px; } .coreTechnology .conBox>div { position: relative; top: unset; bottom: unset; left: unset; right: unset; max-width: unset; width: 100%; text-align: left; margin-bottom: 30px; } .coreTechnology a { line-height: 40px; padding: 0px 54px 0px 24px; background: url(../images/go.png)no-repeat center right 24px; background-size: 18px 18px; } .coreTechnology h2 { margin-bottom: 8px; } .coreTechnology .conBox p { margin-bottom: 16px; } .coreTechnology { padding: 10px; } /* */ .productCenter .conBox { padding-top: 40px; padding-bottom: 20px; flex-direction: column; } .applicationL { margin: 0px 0px 24px 0px; width: 100%; display: flex; overflow-x: auto; flex: 0 0 auto; } .applicationL li { flex: 0 0 auto; margin-bottom: 0px; margin-right: 28px; padding-left: 0px; padding-bottom: 16px; background: url(../images/point1.png)no-repeat center bottom; background-size: 10px 10px; } .applicationL li:last-child { margin-right: 0px; } .applicationL li.active { background: url(../images/point2.png)no-repeat center bottom; background-size: 10px 10px; } .applicationL::after { content: ""; display: block; width: 440%; border-bottom: 1px dashed #8695B1; border-left: 0px; position: absolute; left: 0px; top: unset; bottom: 4px; z-index: -1; opacity: 0.4; } .productCon{ width: 100%; } .productCon { padding-top: 30px; padding-bottom: 40px; } .productCon li>div { flex-direction: column; justify-content: center; } .productCon .txt { max-width: unset; width: 100%; margin-top: 30px; } .productCon li>div>img{ width: 85%; height: auto; } .productCon .txt h2 { margin-bottom: 18px; } .productCon .txt span { margin-bottom: 14px; } .productCon .txt p { margin-bottom: 24px; } .productCon .txt a { line-height: 42px; } .productCon .txt i { width: 20px; height: 20px; } .productCon .txt .ico1, .productCon .txt .ico2, .productCon .txt .ico3, .productCon .txt .ico4, .productCon .txt .ico5, .productCon .txt .ico6, .productCon .txt .ico7{ background-size: 20px 20px; } .about { height: auto; padding: 40px 4%; background-size: cover; } .about h2 { margin-bottom: 20px; font-size: 22px; line-height: 1.6; } .numCount { width: 100%; margin-bottom: 30px; } .numCount ul { width: 100%; padding: 0px; justify-content: space-between; } .numCount li { margin-right: 0px; } .numCount li .numU span { font-size: 20px; } /* */ .industry .pbulicIndexTitle { margin-bottom: 30px; } .industryCon { height: auto; margin-top: 40px; padding: 0px; border-radius: 16px; background: url(../images/industryBg.png)no-repeat center bottom, #fff; background-size: 100% auto; } .industryCon li>div { flex-direction: column; } .industryCon .txt { padding: 24px 18px 30px 18px; } .industryCon .txt h2 { margin-bottom: 14px; } .industryCon .more { margin-top: 24px; } .productCenter .publicTab li, .industry .publicTab li { width: auto; padding: 0px 30px; } }