@charset "utf-8";

/* banner */
#indexBanner{ position:relative; z-index:1; height:800px; overflow:hidden; text-align:center; background:url(../images/loading.gif) center center no-repeat #101010; max-width:none; transition: height 0.25s;}
#indexBanner:after{content:""; display:inline-block;width:100%; height: 1px; overflow: hidden; background: rgba(0,0,0,0.1); position:absolute; left:0; top:auto; bottom: 0; z-index: 11;}
#bannerBox{position:absolute; top:0; left:50%; width:1920px; margin-left:-960px; height:100%; overflow:hidden;text-align:center;}
#bannerBox a{display:block;}
#bannerBox img{max-width:100%; height:auto;}
@media (max-width:1600px){
    #indexBanner{height:666px;}
    #bannerBox{width:1600px; margin-left:-800px;}
}
@media (max-width:1440px){
    #indexBanner{height:600px;}
    #bannerBox{width:1440px; margin-left:-720px;}
}

.banner-pagination{position:absolute; z-index:20; text-align:left; color:#fff; white-space:nowrap;  font-family: sans-serif; }
.swiper-container-horizontal>.swiper-pagination-bullets{ left:50%; margin-left: 600px; top:auto; bottom:2rem; width:200px; height: auto; }

.banner-pagination .swiper-pagination-bullet{ display: inline-block; width:2.5rem; height:2.5rem; line-height:2.5rem; overflow: hidden; background: url("../images/bannerBtn.png") left top no-repeat;text-align: center; text-indent:-8px; opacity: 1; border-radius: 0; transition: background 0.3s;
}
.banner-pagination .swiper-pagination-bullet-active{ background-position: left bottom; }

.next,.prev{display:none;  font-size:1.5rem; width:4rem; height:6rem; line-height:6rem;  text-align: center; position: absolute; left:5%; top:50%; margin-top:-3rem; z-index: 10; cursor: hand; cursor: pointer;  background:url("../images/leftAndRight.png") left top no-repeat;/* transition:background 0.2s;*/}
.next{ left:auto; right:5%; background-position: -4rem -6rem; }
.prev:hover{ background-position: -4rem top; }
.next:hover{ background-position: left -6rem;}

#indexBanner:hover .next,#indexBanner:hover .prev{ display: inline-block;}
/*banner装饰*/
#decoration{ display: none;}


/*首页简介*/
#index_about{ background:url("../images/bg-logo.png") 76% -50px no-repeat; padding:2rem 5%; text-align: left; overflow: hidden;
    border-bottom: #d9e2e9 1px solid;
}
#index_about .indexTitl{ margin-bottom:3rem;}
#indexAbout{max-width:45%; min-width:500px; overflow:hidden; float:left;}

#index_about #datas{ min-width:550px; max-width:43%; float:right;}


/*首页产品系列*/
#index_proSeries{ padding:0 0 3rem 5%;}

/*首页我们的使命*/
#index_mission{ position: relative; overflow: hidden;}
#index_mission .image{ position: relative; width:100%; left:50%; margin-left:-960px;}
#index_mission .left{ position:absolute; left:5%; top:5.5rem;}
#index_mission .right{position:absolute; left:auto; right:5%; top:6.5rem;}

/*首页案例*/
#index_case{position: relative; padding:0 0 0 0; }
#index_case:before, #index_case:after{
    content:""; position: absolute; z-index: 6; left:0; top:0;
    display: inline-block; width:15%; height: 100%;
    background-image: linear-gradient(to right,#ffffff, rgba(255,255,255,0.6), rgba(255,255,255,0));
}
#index_case:after{
    left:auto; right:0;
    background-image:linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,0.6),#ffffff);
}
#indexCase{ margin:0 auto; width:100%; position: relative; z-index:5;}
#indexCase dl{
    float:left; overflow:hidden; position: relative; width:674px; margin:0 48px 0 0; padding:0; transition:background 0.4s;
}

#indexCase dt{width:100%; height:0; padding-bottom:60%; overflow:hidden; position: relative; border-radius:1rem;}
#indexCase dt img{width:100%; height:auto; vertical-align:bottom; transition:transform 0.4s;}
#indexCase dd{position: relative; padding:1.5rem 1rem 0 1rem; line-height:1.25rem; height:5.5rem; overflow: hidden; text-align: left; /*width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;*/ }
#indexCase dd:before,#indexCase dt:before{content:""; display: inline-block; width:3px; height:10px; background:#43abb1; position: absolute; left:1rem; top: 0; z-index: 2;}
#indexCase dt:before{top:auto; bottom:0; background:#fff;}
#indexCase dd b{display: block; max-height:2.5rem; overflow: hidden; margin-bottom:0.5rem; font-size:1rem; color:#134d77; transition: color 0.3s;}
#indexCase dd p{margin:0; padding: 0;font-size: 0.75rem; opacity: 0.5;}

/*#indexCase dl:hover{ box-shadow:rgba(0,0,0,0.24) 0 0 1rem; }*/
#indexCase dl:hover:after{right: 1rem; background-position: left -32px;}
#indexCase dl:hover dt img{transform: scale(1.06,1.06);}
#indexCase dl:hover dd b{color:#43abb1;}
/*首页案例--按钮*/
#case-prev, #case-next {
    position: absolute; z-index: 10; top:32%; transform: translateY(-50%);
    background-image: url("../images/arrow2.png"); background-repeat: no-repeat;
    width:4rem; height: 5rem; display: inline-block;
    cursor: pointer; transition: transform 0.3s;
}
#case-prev{  left:5%;  background-position: left top;}
#case-prev:hover{ background-position: right top; transform: translate(-15%,-50%)}
#case-next{ left:auto; right:5%;  background-position:left bottom;}
#case-next:hover{ background-position:right bottom; transform: translate(15%,-50%)}
/*#index_case:hover #case-next,#index_case:hover #case-prev{ display: inline-block;}*/



/*首页新闻头条*/
#index_newsCenter{
    margin:0 auto; background: url("../images/bg-wave.jpg") center top no-repeat;
    border-top: #d9e2e9 1px solid;
}
@media (max-width: 1600px) {
    #news dl:nth-child(4) {
        display: none;
    }
}
#news{ justify-content:space-around;}
#news dl:nth-child(2n+1){
    margin-top: 2rem;
}