.swiper-banner-pagination{ position: absolute; z-index: 2; text-align: center; bottom:40px!important; } .swiper-banner-pagination>span{ opacity: 1!important; background: white; transition: 0.3s; } .swiper-banner-pagination>span.swiper-pagination-bullet-active{ width: 30px; border-radius: 4px; } #swiper-banner img{ display: block; } .bannerIconGroup{ position: absolute; z-index: 2; left:100px; bottom:105px; } .bannerIconGroup .banner-line{ width: 4px; height:272px; background: white; position: absolute; bottom:0; left:0; } .bannerIconGroup .banner-circle{ width: 25px; height: 25px; border-radius: 50%; left: 40px; bottom:20px; background: white; position: absolute; } /*.banner-font{*/ /* position: absolute;*/ /*}*/ .banner-font-box{ position: absolute; font-size: 42px; color:white; margin-left: 100px; padding-left: 34px; bottom:200px; overflow: hidden; font-weight: 500; line-height: 68px; min-height: 222px; } .indexTitle{ font-size: 37px; /*color:#0067a4;*/ text-align: center; font-weight: 500; line-height: 59px; /*background: linear-gradient(to right,#0067A4 , #03456C);*/ /*-webkit-background-clip: text;*/ /*-webkit-text-fill-color: transparent;*/ display: flex; align-items: center; justify-content: center; flex-direction: column; } .indexTitle>div:nth-child(2){ font-size: 32px; font-weight: bold; letter-spacing: 2px; } .indexTitle>div{ display: inline-block; background: linear-gradient(to right,#0067A4 , #03456C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .service-box{ display: flex; align-items: center; justify-content: space-between; margin-top:120px; padding-bottom:150px; } .service-box>div{ text-align: center; padding-top:160px; font-size:28px; color:#535353; font-weight: bold; background-repeat: no-repeat; background-position-x: center; background-position-y: top; min-width: 142px; } .service-box .service-1{ background-image: url("img/service-1.png"); } .service-box .service-2{ background-image: url("img/service-2.png"); } .service-box .service-3{ background-image: url("img/service-3.png"); } .service-box .service-4{ background-image: url("img/service-4.png"); } .news-box{ margin-top:80px; } .news-list{ /*width: 435px!important;*/ display: block; } .news-list img{ width: 100%; height: 243px; display: block; transition: 0.3s; } .news-list{ color:#535353; } .news-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; margin-top:30px; margin-bottom:25px; font-weight: bold; } .news-desc{ font-size: 12px; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden; height: 36px; } .news-time{ font-size: 12px; margin-top:25px; margin-bottom:65px; } .news-link{ background:url("img/arrow.png") white no-repeat center; background-position-x: calc(100% - 13px); font-size: 16px; color:#535353; border-radius: 6px; width: 192px; height: 34px; display: flex; align-items: center; margin:0 auto; box-sizing: border-box; padding-left: 13px; opacity: 0; font-family: Source-Regular; } .news-list.hover .news-link{ opacity: 1; } .news-list .img-box{ overflow: hidden; } .news-list:hover img{ transform: scale(1.05); } .product-box{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top:132px; } .product-box>div{ height:475px; background: rgba(185, 191, 195, 0.4); position: relative; display: flex; align-items: flex-end; justify-content: flex-start; box-sizing: border-box; padding-bottom:12px; padding-left: 50px; overflow: hidden; backdrop-filter: blur(2px); } .product-box>.product-1{ width: 100%; margin-bottom:20px; } .product-box>.product-2{ width: 590px; } .product-name{ font-size: 32px; color:#535353; font-weight: 500; line-height: 36px; position: absolute; top:28px; right:24px; text-align: right; letter-spacing:0.3px; } .product-name span{ font-size: 24px; font-weight: bold; letter-spacing:2px; } .product-link{ background:url("img/arrow.png") white no-repeat center; background-position-x: calc(100% - 13px); font-size: 16px; color:#535353; border-radius: 6px; width: 192px; height: 34px; display: flex; align-items: center; box-sizing: border-box; padding-left: 13px; position: absolute; left: 0; right: 0; margin:0 auto; bottom:50px; transition: 0.5s; transform: translateY(100px); font-family: Source-Regular; letter-spacing: 2px; } .product-box>div.on .product-link{ transform: translateY(0); } .product-box>div img{ transition: 0.5s; } .product-box>div:hover img{ transform: scale(1.05); } .index-bg-1{ background: url("img/index-bg-1.png") #E3E5E7 no-repeat center; background-size: cover; padding-bottom: 150px; padding-top:135px; } .index-bg-2{ background: url("img/index-bg-2.jpg") no-repeat center; background-size: 100% 100%; height: 945px; box-sizing: border-box; padding-top:246px; overflow: hidden; } .index-bg-3{ background: url("img/index-bg-3.jpg") no-repeat center; background-size: 100% 100%; height: 945px; box-sizing: border-box; position: relative; } .index-bg-3-line{ position: absolute; height: 100%; background: url("img/index-bg-3-line.png") no-repeat center; background-size: 100% 100%; top:0; left: 0; width: 100%; } .index-adv-title{ position: absolute; right: 100px; top:100px; text-align: right; } .index-bg-3 .index-icon{ width: 98px; height: 98px; background-size: contain!important; margin-top:222px; } .index-bg-3 .midBoxCss{ display: flex; padding-top:122px; justify-content: space-around; } .index-adv-box-1 .index-icon{ background: url("img/index-adv-1.png"); } .index-adv-box-2 .index-icon{ background: url("img/index-adv-2.png"); } .index-adv-box-3 .index-icon{ background: url("img/index-adv-3.png"); } .index-adv-box-2{ margin-top:180px } .index-adv-box-3{ margin-top:260px; } .last-adv-content.index-adv-content{ width: 145px; } .index-adv-title-en{ font-size: 55px; font-family: DINNextLTPro-Medium, DINNextLTPro; font-weight: 500; color: #0067A4; background: linear-gradient(222deg, #043654, #0067A4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .index-adv-title-zh{ font-size: 35px; font-family: SourceHanSansSC-Bold, SourceHanSansSC; font-weight: bold; color: #0067A4; background: linear-gradient(222deg, #043654, #0067A4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .index-adv-font{ font-size: 19px; font-family: SourceHanSansSC-Bold, SourceHanSansSC; font-weight: bold; color: #0067A4; background: linear-gradient(222deg, #043654, #0067A4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: 96px; height: 32px; border-radius: 5px 5px 5px 5px; border: 1px solid #0067A4; display: inline-flex; align-items: center; justify-content: center; position: relative; } .index-adv-font:after{ content:''; display: block; position: absolute; width: 2px; height: 210px; background: white; top:40px; } .index-adv-content{ color:white; font-size: 16px; font-weight: 400; width: 380px; line-height: 26px; } .index-about-us{ background: rgba(192, 198, 202, 0.85); box-sizing: border-box; padding-top:55px; padding-left:55px; height: 699px; position: relative; } .index-about-us:after{ content:''; display: block; height:100%; background: rgba(192, 198, 202, 0.85); width: 150%; position: absolute; right: -150%; top:0; } .index-about-title-en{ font-size: 55px; font-weight: 500; color: #FFFFFF; } .index-about-title-zh{ font-size: 35px; font-weight: bold; color: #FFFFFF; margin-bottom:30px; } .index-about-content{ font-size: 16px; font-weight: 400; color: #FFFFFF; line-height: 26px; border-bottom:1px solid white; padding-bottom: 175px; } .index-about-content>div{ margin-bottom:12px; } .index-about-logo{ background: url("img/index-about-logo.png") no-repeat; width: 259px; height: 39px; background-size: contain; margin-top:40px; } /*鑷€傚簲寮€濮?/ @media screen and (max-width: 768px){ .index-bg-1{ padding-top:0; } .bannerIconGroup .banner-line{ height: 90px; width: 2px; } .bannerIconGroup .banner-circle{ width: 8px; height: 8px; bottom: 5px; left: 20px; } .swiper-banner-pagination{ bottom:15px!important; } .bannerIconGroup{ left: 30px; bottom:50px; } .banner-font-box{ margin-left: 35px; bottom: 90px; font-size: 24px; padding-left: 16px; /*top:calc(100% - 192px);*/ } .indexTitle{ font-size: 22px; line-height: initial; } .indexTitle>div:nth-child(2){ font-size: 20px; } .product-name{ font-size: 20px; line-height: 26px; } .product-name span{ font-size: 18px; } .product-box>div{ width: 100%; margin-bottom:20px; padding-left: 30px; padding-right: 30px; display: flex; align-items: center; justify-content: center; } .product-box>div>img{ height: 258px!important; } .product-box>div.product-1>img{ height: 45vw!important; margin-left: 0!important; } .product-box>div.product-1{ justify-content: space-between; } .product-box>div .product-link{ transform: translateY(0); } .product-box{ margin-top:32px; } .index-first{ padding-top:55px!important; margin-bottom:35px!important; } .service-box{ margin-top:35px; flex-wrap: wrap; justify-content: space-evenly; align-items: baseline; padding-bottom:22px; } .service-box>div{ width: 40%; margin-bottom:32px; font-size: 18px; background-size: auto 105px; padding-top: 126px; min-width: auto; } .product-link,.news-link{ font-size: 16px; } .news-box>div>a{ width: 100%!important; margin-right: 0!important; } .index-news-title{ position: absolute; } .index-news-title>div:first-child{ font-size: 40px!important; } .index-news-title>div:nth-child(2){ padding-right: 0!important; margin-top:-10px!important; } .index-news-title-box{ display: flex; justify-content: center; position: relative; height: 74px; } .news-list-contain{ padding-top:30px!important; } .news-box{ margin-top:12px; } .news-desc{ font-size: 12px; height: 38px; } .news-title{ font-size: 15px; } .news-time{ font-size: 12px; margin-bottom:45px; } .index-about-title-en{ font-size: 45px; } .index-about-title-zh{ font-size: 25px; } .index-about-content{ font-size: 14px; padding-bottom: initial; } .index-about-us{ padding-bottom:20px; height: auto; } .index-bg-2{ padding-top:80px; } .index-adv-title{ position: relative; padding-right: 4%; padding-top:20px; top: initial; right: initial; } .index-adv-title-en{ font-size: 28px; } .index-adv-title-zh{ font-size: 20px; } .index-bg-3{ height: auto; padding-bottom:42px; } .index-bg-3 .midBoxCss{ flex-direction: column; padding-top:22px; } .index-adv-content{ width: 100%; font-size: 14px; margin-bottom:12px; } .index-adv-box-2,.index-adv-box-3{ margin-top:40px; } .index-adv-font{ font-size: 16px; text-align: center; } .index-adv-font:after{ height: 110px; } .index-bg-3 .index-icon{ margin-left: auto; margin-right: auto; margin-top:122px; } .index-adv-box-1,.index-adv-box-2,.index-adv-box-3{ text-align: center; } .last-adv-content.index-adv-content{ width: 100%; } } /*鑷€傚簲缁撴潫*/