@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;left:50%; margin-left:500px; top:auto;bottom:2rem; width:120px; text-align:right; color:#fff; text-shadow:0 0 1rem rgba(0,0,0,0.16); white-space:nowrap; transform:scale(0.8,1); font-weight: lighter;
    font-family: sans-serif;}
.banner-pagination b{display: inline-block; font-size:1.4rem; font-weight: normal; position: relative; bottom:-2px;}
.banner-pagination span{ display:inline-block; border-top:rgba(255,255,255,0.4) 1px solid; position: relative;  margin-right: 1rem; top:0.1rem; font-size: 0; line-height: 0; padding:0 0.25rem;}
.banner-pagination i{display: inline-block; width:0.5rem; height:0.5rem; overflow: hidden; border-radius:50%;  background:#fff; margin:0 0.25rem; position: relative; transform: translateY(-50%);  }
.banner-pagination i.active{ background:#ffe100;}

.next,.prev{display:none;  font-size:1.5rem; width:4rem; height:2rem; line-height:2rem;  text-align: center; position: absolute; left:-4px; top:50%; margin-top:-1rem; z-index: 10; cursor: hand; cursor: pointer;  background-color:rgba(0,0,0,0.75); background-color:#242424\9; border-radius:4px; transform:skewX(-8deg);}
.next:hover,.prev:hover{ background:#5ea472;}
.next{ left:auto; right:-4px; }
.prev:after,.next:after{content:"";display:inline-block; width:4rem; height:2rem;background:url("../images/arrow.png") center top no-repeat;}
.next:after{background-position:center -2rem;}
#indexBanner:hover .next,#indexBanner:hover .prev{ display: inline-block;}
/*banner装饰*/
#decoration{ width:90%; height:1rem; font-size: 0; line-height: 0; overflow: hidden; background:rgba(241,199,31,0.4); transform:skewX(-16deg); position: absolute; left: 0; right:0; margin: 0 auto; top:auto; bottom: 0; z-index: 30; border-radius: 2px 2px 0 0;}
#decoration:after{ content:""; display: inline-block; width:90%; height: 100%; background:rgba(241,199,31,1); border-radius:2px 2px 0 0;}



/*首页简介*/
#index_about{ background:url("../images/bg-about.jpg") right 10px no-repeat #f9fcf9; padding:0; overflow: hidden;}
#index_about > *{z-index:8}
#indexAbout-hexagon{ position: absolute; left:auto; right:calc(50% + 368px); top:-14rem; z-index:2;}

#indexAbout{ line-height:2em; max-height:17em; overflow:hidden; margin-bottom:2.5rem; text-align:justify;}
#indexAbout p{padding:0; margin:0 0 1em 0;}
#indexAboutPic{ margin-right: 6rem; padding:12px 0 12px 12px; position: relative; font-size: 0; line-height: 0; }
#indexAboutPic:before{ content:""; position: absolute; left:0; top:0; display:inline-block; width:50%; height: 100%; background: #9ccd9e; border-radius:6px;}
#indexAboutPic:after{ content:""; position: absolute;  display:inline-block; left:20%; top:0; height:100%; width:50%; background: #9ccd9e; border-radius:6px; transform: skewX(24deg)}
#indexAboutPic img{position: relative; max-width: 540px; height: auto; border-radius:6px; z-index: 10;}

/*首页-我们的优势*/
#index_advantages{ background:url("../images/bg-advantage.jpg") center bottom no-repeat #f9fcf9; padding:1px 0 0 0; position: relative; z-index: 1; }

#advantages{ min-height:620px; background: url("../images/advantage.png") center -30px no-repeat; position: relative;}
#advantages > dl{position: absolute; text-align: center; line-height: 1.5em; margin:0; width:256px; display: inline-block; top: 343px; left:230px; transform: translateX(-50%);}
#advantages > dl dt{font-size:18px; font-weight: bold; padding-bottom:0.75rem;}
#advantages > dl dd{opacity: 0.6; }
dl#advantages2{ left:452px; top: 460px;}
dl#advantages3{ left:674px; }
dl#advantages4{ left:896px; top: 460px;}

/*首页-应用领域*/
#index_field{ background: url("../images/bg-field.jpg") center bottom no-repeat; min-height: 600px; padding-top:6rem;}
#field_left{ float:left; width:640px; }
#field_left img{ max-width: 100%; height: auto; }
#field_right{ float:right; width:460px;}

/*首页产品展示_标题&系列*/
#indexPro_titl{ padding:1.5rem 0 0.5rem 0;}
#indexPro_titl dl{display: inline-block; float:left; position: relative; line-height:1.5em; margin:0;}
#indexPro_titl dl dt,#indexPro_titl dl dd{float:left; margin:0 0.5rem 0 0; }
#indexPro_titl dl dd b{font-size: 2rem; top: 0.25rem; position: relative; }
#indexPro_titl dl dd span{ font-size:0.75rem; opacity:0.5; filter:alpha(opacity=50); text-transform: uppercase; letter-spacing:6px; }

#indexPro_series{max-width: 60%; float:right;}
#indexPro_series a{ color:#89949e; padding:0 1rem;position: relative; display: inline-block;}
#indexPro_series a:hover{color:#5ea472;}
#indexPro_series a:after{content:"";display: inline-block; width: 1px; height:30%; top:35%; position: absolute; left: 0; background:#eaecef;}
#indexPro_series a:first-child:after{display: none;}