.home-banner { position:relative; width:100%; max-height: 960px; overflow: hidden; } .home-banner ul li { position:relative; } .home-banner ul li .video, .home-banner ul li .video video { width:100%; transform: translate(0px,-80px); } .home-banner ul li img.banner { position:relative; width:100%; transition: all 0.5s; } .home-banner ul li.swiper-slide-active img.banner{ opacity: 1; } .home-banner ul li a { display: block; width: 100%; height: 100%; position: relative; } .home-banner .pagination-banner { bottom: 5% !important; } .home-banner .pagination-banner span { width: 10px; height: 10px; border-radius:50%; background: #fff; opacity: 0.6; margin: 0 6px; padding:1px; position: relative; margin: 0 15px!important; box-shadow: 0 2px 2px 2px rgb(0 0 0 / 2%); transition: width 0.6s ease; } .home-banner .pagination-banner span.swiper-pagination-bullet-active { background: #fff; opacity: 1; } .home-banner .swiper-bottom { position:absolute; bottom:50%; right:0px; width:100%; padding:0; z-index:2; } .home-banner .swiper-relative { position:relative; height:50px; overflow:hidden; } .home-banner .swiper-relative div { position:absolute; width:50px; height:50px; border:1px solid rgba(255,255,255,0); border-radius:50%; cursor:pointer; } .home-banner .swiper-relative div:hover { position:absolute; width:50px; height:50px; border:1px solid rgba(255,255,255,0); border-radius:50%; background-color: rgba(0,0,0, 0); cursor:pointer; } .home-banner .swiper-banner-prev { background:url(/uploads/image/tpihome/left.svg) no-repeat center center/100%; left: 4%; } .home-banner .swiper-banner-next { background:url(/uploads/image/tpihome/right.svg) no-repeat center center/100%; right:4%; } .home-banner .swiper-button-disabled { opacity:0.35; } /*板块标题*/ .home-title {} .home-title h5 { font-size: 32px; color: #0066cb; font-weight: bold; } .home-title h6 { font-size: 24px; color: #999; margin: 20px 0 0 0; } @media screen and (max-width:1024px){ .home-title {} .home-title h5 { font-size: 24px; } .home-title h6 { font-size: 16px; line-height: 1.6; margin: 10px 0 0 0; } } /*板块标题 end*/ /*4大产品*/ .home-product { padding:7% 0; } .home-product .product-item {} .home-product .product-item .product-list { margin:30px 0 0 0; } .home-product .product-item .product-list ul {} .home-product .product-item .product-list ul li { position:relative; } .home-product .product-item .product-list ul li a { display:block; padding:5%; } .home-product .product-item .product-list ul li .photo{ position: relative; } .home-product .product-item .product-list ul li .photo .big-photo {} .home-product .product-item .product-list ul li .photo .big-photo img { width: 100%; } .home-product .product-item .product-list ul li .photo .small-photo { position: absolute; right: 0; bottom: -20%; width: 60%; transition: all 0.6s ease; } .home-product .product-item .product-list ul li .photo .small-photo img { width: 100%; } .home-product .product-item .product-list ul li:hover .photo .small-photo{ transform: translate(0px,-10px); } .home-product .product-item .product-list ul li .word { padding:15% 0 0 0; } .home-product .product-item .product-list ul li .word h3 { font-size: 22px; color:#252525; } .home-product .product-item .product-list ul li .word h3::after { opacity: 0; content: ""; width: 50px; height: 40px; background: url(/uploads/image/tpihome/go.svg) no-repeat center center/30px; margin: 0 0; display: inline-block; vertical-align: middle; transition: all 0.6s ease; } .home-product .product-item .product-list ul li:hover .word h3::after { opacity: 1; transform: translate(10px,0px); } .home-product .product-item .product-list ul li:hover .word h3 { color:#0066cb; } .home-product .product-item .product-list ul li .word p { padding:10px 0 10px 0; font-size: 16px; color:#666; } @media screen and (max-width:1024px){ .home-product { padding:30px 0; } .home-product .product-item {} .home-product .product-item .product-list { margin:20px 0 0 0; } .home-product .product-item .product-list ul {} .home-product .product-item .product-list ul li { } .home-product .product-item .product-list ul li a { padding:0%; } .home-product .product-item .product-list ul li .photo {} .home-product .product-item .product-list ul li .photo img { } .home-product .product-item .product-list ul li .word { padding:15% 0 0 0; } .home-product .product-item .product-list ul li .word h3 { font-size: 20px; padding:10px 0 0 0; } .home-product .product-item .product-list ul li .word p { font-size: 14px; } } /*热销产品*/ /*关于品牌*/ .home-about { position:relative; padding:8% 0; overflow:hidden; } .home-about::before { content: ""; position: absolute; top: 0%; z-index: -1; width: 100%; height: 100%; background: url(/uploads/image/tpihome/about.jpg) no-repeat left bottom/cover; display: inline-block; vertical-align: middle; -webkit-filter: grayscale(0%); } .home-about .item { overflow:hidden; color: #fff; text-align: center; } .home-about .item { padding: 2% 0%; } .home-about .item .home-title {} .home-about .item .home-title h5 { color: #fff; } .home-about .item .home-title h6 { font-size: 24px; margin: 30px 0 50px 0; color: #fff; } .home-about .item .profile {} .home-about .item .profile h3 { font-size: 24px; margin:0 0 20px 0; } .home-about .item .profile p { font-size: 14px; line-height: 2.0; width: 75%; margin: 0 auto; } .home-about .item .go { } .home-about .item .go a{ color: #fff;border: 1px solid rgba(255,255,255,0.2); } .home-about .item .word-number { width: 100%; padding: 0% 0%; } .home-about .item .word-number .number { margin:5% 0 0 0; } .home-about .item .word-number .number ul { overflow:hidden; padding:0 0%; } .home-about .item .word-number .number ul li { float:left; width:20%; padding:0 0 4% 0; cursor: default; transition: all 0.5s ease; } .home-about .item .word-number .number ul li:hover{ } .home-about .item .word-number .number ul li h3 { } .home-about .item .word-number .number ul li h3 strong { padding:0 5px 0 0; font-size: 78px; letter-spacing: 0; font-family: "din"; } .home-about .item .word-number .number ul li h3 span { font-size: 18px; } .home-about .item .word-number .number ul li p { font-size: 14px; padding-top: 5px; } @media screen and (max-width:1024px){ .home-about { padding:10% 0; } .home-about::before { } .home-about .item { overflow:hidden; color: #fff; text-align: center; } .home-about .item { padding: 2% 0%; } .home-about .item .home-title {} .home-about .item .home-title h5 {} .home-about .item .home-title h6 { font-size: 16px; margin: 20px 0 30px 0; color: #fff; } .home-about .item .profile {} .home-about .item .profile h3 { font-size: 24px; margin:0 0 10px 0; } .home-about .item .profile p { font-size: 12px; width: 90%; margin: 0 auto; } .home-about .item .go { } .home-about .item .go a{ color: #fff;border: 1px solid #c0c0c0; } .home-about .item .word-number { } .home-about .item .word-number .number { } .home-about .item .word-number .number ul { } .home-about .item .word-number .number ul li { width:30%; } .home-about .item .word-number .number ul li h3 { } .home-about .item .word-number .number ul li h3 strong { font-size: 40px; } .home-about .item .word-number .number ul li h3 span { font-size: 14px; } .home-about .item .word-number .number ul li p { font-size: 12px; padding-top: 5px; } } /*关于品牌*/ /*更多关于品牌*/ .moreabout-box{ display: flex; justify-content: space-between; margin: 5% 0; } .moreabout .store{ width: 46.5%; } .moreabout .store img{ width: 100%; } .moreabout .right{ width: 51.5%; height: 100%; } .moreabout .right .video{ position: relative; margin-bottom: 3%; height: 45%; } .moreabout .right .join{ height: 45%; } .moreabout .right video{ width: 100%; } .moreabout .right img{ width: 100%; } .moreabout .posrelative{position: relative;} .moreabout .hideimgtitle{} .moreabout .photo{ width: 100%; overflow: hidden; position: relative; } .moreabout .photo img{ transition: all 0.5s ease; } .moreabout .photo:hover img{ transform: scale(1.05); } @-webkit-keyframes mymove /*safari and chrome*/ { from {bottom: -90px;} to {bottom: 0px;} } .hidetitle{ display:block; width:100%; height: 60px; padding: 20px; background: linear-gradient(rgba(54, 54, 54, 0.3) 20%,rgba(0, 0, 0, 0.3) 100%); color:#fff; font-size: 20px; position: absolute; bottom: 0px; overflow: hidden; transition: all 0.3s; } .hidetitle:hover{color:#fff;text-decoration: none} @media screen and (max-width:1024px){ .moreabout-box{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 10% 3% 0; } .moreabout .store{ width: 100%; margin-bottom: 20px; } .moreabout .store img{} .moreabout .right{ width: 100%; height: 100%; } .moreabout .right .video{ position: relative; margin-bottom: 3%; height: 45%; margin-bottom: 20px; } .moreabout .right .join{ height: 45%; } .moreabout .right video{ } .moreabout .right img{ } .posrelative{position: relative;} .hideimgtitle{} .hidetitle{ height: 50px; padding: 15px; font-size: 16px; } } /* 一站式 */ .onestyle{ text-align: center; margin: 50px 0; position: relative; } .onestyle .home-title{ position: absolute; top: 10%; left: 0; right: 0; } .onestyle img{ width: 100%; } @media screen and (max-width:1024px){ .onestyle img{ width: 250%; } .onestyle{ overflow: auto; } } /*工程项目合作伙伴*/ .home-case { padding:5% 0; } .home-case .case-item { overflow:hidden; } .home-case .case-item .word { position:relative; width:40%; } .home-case .case-item .word::before { content: ""; position: absolute; top: 0; right: 0; z-index: 1; width: 0; height: 0; border-top: 50px solid #0066cb; border-left: 50px solid transparent; } .home-case .case-item .word .word-content { margin:10% 0 0 0; text-align: right; } .home-case .case-item .word .word-content i {} .home-case .case-item .word .word-content i img { max-width: 200px; } .home-case .case-item .word .word-content h4 { font-size: 32px; color: #0066cb; font-weight: bold; margin: 50px 0 40px 0; background-image: -webkit-linear-gradient(top,#0066cb,#0066cb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .home-case .case-item .word .word-content h5 { padding: 0 5px; font-size: 78px; color: #0066cb; letter-spacing: 0; font-family: "din"; margin:0 0 50px 0; background-image: -webkit-linear-gradient(top,#0066cb,#0066cb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .home-case .case-item .word .word-content p { font-size: 16px; color: #999; line-height: 1.8; } .home-case .case-item .word .tab { margin:30px 0 0 0; } .home-case .case-item .word .tab ul {} .home-case .case-item .word .tab ul li { float: left; width: 23%; margin: 1%; padding: 5% 0; text-align: center; background: #f6f6f6; } .home-case .case-item .word .tab ul li i {} .home-case .case-item .word .tab ul li i img { max-width: 40px; } .home-case .case-item .word .tab ul li p { font-size: 16px; color: #231815; margin: 20px 0 0 0; } .home-case .case-item .photo { width:50%; } .home-case .case-item .photo-box { position:relative; } .home-case .case-item .photo-box img { width:100%; } .home-case .case-item .photo-box a { position: absolute; bottom: 0; right: 0; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 150px; height: 150px; background-image: -webkit-linear-gradient(bottom,#0066cb,#0066cb); } .home-case .case-item .photo-box a i{ font-size: 48px; color:#fff; font-family: '宋体'; font-style: normal; } .home-case .case-item .photo-box a p{ margin:10px 0 0 0; font-size: 20px; color: #fff; font-family: "futura-medium"; } @media screen and (max-width:1024px){ .home-case {} .home-case .case-item { overflow:hidden; } .home-case .case-item .word { position:relative; width:100%; } .home-case .case-item .word::before { content: ""; position: absolute; top: 0; right: 0; z-index: 1; width: 0; height: 0; border-top: 50px solid #0066cb; border-left: 50px solid transparent; } .home-case .case-item .word .word-content { margin:10% 0 0 0; text-align: left; } .home-case .case-item .word .word-content i {} .home-case .case-item .word .word-content i img { max-width: 150px; } .home-case .case-item .word .word-content h4 { font-size: 24px; margin: 20px 0 10px 0; } .home-case .case-item .word .word-content h5 { padding: 0 5px; font-size: 24px; margin:0 0 20px 0; } .home-case .case-item .word .word-content p { font-size: 14px; color: #999; line-height: 1.8; } .home-case .case-item .word .tab { margin: 30px 0 30px 0; overflow: hidden; } .home-case .case-item .word .tab ul {} .home-case .case-item .word .tab ul li { float: left; width: 48%; margin: 1%; padding: 5% 0; text-align: center; background: #f6f6f6; } .home-case .case-item .word .tab ul li i {} .home-case .case-item .word .tab ul li i img { max-width: 40px; } .home-case .case-item .word .tab ul li p { font-size: 14px; color: #231815; margin: 20px 0 0 0; } .home-case .case-item .photo { width:100%; } .home-case .case-item .photo-box { position:relative; } .home-case .case-item .photo-box img { width:100%; } .home-case .case-item .photo-box a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; } .home-case .case-item .photo-box a i{ font-size: 24px; color:#fff; } .home-case .case-item .photo-box a p{ margin:5px 0 0 0; font-size: 14px; } } /*工程项目合作伙伴*/ /*新闻中心*/ .home-news { padding:5% 0; overflow:hidden; background: #f7f7f7; } .home-news .newsbigtitle{ text-align: center; margin-bottom: 50px; } .home-news .news-title {} .home-news .news-title h5 { } .home-news .news-title h6 { } .home-news .news-item { overflow-x:hidden; padding:0 0 30px 0; } .home-news .news-item ul li{ padding:0 1%; border-radius: 4px; } .home-news .news-item ul li .box { background:#fff; border: 1px solid rgba(222,222,222,0.2); } .home-news .news-item .photo { width: 100%; height: 0; padding-top: 66%; overflow: hidden; position: relative; } .home-news .news-item .photo .photo-news { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; margin:1%; overflow: hidden; } .home-news .news-item .photo .photo-news img{ width: 100%; height: 100%; display: block; object-fit: cover; transition: all 0.6s ease; border-radius: 4px; } .home-news .news-item li:hover .photo .photo-news img { opacity: 1; filter: alpha(opacity=80); transform: scale(1.1); } .home-news .news-item .word { padding:8% 5% 8% 5%; } .home-news .news-item .word .time{ font-size: 16px; color: #8f8f8f; font-family: 'futura-medium'; } .home-news .news-item .word h3 { padding:10px 0 0 0; font-size: 18px; color:#333; height:50px; line-height: 1.6; } .home-news .news-item li:hover .word h3 { color:#0066cb; } .home-news .news-item .word p { font-size: 14px; color: #999; } @media screen and (max-width:1024px){ .home-news { padding:8% 0; } .home-news .newsbigtitle{ text-align: center; margin-bottom: 20px; margin-top: 20px; } .home-news .news-left { width:100%; } .home-news .news-left .news-title { } .home-news .news-left .news-title h5 { } .home-news .news-left .news-title h6 { } .home-news .news-left .news-menu { margin:5% 0; overflow: hidden; } .home-news .news-left .news-menu a { display: block; float: left; width: 25%; text-align: center; font-size: 16px; color: #231815; padding: 10px 0; } .home-news .news-left .news-menu a:hover { color:#0066cb; } .number .pagination-news { margin-top:80px; } .number .pagination-news span { width: 42px; height: 42px; line-height: 42px; overflow: hidden; background:none; margin-right:5px; position: relative; opacity: 1; text-indent: -999px; color:#0066cb; text-align: center; font-family: "futura-light"; border-radius: 0; } .number .pagination-news span::before { content: ''; width:4px; height:4px; border-radius: 100%; left: 50%; top: 50%; margin: -2px 0 0 -2px; position:absolute; background: #dededc; } .number .pagination-news span::after { content: ''; width: 40px; height: 40px; border-radius: 100%; position:absolute; left: 50%; top: 50%; margin: -21px 0 0 -21px; display: none; } .number .pagination-news span.swiper-pagination-bullet-active { font-weight: 800; text-indent:0px; } .number .pagination-news span.swiper-pagination-bullet-active::after { display: block; border:1px solid #0066cb; } .number .pagination-news span.swiper-pagination-bullet-active::before { display: none; } .home-news .news-item { overflow-x:hidden; padding:0 0 0 0; } .home-news .news-item ul li{ padding:0 1%; } .home-news .news-item ul li .box { background:#fff; border: 1px solid rgba(222,222,222,0.2); box-shadow: 0 10px 10px rgb(153 153 153 / 8%); } .home-news .news-item .photo { width: 100%; height: 0; padding-top: 66%; overflow: hidden; position: relative; } .home-news .news-item .photo .photo-news { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; } .home-news .news-item .photo .photo-news img{ width: 100%; height: 100%; display: block; object-fit: cover; transition: all 0.6s ease; } .home-news .news-item li:hover .photo .photo-news img { opacity: 1; filter: alpha(opacity=80); transform: scale(1.1); } .home-news .news-item .word { padding:8% 5% 8% 5%; } .home-news .news-item .word time { font-size: 16px; color: #999; font-family: 'futura-medium'; } .home-news .news-item .word h3 { font-size: 16px; height:80px; line-height: 1.6; } .home-news .news-item .word p { height: 30px; font-size: 14px; } } /*新闻中心*/