.banner .swiper-container {
height: 960px;
overflow: visible;
}
.banner .pagination {
position: absolute;
left: 0;
text-align: center;
bottom: 40px;
width: 100%;
}
.banner .swiper-pagination-switch {
display: inline-block;
width: 34px;
height: 14px;
font-size: 0;
line-height: 20px;
text-align: center;
cursor: pointer;
transition: width .8s;
}
.banner .swiper-pagination-switch:before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
border-radius: 8px;
background: rgba(255, 255, 255, .5);
vertical-align: middle;
transition: width .3s, background-color .3s;
box-shadow: 0 3px 6px 0 rgba(255, 255, 255, 0.20);
}
.banner .swiper-active-switch:before {
background: #fff;
box-shadow: 0 3px 6px 0 rgba(255, 255, 102552, .5);
width:34px;
}
.banner .swiper-slide {
position: relative;
/* opacity: .6; */
transition: opacity 0.7s ease-in-out;
overflow: hidden;
}
.banner .swiper-slide-active {
opacity: 1;
}
.banner .swiper-slide .img {
position: absolute;
}
.banner .inner {
position: relative;
display: block;
width: 1180px;
height: 960px;
margin: 0 auto;
}
.banner .banner-text {
position: absolute;
bottom: 200px;
z-index: 999;
width:100%;
display: flex;
flex-direction: column;
align-items: center;
}
.banner .banner-text h3 {
margin-bottom: 10px;
font-size: 36px;
color: #fff;
line-height: 36px;
font-weight: normal;
}
.banner .banner-text h2 {
margin-bottom: 50px;
font-size: 60px;
color: #ffffff;
line-height: 60px;
display:flex;
justify-content: center;
align-items: center;
}
.banner .banner-text h2 span b{
color:red;
}
.banner .banner-text h2 .banner_min{
position: relative;
margin:0 60px;
}
.banner .banner-text h2 .banner_min::before{
content: '';
width:388px;
height:388px;
background: url(../images/banner_min.png) no-repeat;
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-51%);
}
.banner .banner-text h2 .banner_min img{
border-radius: 50%;
width:321px;
height:321px;
}
.banner .banner-text p {
margin-top: 10px;
height: 46px;
line-height: 46px;
padding: 0 40px;
font-size: 18px;
color: #000000;
background:rgba(255, 255, 255, .7);
display: inline-block;
border-radius: 25px;
}
.banner .bar-slide-pic{
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.banner .bar-slide-pic img{
margin-top:4rem;
}
.banner .bar-adv-p{
font-size:20px;
color:#382828;
margin-top:2rem;
}
.banner .banner-adv{
align-items: flex-end;
bottom:200px
}
.banner .bar-adv-pic{
width:90%;
margin-top:100px;
}
.banner .bar-adv-pic ul{
display:flex;
justify-content: space-around;
width:100%;
}
/* 查询 */
.keys .cbody{
display: flex;
justify-content: space-between;
align-items: center;
height:88px;
}
.keys .keys-hot span,
.keys .keys-hot a{
font-size:14px;
color:#726666;
}
.keys .keys-hot span{
font-weight: bold;
}
.keys .keys-hot a::after{
content:'ã€';
font-size:14px;
color:#726666;
}
.keys .keys-hot a:last-child:after{
content:'';
}
.keys .keys-serarch{
border:1px solid #e2e2e2;
width:360px;
height:40px;
line-height:40px;
border-radius: 20px;
display:flex;
align-items: center;
justify-content:center;
}
.keys .keys-txt{
width:300px;
height:30px;
border:none;
font-size:14px;
color:#8c8c8c;
text-indent: .5rem;
}
.keys .keys-sub{
border:0;
cursor: pointer;
width:26px;
height:23px;
background: url(../images/search.gif) no-repeat;
}
/* 关于 */
.about{
background: url(../images/about.jpg) no-repeat center;
padding-bottom: 40px;
}
.about-desc{
padding-top: 30px;
}
.about-body{
display:flex;
justify-content: space-between;
margin-top:86px;
}
.about-tv{
position: relative;
}
.about-tv-img{
width:500px;
height:300px;
overflow: hidden;
position: relative;
}
.tv-play{
width:53px;
height:53px;
background: url(../images/play.png) no-repeat;
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
}
.about-more{
width:154px;
height:36px;
background:#fe0000;
position: absolute;
bottom:-20px;
right:0px;
display:flex;
align-items: center;
padding:0 20px 0 30px;
}
.about-more::after,
.about-more a{
font-size:14px;
color:#fff;
}
.about-more::after{
content: '>';
position: absolute;
right:20px;
}
.about-info{
flex: 1;
padding-left:60px;
display:flex;
flex-direction: column;
}
.about-info ul{
display:flex;
justify-content: space-between;
margin-top:16px;
}
.about-info ul li{
display: flex;
flex-direction: column;
align-items: center;
}
.about-info ul li>span{
font-size:20px;
color:#404040;
}
.about-info ul li p{
font-size:16px;
color:#4b4b4b;
}
.about-info ul li p span{
font-size:44px;
color:#e60012;
font-weight:bold;
}
.about-info>p{
margin-top:70px;
font-size:16px;
color:#333333;
line-height:32px;
}
.about-adva{
margin-top:210px;
}
.advaSwiper{
height:284px;
overflow: hidden;
}
.adva-body{
position: relative;
margin:80px 0 60px 0;
}
.advaSwiper .swiper-slide{
display: flex;
justify-content: center;
}
.adva-next,
.adva-prev{
background: url(../images/adva-next.png) no-repeat;
width:15px;
height:27px;
position: absolute;
top:50%;
}
.adva-prev{
right:0;
transform: rotateY(180deg) translateX(-250%);
}
.adva-next{
left:0;
transform: translateX(-250%);
}
.adva-li{
background: #fff;
width:202px;
height:284px;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content:space-around;
align-items: center;
padding:36px 15px;
text-align: center;
transition: all .4s;
}
.adva-li.active{
background:#e60012;
}
.adva-name{
font-size:18px;
color:#36393d;
}
.adva-txt{
font-size:14px;
color:#7f7f7f;
}
.adva-li.active .adva-txt,
.adva-li.active .adva-name{
color:#fff;
}
.adva-more{
width:190px;
height:54px;
background:#e60012 url(../images/adva-more.png) no-repeat 120px 11px;
display:flex;
align-items: center;
border-radius:25px;
margin:30px auto;
}
.adva-more a{
font-size: 16px;
color: #fff;
text-indent: 40px;
display: block;
width: 100%;
height: 100%;
line-height: 54px;
}
/* 产å“专区 */
.probox{
padding:100px 0;
background: url(../images/probox.jpg) no-repeat center;
}
.probox-tag{
display:flex;
justify-content: center;
padding:40px 0 30px 0;
}
.probox-tag ul:nth-child(1){
width:300px;
}
.probox-tag ul:nth-child(2){
width:460px;
}
.probox-tag ul:nth-child(3){
width:380px;
}
.probox-tag ul li:hover,
.probox-tag ul li.active{
background: #142038;
border-radius: 30px;
color:#fff;
}
.probox-tag ul li{
padding:12px 24px;
display: inline-flex;
}
.probox-tag ul li::before{
content:'-';
margin-right:5px;
}
.probox-tag ul li:hover a,
.probox-tag ul li.active a{
color:#fff;
}
.probox-tag ul li a{
font-size:16px;
color:#142038;
word-break: keep-all;
}
.probox-tag ul:nth-child(1) li a,
.probox-tag ul:nth-child(1) li{
width: 100%;
overflow: hidden;
}
.proboxSwiper{
overflow: hidden;
height:500px;
background: #fff;
}
.probox-body{
position: relative;
}
.probox-info{
float:left;
padding:80px 42px 0 50px;
width:600px;
}
.probox-info h3 a{
font-size:28px;
color:#333336;
}
.probox-info p{
margin-top:20px;
font-size:14px;
color:#666666;
line-height:32px;
}
.probox-info>a{
display:block;
width:100px;
height:34px;
background: #f9c12c;
font-size:14px;
color:#fff;
text-align: center;
line-height: 34px;
border-radius: 17px;
margin-top:60px;
}
.probox-pic{
float:right;
width:600px;
height:515px;
overflow: hidden;
}
.probox-pic a{
display:block;
width:100%;
height:100%;
overflow: hidden;
}
.probox-pic img{
height:100%;
width:100%;
transition: all .5s;
}
.probox-pic a:hover img{
transform: scale(1.1,1.1);
}
/* å·¦å³æŽ§åˆ¶ç®å¤´ */
.honor-next,
.honor-prev,
.probox-prev,
.probox-next{
height:58px;
width:58px;
background:#f5f5f5;
border-radius:50%;
font-size:20px;
color:#333333;
display:flex;
justify-content: center;
align-items: center;
font-family:serif;
font-weight: bold;
position:absolute;
cursor: pointer;
}
.probox-next{
bottom:53px;
left:120px;
}
.probox-prev{
left:45px;
bottom:53px;
}
/* 工程案例 */
.case{
padding-top: 90px;
}
.case .cbody{
position: relative;
height:640px;
margin-top:60px;
}
.case ul li:nth-child(1){
position: absolute;
width:600px;
height:600px;
overflow: hidden;
padding: 0;
top:0;
left:0;
}
.case ul li:nth-child(1) a:first-child img,
.case ul li:nth-child(1) a:first-child{
display: block;
width:100%;
height:100%;
}
.case ul li a:last-child,
.case ul li:nth-child(1) a:last-child{
position: absolute;
bottom: 40px;
left:50px;
font-size:16px;
color:#fff;
z-index: 222;
}
.case ul li a:last-child::after,
.case ul li:nth-child(1) a:last-child::after{
content: '';
width:25px;
height:10px;
background: url(../images/case-more.png) no-repeat;
position: absolute;
right:-40px;
top:4px;
}
.case ul li:nth-child(3) a:last-child,
.case ul li:nth-child(2) a:last-child{
bottom: 20px;
}
.case ul{
display: flex;
flex-wrap:wrap;
padding:54px 0 0 350px;
}
.case ul li{
width:417px;
height:243px;
background: #fff;
position:relative;
z-index: 444;
padding:20px 0 0 20px;
overflow:hidden;
}
.case ul li a:first-child{
display: block;
width:395px;
height:222px;
overflow: hidden;
}
.case ul li a:first-child img{
width:395px;
height:222px;
}
.case ul li:nth-child(4),
.case ul li:last-child{
padding-bottom:20px;
height:260px;
}
.case ul li a img{
transition: all .5s;
}
.case ul li a:hover img{
transform: scale(1.1,1.1);
}
/* è£èª‰ */
.honor{
padding-top: 50px;
}
.honor .cbody{
position: relative;
padding:70px 0;
}
.honorSwiper{
overflow: hidden;
height:478px;
}
.honor-next{
top:30%;
left:-100px;
}
.honor-prev{
top:30%;
right:-80px;
}
.honorSwiper .swiper-slide-active .honor-li{
border-bottom: 7px solid #f9c12c;
}
.honor-li{
background: #f9f9f9;
padding:43px 20px 40px 20px;
width:275px;
display: flex;
flex-direction: column;
align-items: center;
}
.honor-pic{
width:184px;
height:184px;
border-radius: 50%;
overflow: hidden;
}
.honor-pic a{
display: block;
width:184px;
height:184px;
}
.honor-pic a img{
width:100%;
height:100%;
transition: all .5s;
}
.honor-pic a:hover img{
transform: scale(1.1,1.1);
}
.honor-li>a{
font-size:24px;
color:#000;
display:block;
padding:30px 0 10px 0;
}
.honor-li>p{
font-size:13px;
color:#666666;
line-height:24px;
}
.honor-li>p>a{
color:red;
}
.midbar img,
.midbar{
width:100%;
}
/* æ–°é—» */
.news{
padding:70px 0;
}
.news .cbody{
display:flex;
justify-content: space-between;
margin-top:40px;
}
.news-r,
.news-l{
width:580px;
}
.news-top{
height:50px;
line-height:50px;
display: flex;
justify-content: space-between;
align-items: center;
}
.news-top h3{
font-size:24px;
color:#000;
font-weight: normal;
position: relative;
padding-left:16px;
}
.news-top h3::before{
content: '';
width:3px;
height:20px;
background:#0075c2;
position: absolute;
top:14px;
left:0;
}
.news-top a{
font-size:13px;
color:#666666;
}
.news-l-pic{
width:586px;
height:329px;
overflow: hidden;
}
.news-l-pic a img{
width:586px;
height:290px;
margin-top:22px;
}
.news-l-info{
padding:10px;
}
.news-l-info>a{
font-size:18px;
color:#000;
display: block;
margin:10px 0;
}
.news-l-info p{
font-size:14px;
color:#9c9b9b;
line-height:24px;
margin-top:8px;
}
.news-l-info p:last-child{
display: flex;
justify-content: space-between;
margin-top:16px;
}
.news-l-info p:last-child a,
.news-l-info p:last-child span{
font-size:14px;
color:#999999;
}
.news-r-li{
display: flex;
justify-content: space-between;
margin-top:22px;
}
.news-r-li p:first-child{
width:220px;
height:134px;
overflow: hidden;
}
.news-r-li p:first-child a img{
width:220px;
height:134px;
}
.news-r-li p:last-child{
width:336px;
}
.news-r-li p:last-child a:first-child{
font-size:16px;
color:#232323;
display:block;
margin-top:15px;
}
.news-r-li p:last-child span{
font-size:14px;
color:#9c9b9b;
line-height:22px;
/*height:50px;*/
overflow: hidden;
display: block;
margin:15px 0 5px 0;
}
.news-r-li p:last-child a:last-child{
font-size:12px;
color:red;
}
.news-dt ul{
background: #fafafa;
margin-top:24px;
border-radius: 10px;
padding:20px 30px;
}
.news-dt ul li a{
display:block;
margin-left:12px;
font-size:15px;
color:#606060;
}
.news-dt ul li{
height:36px;
line-height:36px;
background: url(../images/desc.gif) no-repeat 0 center;
}
.news-r ul{
background: #fafafa;
margin-top:24px;
border-radius: 10px;
padding:20px 30px;
}
.news-r ul li{
height:36px;
line-height:36px;
background: url(../images/desc.gif) no-repeat 0 center;
}
.news-r ul li a{
display:block;
margin-left:12px;
font-size:15px;
color:#606060;
}
/* é¦–é¡µå…¬ç”¨æ ‡é¢˜ */
.tbox{
display:flex;
flex-direction: column;
align-items: center;
}
.tbox h3{
font-size:38px;
color:#333333;
position: relative;
}
.tbox h3 span{
color:#e60012;
}
.tbox p{
margin-top:.5rem;
font-size:18px;
color:#555555;
}
.tbox .disc{
width:36px;
height:2px;
position: relative;
margin-top:20px;
}
.tbox .disc::after,
.tbox .disc::before{
content: '';
width:18px;
height:2px;
position: absolute;
top:0;
}
.tbox .disc::before{
left:0;
background:#f9c12c;
}
.tbox .disc::after{
right:0;
background:#ff0000;
}
.tbox-after h3::before,
.tbox-after h3::after{
content:'';
width:63px;
height:18px;
background: url(../images/tbox-after.png) no-repeat;
position: absolute;
top:50%;
}
.tbox-after h3::after{
right:-20px;
transform: translateX(100%) translateY(-50%);
}
.tbox-after h3::before{
left:-20px;
transform:rotateY(180deg) translateY(-50%) translateX(100%);
}