#banner{width:100%; height:100%; position:fixed!important; z-index:1; left:0; top:0;overflow: hidden;}
#banner .swiper{ position: relative;z-index: 80;height:100%;}
#banner .swiper-wrapper{height:100%;}
#banner .swiper-slide{width: 100%; height:100%;overflow: hidden;position: relative;background-position: center top;background-size: cover;}
#banner .swiper-slide.swiper-slide-active img{animation: ring 2s infinite; animation-iteration-count:1;}
#banner .swiper-slide .info{ position: absolute;z-index: 50; top: 44%; left: 15%; text-align: left;}
#banner .swiper-slide .info>.drop{position: absolute;z-index: 1; left: -30px;top: 0;width: 60px;height:60px; background: #42a73f;}
#banner .swiper-slide .info>.tit{ position: relative; z-index: 10; font-size: 7rem; font-weight: bold; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.2);}
#banner .swiper-slide .info>.sub{ position: relative;z-index: 10; padding-top: 8px; font-size: 2.4rem;color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.2);}

#banner .swiper-slide .tr{text-align: right; left: auto; right: 15%;}
#banner .swiper-pagination{ z-index: 80; width:10px!important;left: auto; right:50px!important;text-align: center;bottom:50%!important;}
#banner .swiper-pagination-bullet{width:12px;height:12px;background-color:#fff;margin-bottom: 12px!important; opacity: .8; transition: all .3s;}
#banner .swiper-pagination-bullet-active,.swiper-pagination-bullet-active{opacity: 1; background: #42a73f; }




@keyframes ring {
    0% {
        transform: scale(1.1);
    }
    to {
        transform: scale(1);
    }
}




#space{height:100%; background: #fff;}
#main{position:relative; z-index:3; background: #fff;}
#main>.about{margin: 0 auto;background:#fff url("../image/main_about.jpg") no-repeat; background-position: left bottom; padding:120px 0;}
#main>.about .left{width: 50%;}
#main>.about .right{width: 50%;}
#main>.about .content{text-align: left; font-size: 1.6rem; line-height: 2.8rem; color: #333;}
#main>.about .title{text-align: left;}
#main>.about .title>h3{font-size: 4rem; font-weight: bold; color: #18181b;}
#main>.about .title>span{display: block;padding-top: 10px;letter-spacing: .2rem; font-size: 1.8rem; color: #999;}
#main>.about .title>span>img{opacity: .2}
#main>.about .more{margin-top: 50px;}
#main>.about .more>a{ display: block; position: relative; overflow: hidden; text-align: center; box-sizing: border-box; width: 160px; height: 48px; line-height: 48px; border-radius: 3px; background-color: #42a73f;color: rgba(255,255,255,1); font-size: 1.6rem;border: 1px solid #42a73f; transition: all .35s;}
#main>.about .more>a:before {content: ""; position: absolute; display: block; transition: all .6s; width: 100%; height: 0; border-radius: 50%;left: 50%; top: 50%;padding-top: 100%; transform: translateX(-50%) translateY(-50%);}
#main>.about .more>a>span{position: relative;z-index: 10;}
#main>.about .more>a:hover{background: #fff; color: #42a73f;}
#main>.about .more>a:hover:before { animation: btnstyle .75s; z-index: 1;}

#main>.product{margin: 0 auto;}
#main>.product .items{height: 650px;; margin: 0 auto;}
#main>.product .items>.focus{position: relative; float: left; width: 50%; height: 100%;overflow: hidden;}
#main>.product .items>.focus .swiper{width:100%; height:100%; transition:all .5s;}
#main>.product .items>.focus .swiper .swiper-slide{background-position: 50% 50%; background-size: cover;}
#main>.product .items>.focus .swiper .swiper-slide:after{content:''; display:block; position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.35); transition:all .3s; z-index:1;}
#main>.product .items>.focus .swiper .swiper-slide img{display: none;}
#main>.product .items>.focus:hover .swiper{transform:scale(1.08);}
#main>.product .items>.focus:hover .swiper .swiper-slide:after{opacity:0;}
#main>.product .items>.focus:hover:after{background:rgba(0,0,0,.1);}
#main>.product .items>.focus .swiper-pagination{width:100%; bottom:35px; z-index:2; text-align:center;}
#main>.product .items>.focus .swiper-pagination-bullet{width:8px; height:8px; margin:0 7px; opacity:.6; background:#fff; transition:all .25s;}
#main>.product .items>.focus .swiper-pagination-bullet-active{width:22px; opacity:1; border-radius:100px; background:#42a73f;}
#main>.product .items>.focus .more{ position: absolute;z-index: 50; right: 0; bottom: 0;}
#main>.product .items>.focus .more>a{display: block; width: 90px;height: 90px; line-height: 90px;text-align: center; background: rgba(66,167,63,.7); border-radius: 8px 0 0 0; font-size: 6rem; color: #fff; transition: all .35s;}
#main>.product .items>.focus .more>a:before {content: ""; position: absolute; display: block; transition: all .6s; width: 100%; height: 0; border-radius: 50%;left: 50%; top: 50%;padding-top: 100%; transform: translateX(-50%) translateY(-50%);}
#main>.product .items>.focus .more>a>span{position: relative;z-index: 10;}
#main>.product .items>.focus .more>a:hover{background: #fff; color: #42a73f;}
#main>.product .items>.focus .more>a:hover:before { animation: btnstyle .75s; z-index: 1;}
#main>.product .items>.content{ float: right; width: 50%; height: 100%;background:#f4f5f6;box-sizing:border-box; padding: 85px 155px;}
#main>.product .items>.content>.title{font-size:4.6rem; font-weight:bold; color: #18181b; position:relative;}
#main>.product .items>.content>.intro{ margin-top: 30px; text-align: left; font-size: 1.6rem; font-weight: 300; color: #666; line-height: 2.8rem;}
#main>.product .items>.content>.box{display: block;margin-top: 50px;}
#main>.product .items>.content>.box>a{ position: relative; display: inline-flex; float: left;width: 48.5%; margin-bottom: 20px; box-sizing: border-box; overflow: hidden;padding: 0 10px; background: #fff; border-radius: 3px; justify-content: flex-start; align-items: center; transition: all .35s;}
#main>.product .items>.content>.box>a:nth-child(even){ float: right;}
#main>.product .items>.content>.box>a:before{content:''; display:block; position:absolute; width:200px; height:200px; background:rgba(255,255,255,.0); transform:rotate(45deg); left:-80px; top:-100px; transition:all .45s ease;}
#main>.product .items>.content>.box>a>img{display: inline-block; height: 60px; width: auto; margin-right: 20px;transition: all .35s;}
#main>.product .items>.content>.box>a>p{display: inline-block; font-size: 1.6rem; color: #666; transition: all .35s;}
#main>.product .items>.content>.box>a:hover{background: #42a73f; box-shadow: 0 1px 6px rgba(0,0,0,.2);}
#main>.product .items>.content>.box>a:hover img{margin-left: 5px;}
#main>.product .items>.content>.box>a:hover p{color: #fff;}
#main>.product .items>.content>.box>a:hover:before{left:-30px; background:rgba(255,255,255,.16);}
#main>.product .items:nth-child(even)>.focus{float: right;}
#main>.product .items:nth-child(even)>.focus>.more{right: auto;left: 0;}
#main>.product .items:nth-child(even)>.focus>.more>a{border-radius: 0 8px 0 0;}
#main>.product .items:nth-child(even)>.content{float: left;}



#main>.case{margin: 0 auto;background:#fff; padding:160px 0;}
#main>.case .wrap{max-width: inherit; width: 84%;}
#main>.case .left{width: 20%;}
#main>.case .right{width: 80%; position: relative;}
#main>.case .title{text-align: left; position: relative; padding-bottom: 20px;}
#main>.case .title:after{position: absolute; left: 0;bottom: 0;width: 60px;height: 1px; background: #ddd;content: '';}
#main>.case .title>h3{font-size: 4rem; font-weight: bold; color: #18181b;}
#main>.case .title>span{display: block;font-size: 3.2rem; padding-bottom: 10px; color: rgba(169,169,169,1);}
#main>.case .more{margin-top: 50px;}
#main>.case .more>a{ display: block; position: relative; overflow: hidden; text-align: center; box-sizing: border-box; width: 160px; height: 48px; line-height: 48px; border-radius: 3px; background-color: #42a73f;color: rgba(255,255,255,1); font-size: 1.6rem;border: 1px solid #42a73f; transition: all .35s;}
#main>.case .more>a:before {content: ""; position: absolute; display: block; transition: all .6s; width: 100%; height: 0; border-radius: 50%;left: 50%; top: 50%;padding-top: 100%; transform: translateX(-50%) translateY(-50%);}
#main>.case .more>a>span{position: relative;z-index: 10;}
#main>.case .more>a:hover{background: #fff; color: #42a73f;}
#main>.case .more>a:hover:before { animation: btnstyle .75s; z-index: 1;}
#main>.case .button{padding-top: 20px; text-align: right}
#main>.case .button>.arrow-prev, #main>.case .button>.arrow-next{ display: inline-block; margin-left: 5px; width: 36px;height: 36px; line-height: 34px;color: #999;cursor: pointer; text-align: center; font-weight: bold; border: 2px solid #999; border-radius: 100%; transition: all .35s;}
#main>.case .button>.arrow-prev>i, #main>.case .button>.arrow-next>i{font-size: 1.8rem; }
#main>.case .button>.arrow-prev:hover, #main>.case .button>.arrow-next:hover{border-color: #42a73f; color: #42a73f;}
#main>.case .button>.pagination{display: inline-block; width: auto!important; bottom: 0; line-height: 36px;font-size: 1.4rem; color:#999;  margin: 0 20px;}
#main>.case .button .swiper-button-disabled{border-color: #eee!important; color: #eee!important;}
#main>.case .swiper{display: block;}
#main>.case .swiper .swiper-slide{padding: 10px 0;}
#main>.case .swiper .swiper-slide>a{display: block;border-bottom: 1px solid #ddd; transition: all .35s;}
#main>.case .swiper .swiper-slide>a .img{text-align: left;}
#main>.case .swiper .swiper-slide>a .img>img{width: 100%;height: auto;}
#main>.case .swiper .swiper-slide>a .box{padding: 20px 0;}
#main>.case .swiper .swiper-slide>a .box>.tit{ font-size: 1.6rem; color: #18181b; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#main>.case .swiper .swiper-slide>a .box>.view{font-size: 1.3rem; color: #ccc; padding-top: 10px;}
#main>.case .swiper .swiper-slide>a:hover{ transform: translateY(-10px);}
#main>.case .swiper .swiper-slide>a:hover .box>.tit{color: #42a73f;}

#main .title{position: relative;z-index:10;}
#main .title>span{ position: relative; display: block; font-size: 4.8rem; font-family: Arial; font-weight: bold; text-transform: uppercase;color: rgba(66,167,63,1); background-image:-webkit-linear-gradient(right bottom,rgba(66,167,63,1),rgba(66,167,63,1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
#main .title>h3{display: block; font-size: 2.3rem; color: #333;font-weight: normal;}
#main>.news{height: 100%; background: url("../image/main_news_bg.jpg") no-repeat; background-size: cover; background-position: 50% 50%;}
#main>.news .title{padding-top: 100px; text-align: center;}
#main>.news .container{margin: 0 auto; padding: 50px 0;}
#main>.news .container .swiper-wrapper{padding: 20px 0;}
#main>.news .container .swiper-slide{display: block; overflow: hidden;  transition: all .35s;}
#main>.news .container .swiper-slide>a{ overflow: hidden; transition: all .35s;}
#main>.news .container .swiper-slide>a>.img{ position: relative; text-align: center;overflow: hidden;}
#main>.news .container .swiper-slide>a>.img>img{width: 100%;height: auto;transition: all 1.3s;}
#main>.news .container .swiper-slide>a>.img>span{position: absolute;z-index: 20; left: 20px;bottom: 0;width: auto;padding: 8px 20px;font-size: 1.6rem; color: #fff; background: rgba(66,167,63,.7);}
#main>.news .container .swiper-slide>a>.box{text-align: left;padding: 30px 20px; height: 190px; box-sizing: border-box; transition: all .35s;}
#main>.news .container .swiper-slide>a>.box>.time{font-size: 1.4rem; color: #999;}
#main>.news .container .swiper-slide>a>.box>.tit{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; margin: 10px 0; transition: all .35s;}
#main>.news .container .swiper-slide>a>.box>.tit>span{font-size:1.8rem; font-weight:700; color:#333; width: calc(100%);background-image: linear-gradient(transparent calc(100% - 1px), #229ea6 1px);background-repeat: no-repeat;background-size: 0 100%;transition: background-size 0.3s;}
#main>.news .container .swiper-slide>a>.box>.txt{font-size: 1.6rem; color: #999; line-height: 2.4rem; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; }
#main>.news .container .swiper-slide>a:hover .img>img{transform: scale(1.1);}
#main>.news .container .swiper-slide>a:hover .box>.tit>span{color: rgba(66,167,63,1);background-size: 100% 100%;}
#main>.news .container .swiper-slide:hover{ transform: translateY(-10px); background: rgba(255,255,255,.8); box-shadow: 0 0 3px rgba(0,0,0,.1);}
#main>.news .container .button{ position: absolute;z-index: 100; left: 50%;/*bottom: 50px;*/ margin-left: -25%; width: 50%; text-align: center; }
#main>.news .container .button>a{display: inline-block; vertical-align: top; width: 46px; text-align: center; height: 46px; line-height: 46px; }
#main>.news .container .button>a.more{ width: auto; padding: 0 30px; font-size: 1.6rem; color: rgba(66,167,63,1);transition: all .35s;}
#main>.news .container .button>a.prev>i, #main>.news .container .button>a.next>i{ font-size: 2.4rem; color: #ccc; transition: all .35s;}
#main>.news .container .button>a.prev:hover i, #main>.news .container .button>a.next:hover i{color: rgba(66,167,63,1);}
#main>.news .container .button>a:hover{ background: #eee; border-radius: 10px;}


#m4{height:800px; background:url('../image/m4.jpg') no-repeat center; background-size:cover; background-color:#fff; position:relative; z-index:3; padding:80px 55px;}
#m4 .tit{color:#464646; font-size:4.6rem; letter-spacing:normal; font-weight:bold; position:relative; padding-left:100px;}
#m4 .tit:before{content:''; display:block; height:4px; width:48px; background:#1885f5; position:absolute; left:100px; bottom:-30px;}

#m4 .wrap{overflow:hidden; height:580px; position:relative; margin-top:60px; padding:0 50px;}
#m4 .swiper-container{width:100%; height:100%; padding:50px; box-sizing:border-box;}
#m4 .swiper-slide{height:480px; transition:600ms; transform:scale(0.88); background:rgba(0,0,0,.03);}
#m4 .swiper-slide>a{display:block; width:100%; height:100%; transition:all .3s;}
#m4 .swiper-slide-active, #m4 .swiper-slide-duplicate-active{transform:scale(1); background:#fff; box-shadow:10px 10px 30px rgba(0,0,0,.1);}
#m4 .swiper-slide .img{height:300px; overflow:hidden; background-size:cover; background-position:center;}
#m4 .swiper-slide .title{font-size:1.9rem; color:#464646; padding:35px 32px 0 32px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:all .25s;}
#m4 .swiper-slide .desc{font-size:1.5rem; line-height:1.6; padding:10px 32px; height:42px; color:#999; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; transition:all .25s;}
#m4 .swiper-slide .date{color:#ccc; font-size:1.4rem; padding:5px 32px; transition:all .25s;}
#m4 .swiper-slide .date i{display:inline-block; margin-right:.5rem; font-size:1.4rem;}
#m4 .swiper-slide>a:hover{background:#1885f5;}
#m4 .swiper-slide>a:hover p{color:#fff;}
#m4 .swiper-slide>a:hover .date{color:rgba(255,255,255,.5);}

#m4 .ctrl{padding-left:96px;}
#m4 .next, #m4 .prev{display:inline-block;}
#m4 .prev{transform:scaleX(-1); margin-right:5px;}
#m4 .next i, #m4 .prev i{font-size:3.6rem; color:#464646; transition:all .2s;}
#m4 .next:hover i, #m4 .prev:hover i{color:#1885f5;}

@media (max-width:1680px){
  #m4{padding:80px 25px;}
}
@media (max-width:1440px){
  #m4{padding:70px 0;}
}
@media (max-width:1366px){
  #m4 .tit{padding-left:80px;}
  #m4 .tit:before{left:80px;}
  #m4 .wrap{padding:0 35px;}

  #m4 .ctrl{padding-left:80px;}
}
@media (max-width:1280px){
  #m4{height:760px;}
  #m4 .wrap{margin-top:45px;}
  #m4 .swiper-slide .img{height:265px;}
}
@media (max-width:1080px){
  #m4{height:auto; padding:40px 0;}
  #m4 .tit{font-size:3.2rem; padding-left:20px;}
  #m4 .tit:before{height:3px; width:33px; left:20px; bottom:-20px;}

  #m4 .wrap{height:auto; margin-top:0px; padding:0 0 20px 0;}
  #m4 .swiper-container{width:100%; height:100%; padding:20px 20px 30px 20px; box-sizing:border-box; margin-top:50px;}
  #m4 .swiper-slide{width:100%; height:450px; transition:600ms; transform:scale(1); box-shadow:10px 10px 30px rgba(0,0,0,.1);}

  #m4 .ctrl{padding-left:0; text-align:center; margin-top:0px; padding-bottom:30px;}
}

#main>.company{margin: 0 auto;}
#main>.company .strength{height:450px; position:relative; z-index:3; background:#fff;}
#main>.company .strength>.title{width:38%; float:left; background:#18181b; height:100%; padding:80px 155px; box-sizing:border-box;}
#main>.company .strength>.title .tit{color:#fff; font-size:4.6rem; font-weight:bold; letter-spacing:normal; position:relative;}
#main>.company .strength>.title .tit:before{content:''; display:block; height:1px; width:60px; background:#fff; position:absolute; left:0; bottom:-30px;}
#main>.company .strength>.title .desc{color:#fff; font-size:1.6rem; margin-top:60px; font-weight:300; line-height:1.7;}
#main>.company .strength>.center{width:40%; height:100%; float:left; position:relative; overflow:hidden;}
#main>.company .strength>.center .img{width:100%; height:100%; background-position:center; background-size:cover; transition:all .5s ease;}
#main>.company .strength>.center:hover .img{transform:scale(1.08);}
#main>.company .strength>.center:after{content:''; display:block; width:100%; height:100%; position:absolute; z-index:1; background:rgba(0,0,0,.4); left:0; bottom:0; transition:all .4s ease; opacity:0;}
#main>.company .strength>.center:hover:after{opacity:1;}
#main>.company .strength>.center .txt{color:#fff; font-size:1.6rem; width:100%; height:50px; position:absolute; z-index:2; left:0; bottom:20px; padding:0 30px 0 52px; box-sizing:border-box; transition:all .3s ease; opacity:0;}
#main>.company .strength>.center .txt:after{content:''; display:block; width:1rem; height:1rem; position:absolute; z-index:1; background:#fff; left:30px; top:5px;}
#main>.company .strength>.center:hover .txt{opacity:1; bottom:0;}
#main>.company .strength>.right{width:22%; height:100%; float:left; position:relative; overflow:hidden;}
#main>.company .strength>.right .img{width:100%; height:100%; background-position:center; background-size:cover; transition:all .5s ease;}
#main>.company .strength>.right:hover .img{transform:scale(1.08);}
#main>.company .strength>.right:after{content:''; display:block; width:100%; height:100%; position:absolute; z-index:1; background:rgba(0,0,0,.4); left:0; top:0; transition:all .4s ease; opacity:0;}
#main>.company .strength>.right:hover:after{opacity:1;}
#main>.company .strength>.right .txt{color:#fff; font-size:1.6rem; width:100%; height:50px; position:absolute; z-index:2; left:0; bottom:20px; padding:0 30px 0 52px; box-sizing:border-box; transition:all .3s ease; opacity:0;}
#main>.company .strength>.right .txt:after{content:''; display:block; width:1rem; height:1rem; position:absolute; z-index:1; background:#fff; left:30px; top:5px;}
#main>.company .strength>.right:hover .txt{opacity:1; bottom:0;}
#main>.company .inspect{height:450px; position:relative; z-index:3; background:#fff;}
#main>.company .inspect>.left{width:38%; height:100%; float:left; position:relative; overflow:hidden;}
#main>.company .inspect>.left .img{width:100%; height:100%; background-position:center; background-size:cover; transition:all .5s ease;}
#main>.company .inspect>.left:hover .img{transform:scale(1.08);}
#main>.company .inspect>.left:after{content:''; display:block; width:100%; height:100%; position:absolute; z-index:1; background:rgba(0,0,0,.4); left:0; top:0; transition:all .4s ease; opacity:0;}
#main>.company .inspect>.left:hover:after{opacity:1;}
#main>.company .inspect>.left .txt{color:#fff; font-size:1.6rem; width:100%; height:50px; position:absolute; z-index:2; left:0; bottom:20px; padding:0 30px 0 52px; box-sizing:border-box; transition:all .3s ease; opacity:0;}
#main>.company .inspect>.left .txt:after{content:''; display:block; width:1rem; height:1rem; position:absolute; z-index:1; background:#fff; left:30px; top:5px;}
#main>.company .inspect>.left:hover .txt{opacity:1; bottom:0;}
#main>.company .inspect>.center{width:22%; height:100%; float:left; background:#42a73f; color:#fff; padding:60px; box-sizing:border-box; overflow:hidden;}
#main>.company .inspect>.center p{margin-bottom:20px; font-size:1.5rem; font-weight:300; line-height:1.7;}
#main>.company .inspect>.center div{padding-top:30px; padding-bottom:40px;}
#main>.company .inspect>.center div>i{font-size:15rem; margin-left:-10px;}
#main>.company .inspect>.right{width:40%; height:100%; float:left; position:relative; overflow:hidden;}
#main>.company .inspect>.right .img{width:100%; height:100%; background-position:center; background-size:cover; transition:all .5s ease;}
#main>.company .inspect>.right:hover .img{transform:scale(1.08);}
#main>.company .inspect>.right:after{content:''; display:block; width:100%; height:100%; position:absolute; z-index:1; background:rgba(0,0,0,.4); left:0; top:0; transition:all .4s ease; opacity:0;}
#main>.company .inspect>.right:hover:after{opacity:1;}
#main>.company .inspect>.right .txt{color:#fff; font-size:1.6rem; width:100%; height:50px; position:absolute; z-index:2; left:0; bottom:20px; padding:0 30px 0 52px; box-sizing:border-box; transition:all .3s ease; opacity:0;}
#main>.company .inspect>.right .txt:after{content:''; display:block; width:1rem; height:1rem; position:absolute; z-index:1; background:#fff; left:30px; top:5px;}
#main>.company .inspect>.right:hover .txt{opacity:1; bottom:0;}



#main>.navigation{margin: 0 auto; padding: 80px 0;}
#main>.navigation .wrap{max-width: inherit; width: 84%;}
#main>.navigation .item{ position: relative; float: left; width: 22.75%; height: 340px; margin-right: 3%; background-size: cover; background-position: 50% 50%;}
#main>.navigation .item:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.6); content: ''; transition: all .35s;}
#main>.navigation .item:nth-child(4n){margin-right: 0;}
#main>.navigation .item>a{ position: relative; z-index: 50; display: block; width: 100%; height: 100%; text-align: center;}
#main>.navigation .item>a .ico{ padding: 100px 0 15px 0; color: #fff; transition: all .35s;}
#main>.navigation .item>a .ico>i{font-size: 6rem; font-weight: 100;}
#main>.navigation .item>a .tit{font-size: 2rem; font-weight: bold; color: #fff; transition: all .35s;}
#main>.navigation .item:hover:after{opacity: .5;}
#main>.navigation .item:hover .ico{transform: translateY(-8px);}
#main>.navigation .item:hover .tit{transform: translateY(-8px);}


@media only screen and (max-width: 1680px){

    #banner{height: auto;}

}


@media only screen and (max-width: 1460px){


    #banner .swiper-slide .info>.drop{width: 56px;height:56px; }
    #banner .swiper-slide .info>.tit{ font-size: 6rem;}
    #banner .swiper-slide .info>.sub{font-size: 2.2rem;}




    #main>.product .items>.content{ padding: 70px 120px;}
    #main>.product .items>.content>.title{font-size: 4rem;}
    #main>.product .items>.content>.intro{font-size: 1.5rem;}
    #main>.product .items>.content>.box>a>p{font-size: 1.5rem;}


    #main>.company .strength>.title { padding: 70px 120px;}
    #main>.company .strength>.title .tit { font-size: 4rem; }
    #main>.company .strength>.title .desc { font-size: 1.5rem; }

}

@media only screen and (max-width: 1380px){

    #banner .swiper-slide .info>.drop{width: 50px;height:50px; }
    #banner .swiper-slide .info>.tit{ font-size: 5rem;}
    #banner .swiper-slide .info>.sub{font-size: 2rem;}



    #main>.product .items>.content{ padding:50px 80px;}
    #main>.product .items>.content>.intro{font-size: 1.4rem; line-height: 2.4rem;}
    #main>.product .items>.content>.box>a>p{font-size: 1.4rem;}
    #main>.case .right {width: 76%;}
    #main>.navigation .item {height: 280px;}
    #main>.company .strength>.title { padding: 50px 80px;}

}


@media only screen and (max-width: 1280px){

    #banner .swiper-slide .info>.drop{width: 45px;height:45px; }
    #banner .swiper-slide .info>.tit{ font-size: 4rem;}
    #banner .swiper-slide .info>.sub{font-size: 1.8rem;}

    #main>.about .title>h3 {font-size: 3.6rem;}
    #main>.about .title>span>img { width: 70%; }
    #main>.case .right {width: 70%;}


}



@media only screen and (max-width: 1080px){



    #banner .swiper-slide .info>.drop{width: 40px;height:40px; }
    #banner .swiper-slide .info>.tit{ font-size: 3.6rem;}




    #main>.about .left { position: relative; width: 100%; float: none;}
    #main>.about .right { width: 100%; float: none; padding-top: 30px;}
    #main>.about .title>h3 {font-size: 3rem;}
    #main>.about .title>span>img { width: auto; }
    #main>.about .more>a{ width: 120px; height: 40px; line-height: 40px;font-size: 1.4rem;}


    #main>.product .items{height: auto;}
    #main>.product .items>.focus{float: none; width: 100%; height: 320px;}
    #main>.product .items>.content{ float: none; width: 100%;height: auto; }
    #main>.product .items>.content>.title{font-size: 3rem;}
    #main>.product .items:nth-child(even)>.focus>.more{right: 0;left: auto;}
    #main>.product .items:nth-child(even)>.focus>.more>a{border-radius: 8px 0 0 0;}

    #main>.case .left{ position: relative; float: none; width: 100%;}
    #main>.case .right{ float: none; width: 100%; padding-top: 50px;}
    #main>.case .title>span {font-size: 2.4rem; }
    #main>.case .title>h3 {font-size: 3rem;}
    #main>.case .more{position: absolute;z-index: 10; right: 0; top: 0;}
    #main>.case .more>a{ width: 120px; height: 40px; line-height: 40px;font-size: 1.4rem;}



    #main>.company .strength{height: auto;}
    #main>.company .strength>.title {  width: 100%;  float: none; height: auto; clear: both; }
    #main>.company .strength>.title .tit { font-size: 3rem; }
    #main>.company .strength>.center { width: 60%; height: 200px;  }
    #main>.company .strength>.right { width: 40%; height: 200px; }
    #main>.company .inspect { height: auto; }
    #main>.company .inspect>.left { width: 100%; height: 400px;float: none; clear: both;  }
    #main>.company .inspect>.center {width: 40%;height: 200px;float: right; padding: 20px 50px;}
    #main>.company .inspect>.center div {padding: 10px 0;}
    #main>.company .inspect>.center div>i {font-size: 6rem;}
    #main>.company .inspect>.right { width: 60%; height: 200px; }



    #main>.navigation .item {width: 48.5%; margin-right: 0; margin-bottom: 3%;}
    #main>.navigation .item:nth-child(even){float: right;}



}

@media only screen and (max-width: 860px){

    #banner .swiper-slide .info { top: 56%; width: 60%; }
    #banner .swiper-slide .info>.tit{ font-size: 3rem;}
    #banner .swiper-slide .info>.sub{font-size: 1.6rem;}

    #banner .swiper-pagination{ right: 30px!important; bottom:20%!important;}
    #banner .swiper-pagination-bullet{width:10px;height:10px;}


    #main>.about { padding: 80px 0; }
    #main>.product .items>.content { padding: 50px 60px;}
    #main>.product .items>.focus .more>a{width: 60px;height: 60px; line-height: 60px;font-size: 4rem;}

    #main>.case { padding: 80px 0;}

    #main>.company .inspect>.left { height: 300px;}
    #main>.company .inspect>.center p { font-size: 1.3rem;line-height: 1.6; }



}

@media only screen and (max-width: 640px){

    #banner { height: 360px;}
    #banner .swiper-slide .tr{text-align: left; left: 15%; right: auto;}
    #banner .swiper-slide img{display: none;}
    #banner .swiper-slide .info>.tit{ font-size: 2rem; text-align: left;}
    #banner .swiper-slide .info>.sub{font-size: 1.4rem;}



    #main>.about {padding: 50px 0;}
    #main>.about .title>h3 {font-size: 2.4rem;}
    #main>.about .content {  font-size: 1.4rem;line-height: 2.4rem; }

    #main>.product .items>.content { padding: 50px;}
    #main>.product .items>.content>.title{font-size: 2.4rem;}
    #main>.product .items>.content>.box>a>img {  height: 40px; margin-right: 6px;}

    #main>.company .strength>.title .tit { font-size: 2.4rem; }
    #main>.company .strength>.center { width: 50%; }
    #main>.company .strength>.right { width: 50%}
    #main>.company .inspect>.center {width: 50%;}
    #main>.company .inspect>.right { width: 50%; }


    #main>.case .title>h3 {font-size: 2.4rem;}

    #main>.navigation .item {height: 200px;}
    #main>.navigation .item>a .ico {padding:70px 0 10px 0;}
    #main>.navigation .item>a .ico>i { font-size: 5rem;}
    #main>.navigation .item>a .tit {font-size: 1.8rem; }


}


@media only screen and (max-width: 520px){


    #banner .swiper-slide .info>.drop{ left: -20px; width: 30px;height: 30px;}
    #banner .swiper-slide .info>.sub{ padding-top: 4px; font-size: 1.3rem;}

    #main>.about {padding: 30px 0;}
    #main>.about .more { margin-top: 20px; }

    #main>.company .strength>.title {padding: 30px; }
    #main>.company .inspect>.center {padding: 20px 30px;}
    #main>.company .inspect>.center div>i {font-size: 4rem;}
    #main>.product .items>.content { padding: 30px;}

    #main>.case { padding: 30px 0; }

    #main>.navigation { padding: 50px 0;}
    #main>.navigation .item{ float: none;display: block; width: 100%; height: 180px;}
    #main>.navigation .item:nth-child(even){float: none;}
    #main>.navigation .item>a .ico {padding:50px 0 10px 0;}



}





@keyframes btnstyle {
    0% {
        background: rgba(0, 0, 0, .25);
        transform: translateX(-50%) translateY(-50%) scale(0)
    }
    to {
        background: 0 0;
        transform: translateX(-50%) translateY(-50%) scale(1)
    }
}


.ind-proH{background-color:#f5f5f5;padding: 30px 0; text-align: center; }
.proHnav{ width:calc(100% + 20px);margin-left:-10px; }
.proHnav li{float: left;width: 11.1%;margin-bottom:15px;box-sizing: border-box;padding:0 10px;}
.proHnav li a{display: block;width: 100%;text-align: center;position:relative;background-color: #fff;padding-bottom:30px;}
.proHnav li .img{width: 100%;}
.proHnav li .img img{width:100%;opacity: .8; transition: all .35s;}
.proHnav li p{width: 100%;font-size: 15px; text-align: center;line-height:30px; position: absolute;left: 0;bottom: 0;box-sizing: border-box;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;padding: 0 10px;background-color: rgba(255,255,255,.6);}
.proHnav li a:hover .img img{opacity: 1;}
.proHnav li a:hover{transform: translateY(-5px);box-shadow:0 15px 20px rgba(0,0,0,.1);}

.ind-tit{}
.ind-tit h3{font-size:3.4rem;letter-spacing: 1px; color: #333;}
.ind-tit p.t2{font-size:1.6rem;color:#999;text-transform:uppercase;margin-top:8px;}
.more2{color:#ff7900;display:block;margin-top: 15px;}
.more2 .iconfont{display: inline-block; transform:translateY(2px);}
.more2:hover{text-decoration:underline;}

.ind-pro{padding:100px 0;position: relative;}
.ind-pro .prohd .ind-tit{float: left;}
.ind-pro .prohd .pro-pagination{float:right;}

.pro-pagination{ height: 32px;vertical-align: middle;margin-top:25px;}
.pro-pagination .swiper-pagination-bullet{width:32px;height:8px;margin-right:6px;border-radius:0;background-color: #ddd;opacity:1;transform:skewX(-30deg);}
.pro-pagination .swiper-pagination-bullet-active{background-color:#009999;}


.probox{position: relative;overflow: hidden;margin-top:40px;}
.probox .swiper-pro .swiper-slide{padding: 20px 0;}
.probox .swiper-pro .swiper-slide a{display: block;width: 100%;height: 100%;position: relative; background-color: #f5f5f5; border-radius: 50px 0 50px 0; box-shadow: 0 4px 12px rgba(0,0,0,.2); overflow:hidden; }
.probox .swiper-pro .swiper-slide .img{width: 100%;position: relative;z-index: 9;overflow: hidden;}
.probox .swiper-pro .swiper-slide .img:after{position: absolute;z-index: 3;left: 0;top: 0; width: 100%;height: 100%; opacity: 0; background:rgba(0,0,0,.54) url("../images/icon-zoom.png") no-repeat; background-position: 50% 50%; content: ''; transition: all .35s;}
.probox .swiper-pro .swiper-slide .img img{max-width: 100%;transition: all .8s;}
.probox .swiper-pro .swiper-slide .con{padding: 15px;}
.probox .swiper-pro .swiper-slide .name{width: 100%;font-size: 1.6rem;color: #333;font-weight: bold;}
.probox .swiper-pro .swiper-slide .name::before{content: " ";display: block;width:25px;height:2px;background-color:#009999;margin-bottom: 15px;transition: all .3s;transform:skewX(-30deg);}
.probox .swiper-pro .swiper-slide .more{margin-top: 10px;font-size: 1.2rem;line-height: 180%;color: #888;overflow: hidden;}
.probox .swiper-pro .swiper-slide .more .iconfont{display: inline-block; transform:translateY(2px);}

.probox .swiper-pro .swiper-slide a:hover{background-color:#009999;}
.probox .swiper-pro .swiper-slide a:hover .name,.probox .swiper-pro .swiper-slide a:hover .more{color:#fff;}
.probox .swiper-pro .swiper-slide a:hover .name::before{width: 100%;background-color:#e9603b;}
.probox .swiper-pro .swiper-slide a:hover .img img{opacity: .6;}
.probox .swiper-pro .swiper-slide a:hover .img:after{opacity: 1;}

.more1{display:inline-block; border: 1px solid #009999;line-height: 40px;color: #fff;font-size:1.2rem;padding: 0 22px;text-align: center;text-transform: uppercase;background-color: #009999; transition: all .3s;position: relative;}
.more1 span{display: inline-block;transition: all .3s;}
.more1::before{display: block;content: " ";width: 100%;height: 100%;position: absolute;left: 0;top: 0;border: 1px solid #009999;transition: all .3s;}
.more1:hover::before{border: 3px solid #009999;left: -8px;top: -8px;}
.more1:hover{background-color: #009999;color: #fff;}
.more1:hover span{transform: translate(-6px,-6px);}

.ind-app{height:450px;background-color:#f5f5f5;position: relative;overflow: hidden;}
.ind-app .app-fl{width: 20%;float: left; background-color: #009999;height: 100%;color:#fff;padding:60px 30px 0 60px;box-sizing: border-box;position: relative;z-index: 9;}
.ind-app .app-fl h3{font-size: 3.4rem;}
.ind-app .app-fl .t1{font-size:18px;color: #fff;margin-top: 10px;text-transform:uppercase;font-weight: bold;}
.ind-app .app-fl .t1::after{content: " ";display: block;width:25px;height:3px;background-color:#fff;margin-bottom: 15px;transition: all .3s;margin-top: 15px;}

.ind-app .app-fl .t2{font-size:12px;color: rgba(255,255,255,.6);margin-top:30px;line-height: 180%;}
.app-btn{margin-top: 30px;}
.app-button-prev,.app-button-next{display: block;float: left;width:40px;height:40px;text-align: center;line-height: 40px; background-color: #fff;cursor: pointer;color: #009999;overflow: hidden;border-radius: 100%;transition: all .3s;outline: none;}
.app-button-next{margin-left: 15px;}
.app-btn .swiper-button-disabled{opacity: .3;}

.swiper-app{width: 80%;float: right;position: relative;z-index: 5;}
.swiper-app .swiper-slide a{display:block;width: 100%;height: 100%; position: relative;overflow: hidden;}
.swiper-app .swiper-slide a::before{content: " ";display: block;width:15px;height:100%;position: absolute;left: 0;top: 0;z-index:20; background-image: linear-gradient(to right, rgba(0,0,0,.1), rgba(0,0,0,0));}
.swiper-app .swiper-slide a .con{display:block;height: 150px; padding:40px 0 20px 40px;box-sizing:border-box;}
.swiper-app .swiper-slide a .con h3{font-size: 20px; color: #333;}
.swiper-app .swiper-slide a .con p{font-size:14px;color: #999; text-transform:uppercase;margin-top: 10px;}
.swiper-app .swiper-slide a .con::after{content: " ";display: block;width:25px;height:3px;background-color:#333;margin-bottom: 15px;transition: all .3s;margin-top: 15px;}
.swiper-app .swiper-slide a .more{position: absolute;z-index: 50; left: 40px; bottom: 0; opacity: 0; transition: all .35s;}
.swiper-app .swiper-slide a .more span{border: 1px solid rgba(255,255,255,.8); border-radius: 5px; display:inline-block;padding: 10px 20px; font-size: 12px; color: #fff;}
.swiper-app .swiper-slide a .img{height: 300px;overflow: hidden;position: relative;z-index: 5;}
.swiper-app .swiper-slide a .img img{width: 100%; height: auto; transition: all .7s;}
.swiper-app .swiper-slide a .img:after{content: " ";display: block;width: 100%;height: 100%;background-color: rgba(0,0,0,.6);position: absolute;left:0;bottom:-310px;transition: all .3s;}
.swiper-app .swiper-slide a:hover .img:after{bottom: 0;}
.swiper-app .swiper-slide a:hover .img img{transform:scale(1.1)}
.swiper-app .swiper-slide a:hover .con h3{color: #009999;}
.swiper-app .swiper-slide a:hover .more{bottom: 50px;opacity: 1;}



.ind-about{padding:100px 0 120px 0;height: 600px;}
.ind-about .wrap86{position: relative;height: 600px;}

.ind-about .abimgbox{width:70%;height: 600px;max-width:1000px;position: absolute;left: 0;top: 0;z-index: 5;}
.ind-about .abimgbox .swiper-abimg{width: 100%;height: 100%;overflow: hidden;border-radius: 10px;}
.ind-about .abimgbox .swiper-abimg img{border-radius:10px;}
.ind-about .abimgbox .swiper-pagination{text-align: left;padding-left:30px;bottom: auto;top:30px;}
.ind-about .abimgbox .swiper-pagination-bullet {width:12px; height: 12px;background-color:#ff7900;}

.ind-about .abo-con{width:40%;float: right;padding: 50px;background-color: #fff;box-shadow: 0 0px 30px rgba(0,0,0,.3);position: absolute;;z-index: 9;right: 0;bottom:-30px;}
.ind-about .abo-con .tit{font-size: 3rem;border-bottom: 1px solid #eee;position: relative;padding-bottom:30px;}
.ind-about .abo-con .tit::after{content: " ";display: block;width:80px;height:3px;background-color:#009999;transition: all .3s;margin-top: 15px;position: absolute;left:0;bottom:-2px;}



.ind-about .abo-con .con{font-size: 1.4rem;line-height: 200%;color: #777;margin-top: 30px;}
.ind-about .abo-con .more1{margin-top: 30px;}

.ind-video{width: 86%; height: 700px;background-color: #333;margin: auto;padding: 50px;margin-bottom: 40px;border-radius: 10px;overflow: hidden;box-sizing: border-box;}
.ind-video iframe{width: 100%;height: 100%;}