@charset "utf-8";



#banner{width:100%; height:100%; position:fixed!important; z-index:1; left:0; top:0;}
#banner .swiper{ position: relative;z-index: 80; height: 100%;}
#banner .swiper-wrapper{z-index: inherit;}
#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 .video_mask{ position: absolute;z-index: 60; left: 0; top: 0; width: 100%;height: 100%; background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)); background-position: 50% 50%; background-size: cover;}
#banner .swiper-slide .video_play{ position: absolute;z-index: 600; left: 0; top: 0; width: 100%;height: 100%;background-image: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .5)); }
#banner .swiper-slide .video_play:after{ display: none; position: absolute; z-index: 50; left: 50%; top:50%; transform: translate(-50%,-50%); font-family: iconfont;  width: 90px; height: 90px; line-height: 90px; text-align: center;  color: #39a162;  font-size: 6rem; content: '\e7cd'; transition: all .35s;}
#banner .swiper-slide .video_play:before{ position: absolute;z-index: 12; left: 50%; top: 56%;transform: translate(-50%,-50%); color: rgba(255,255,255,.6); width: 80px; font-size: 1.1rem; text-align: center; height: 20px; line-height: 20px; content: 'Click to play'; transition: all .35s;}
#banner .swiper-slide .video_play.active{display: none;}
#banner .swiper-slide .video_play.active:after{display: none;}
#banner .swiper-slide .video_play.active:before{display: none;}
#banner .swiper-slide .banner_video{width: 100%;height:auto;position: absolute;left: 50%;top:50%; transform: translate(-50%,-50%); z-index: 0;}
#banner .swiper-slide .mob{display: none;}
#banner .swiper-slide img{object-fit: cover;height: auto;width: 100%;}
#banner .swiper-slide .info{ position: absolute;z-index: 90; top: 44%; left: 15%; text-align: left;}
#banner .swiper-slide .info>.drop{position: absolute;z-index: 1; left: -50px;top: -30px;width: 252px;height:100px; background: url("../img/banner_logo.png") no-repeat; background-size: auto 100%;opacity: .7;}
#banner .swiper-slide .info>.title{ position: relative; z-index: 10; font-size: 7rem; font-weight: bold; color: #fff; text-transform: capitalize; text-shadow: 0 2px 5px rgba(0,0,0,.2);}
#banner .swiper-slide .info>.title>span{color: #39a162;}
#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-slide .info.active{display: block;opacity: 1;}
#banner .swiper-slide .info.hide{display: none;}
#banner .swiper-slide .video_mask.active{background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .8));}

#banner .mouse { display: none; position: absolute;z-index:100; left: 50%; bottom: 40px; margin-left: -11px;  width: 22px;height: 32px;border: 1px solid #fff; border-radius: 40px; transition: all .35s;}
#banner .mouse:after { content: ""; position: absolute; width: 2px; height: 8px; top: 8px; left: 50%; margin-left: -1px; background: #fff; -webkit-animation: updown 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;animation: updown 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;}
#banner .mouse:before{ position: absolute;z-index: 1; left: 50%; bottom: -20px; margin-left: -25px; width: 50px; text-align: center; content: 'mouse'; text-transform: uppercase; font-size: 1rem; color: #fff;}
#banner .mouse:hover{ transform: translateY(-8px);}

#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: #39a162; }

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

@keyframes updown {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-3px);
        -moz-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        -o-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}



#space{height:100%;}
#main{position:relative; z-index:3; background: #fff;}

#main .theme{ font-size: 3.8rem; font-weight: 500;color: #333;margin: 0 auto;text-align: center;}


#main>.about{margin: 0 auto; padding:90px 0;overflow: hidden;}
#main>.about .wrap{max-width: inherit; width: 90%;}
#main>.about .introduce{margin: 0 auto; padding: 30px 0; background:#fff url("../img/main_about_map.png") no-repeat; background-position: 100% 0;}
#main>.about .introduce>.layout>.img{width: 50%;}
#main>.about .introduce>.layout>.img>img{width: 100%;height: auto; border-radius: 50px;}
#main>.about .introduce>.layout>.content{width: 50%; box-sizing: border-box;padding: 50px 130px 0 130px;text-align: left; }
#main>.about .introduce>.layout>.content>.theme{text-align: left;}
#main>.about .introduce>.layout>.content>.theme>span{display: inline-block; color: #39a162;}
#main>.about .introduce>.layout>.content>.slogan{ width: 80%; font-size: 1.7rem; color: #333; padding: 30px 0;}
#main>.about .introduce>.layout>.content>.slogan>span{display: inline-block; color: #39a162;}
#main>.about .introduce>.layout>.content>.intro{font-size: 1.5rem; line-height: 2.4rem; color: #666;}
#main>.about .introduce>.layout>.content>.more{padding-top: 50px; text-align: left;}
#main>.about .introduce>.layout>.content>.more>a{display: inline-flex; align-items: center; align-content: center; height: 56px; background: rgba(0,0,0,.06); border-radius: 50px; transition: all .35s;}
#main>.about .introduce>.layout>.content>.more>a>i{display: inline-flex; align-content: center; align-items: center; justify-content: center; font-size: 3.2rem; color: #fff; height: 56px; width: 56px; border-radius: 100%; background: #333; transform: rotate(-45deg); transition:all .35s; }
#main>.about .introduce>.layout>.content>.more>a>span{ display: inline-block; font-size: 1.6rem;padding: 0 40px 0 20px; transition: all .35s;}
#main>.about .introduce>.layout>.content>.more>a:hover{background: #39a162;color: #fff; box-shadow: -4px 2px 12px rgba(0,0,0,.1);}
#main>.about .introduce>.layout>.content>.more>a:hover>i{ transform: rotate(0deg); color: #39a162; background: #fff;}

#main>.about .statistics{padding: 50px 0;margin: 0 auto;}
#main>.about .statistics>.item{ position: relative; display: block; float: left; width: 25%; text-align: center; box-sizing: border-box;}
#main>.about .statistics>.item:after{position: absolute;z-index: 12; right: 0;top: 50%; transform: translateY(-50%); width: 1px;height: 60%; background: #ccc;content: '';}
#main>.about .statistics>.item:last-child:after{display: none;}
#main>.about .statistics>.item>.num{ font-size:6rem;  font-weight: bold; color: #333;}
#main>.about .statistics>.item>.num>span{display: inline-block; font-family: "Arial Black"!important;}
#main>.about .statistics>.item>.num>em{font-style: normal; font-size: 4rem;}
#main>.about .statistics>.item>.tit{font-size: 1.8rem; color: #333;}






#main>.products{margin: 0 auto; background: #f4f5f6; padding: 120px 0;}
#main>.products .wrap{max-width: inherit; width: 90%;}

#main>.products .container{margin: 0 auto;}
#main>.products .container>.navs{margin: 0 auto;width: 60%; padding: 50px 0;overflow: hidden;}
#main>.products .container>.navs>.navSwiper{ position: relative; width: 100%; height: 120px;}
#main>.products .container>.navs>.navSwiper .swiper-slide{position: relative; box-sizing: border-box;}
#main>.products .container>.navs>.navSwiper .swiper-slide>a{position: relative;display: flex; align-items: center; align-content: center; justify-content: center; background: #fff; border: 1px solid #ddd; border-radius: 50px; padding: 15px 20px; transition: all .35s;}
#main>.products .container>.navs>.navSwiper .swiper-slide>a i{ position: relative; display: inline-flex; align-items: center; align-content: center; transition:all .35s; }
#main>.products .container>.navs>.navSwiper .swiper-slide>a i>img{ position: relative;z-index: 30; height: 40px;width: auto; margin: 0 auto; transition: all .35s;}
#main>.products .container>.navs>.navSwiper .swiper-slide>a i>img:nth-child(2), #main>.products .container>.navs>.navSwiper .swiper-slide>a i>img:nth-child(3){display: none;}
#main>.products .container>.navs>.navSwiper .swiper-slide>a p{ display: inline-block;font-size: 1.8rem; font-weight: bold; margin-left: 20px; transition: all .35s; }
#main>.products .container>.navs>.navSwiper .swiper-slide>a:hover{ border-color: rgba(57,161,98,.4);}
#main>.products .container>.navs>.navSwiper .swiper-slide>a:hover p{ color: #39a162;}
#main>.products .container>.navs>.navSwiper .swiper-slide>a:hover i>img, #main>.products .container>.navs>.navSwiper .swiper-slide-thumb-active>a i>img{display: none;}
#main>.products .container>.navs>.navSwiper .swiper-slide>a:hover i>img:nth-child(2){display: block;}
#main>.products .container>.navs>.navSwiper .swiper-slide-thumb-active>a i>img:nth-child(1), #main>.products .container>.navs>.navSwiper .swiper-slide-thumb-active>a i>img:nth-child(2), #main>.products .container>.navs>.navSwiper .swiper-slide-thumb-active>a:hover i>img:nth-child(2){display: none;}
#main>.products .container>.navs>.navSwiper .swiper-slide-thumb-active>a i>img:nth-child(3){display: block;}
#main>.products .container>.navs>.navSwiper .swiper-slide-thumb-active>a{background: #39a162; border-color: #39a162;}
#main>.products .container>.navs>.navSwiper .swiper-slide-thumb-active>a p{color: #fff!important;}

#main>.products .container>.show{ margin: 0 auto;}
#main>.products .container>.show .showSwiper{position: relative; margin: 0 auto;}
#main>.products .container>.show .innerSwiper{margin: 0 auto;}
#main>.products .container>.show .innerSwiper>.swiper{ margin: 0 auto; padding: 30px 0;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-slide{  box-sizing: border-box;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a{ position: relative; width: 100%; overflow: hidden; padding: 50px; box-sizing: border-box; display: block; background: #fff; border-radius: 26px;box-shadow: 0 0 16px rgba(0,0,0,.06); transition: all .35s;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a:after{position: absolute;z-index: 1; left: 50%;top: 50%; width: 10px;height: 10px; border-radius: 100%; transform: translate(-50%,-50%); background: -webkit-linear-gradient(left bottom, rgba(57, 161, 98, .4) 0%, rgba(57, 161, 98, .1) 62.39%) ; opacity: 0; content: ''; transition: all .35s;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a:before{position: absolute;z-index: 2; right: -5%;top: -6%; width: 50%;height: 70%; border-radius: 100%; filter: blur(5px); transform:  rotate(10deg);  background: rgba(255,255,255,.6); opacity: 0; content: ''; transition: all .35s;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a .img{position: relative;z-index: 10; width: 100%; text-align: center;padding: 0;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a .img>img{width: 100%;height: auto;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a .title{position: relative;z-index: 12; font-size: 1.6rem; text-align: center; padding-top: 10px;  overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin: 0 auto;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a:hover:after{ opacity: 1; transform: translate(-50%,-50%) scale(50); filter: blur(2px);}
#main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a:hover:before{ opacity: 1; transform:  rotate(45deg) scale(1.2);  filter: blur(28px);}
#main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a:hover{ transform: translateY(-8px);}
#main>.products .container>.show .innerSwiper>.swiper .control{ position: absolute;z-index: 12; left: 0; top: 32%; width: 100%; transform: translateY(-50%); display: none;}
#main>.products .container>.show .innerSwiper>.swiper .control>.prev, #main>.products .container>.show .innerSwiper>.swiper .control>.next{ position: absolute;z-index: 12; left: 5px; display: inline-flex; align-content: center;align-items: center; justify-content: center; cursor: pointer; text-align: center; width: 60px; height: 60px;box-sizing: border-box; border-radius: 100%; background: rgba(0,0,0,.06); transition: all .35s;}
#main>.products .container>.show .innerSwiper>.swiper .control>.next{ left: auto; right: 5px;}
#main>.products .container>.show .innerSwiper>.swiper .control>.prev>i, #main>.products .container>.show .innerSwiper>.swiper .control>.next>i{font-size: 2.4rem;}
#main>.products .container>.show .innerSwiper>.swiper .control>.prev:hover, #main>.products .container>.show .innerSwiper>.swiper .control>.next:hover{background: #39a162; color: #fff;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-pagination{ position: relative; bottom: 0; padding-top: 50px;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-pagination .swiper-pagination-bullet{ width: 6px!important;height: 6px!important; border-radius: 10px!important;}
#main>.products .container>.show .innerSwiper>.swiper .swiper-pagination .swiper-pagination-bullet-active {background: #39a162!important;}







#main>.cases{margin: 0 auto;position: relative;}
#main>.cases .theme{position: absolute;z-index: 90; top: 120px; left: 50%; text-align: center; width: 50%; color: #fff; transform: translateX(-50%);}
#main>.cases .container{ width: 100%;height: 100%;margin: 0 auto;}
#main>.cases .container>.swiper{ position: absolute;z-index: 60; left: 50%; transform: translateX(-50%); width: 90%; height: 100%;}
#main>.cases .container>.swiper>.swiper-wrapper{ height: 100%;}
#main>.cases .container>.swiper .swiper-slide{ position: relative; height: 100%; box-sizing:border-box;transition: all .35s;}
#main>.cases .container>.swiper .swiper-slide:after{  position: absolute;z-index: 12; top: 0; left:0; width: 1px; height: 100%; background: rgba(255,255,255,.2); content: '';}
#main>.cases .container>.swiper .swiper-slide:before{ position: absolute;z-index: 12; top: 0; right:0; width: 1px; height: 100%; background: rgba(255,255,255,.2); content: '';}
#main>.cases .container>.swiper .swiper-slide>.box{ position: absolute;z-index: 123; display: block; left: 50%; top: 50%; margin-left: -40%; margin-top: -25%; width: 80%; height: 50%; text-align: center; transition: all .5s;}
#main>.cases .container>.swiper .swiper-slide>.box>.ico{text-align: center;}
#main>.cases .container>.swiper .swiper-slide>.box>.ico>img{height: 90px; width: auto;opacity: .7; transition: all .35s;}
#main>.cases .container>.swiper .swiper-slide>.box>.title{font-size: 2rem;color: #fff; padding-top: 30px; }
#main>.cases .container>.swiper .swiper-slide>.box>.view{ display: flex; justify-content: center; text-align: center;opacity: 0; margin: 0 auto; transform: translateY(100px); transition: all .35s;}
#main>.cases .container>.swiper .swiper-slide>.box>.view>a{ display:inline-flex; align-items: center; align-content: center; justify-content: center;  color: #fff;width: 50px;height: 50px; border-radius: 100%; transform: rotate(-45deg); border: 2px solid rgba(255,255,255,.7); transition: all .35s; }
#main>.cases .container>.swiper .swiper-slide>.box>.view>a>i{font-size: 2.4rem;}
#main>.cases .container>.swiper .swiper-slide>.box>.view>a:hover{background: #fff; color: #39a162;}
#main>.cases .container>.swiper .swiper-slide:hover{background: rgba(57,161,98,.7);}
#main>.cases .container>.swiper .swiper-slide:hover .box{transform: translateY(-30px);}
#main>.cases .container>.swiper .swiper-slide:hover .box>.ico>img{opacity: 1;}
#main>.cases .container>.swiper .swiper-slide:hover .box>.view{transform: translateY(60px);opacity: 1;}
#main>.cases .bg{position: relative;background: #000; width: 100%; height: 100%; }
#main>.cases .bg>img{width: 100%;height: auto;opacity: .4; object-fit: cover;}



#main>.company{ display: none; margin: 0 auto;}
#main>.company .wrap{max-width: inherit; width: 90%;}
#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:#d70d19; 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: 120px 0; background: rgba(57,161,98,.06);}
#main>.navigation .wrap{max-width: inherit; width: 84%;}
#main>.navigation .item{ position: relative; float: left; width: 22.75%; margin-right: 3%; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,0.06); border-radius: 20px;overflow: hidden; transition: all .35s;}
#main>.navigation .item:nth-child(4n){margin-right: 0;}
#main>.navigation .item>a{ position: relative; z-index: 50; display: block; padding: 50px 0; text-transform: capitalize; text-align: center;}
#main>.navigation .item>a .img{display: none;}
#main>.navigation .item>a .ico{ padding: 20px 0; color: #39a162; transition: all .35s;}
#main>.navigation .item>a .ico>i{font-size: 6rem; font-weight: 100;}
#main>.navigation .item>a .title{font-size: 2rem; font-weight: bold; color: #333; transition: all .35s;}
#main>.navigation .item:hover{ transform: scale(1.05);}






@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)
    }
}


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

    #main>.about .introduce>.layout>.content>.slogan{ width: 100%;}

}

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

    #main .theme{font-size: 3.6rem;}
    #main>.about .introduce>.layout>.content {padding-right: 80px}

}

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

    #banner .swiper-slide .info>.title{ font-size: 5.6rem;}


    #main>.about .introduce>.layout>.content {padding-right: 30px; padding-top: 30px;}



}

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

    #banner{ height:86%;}
    #space { height: 86%;}





    #main .theme{font-size: 3.2rem;}

    #main>.about .introduce>.layout>.content {padding-right:20px; padding-top: 20px;}
    #main>.about .introduce>.layout>.content>.more{padding-top: 40px;}
    #main>.about .introduce>.layout>.content>.more>a{height: 50px;}
    #main>.about .introduce>.layout>.content>.more>a>i{font-size: 3rem; height: 50px; width: 50px;}
    #main>.about .introduce>.layout>.content>.more>a>span{  font-size: 1.5rem;}


    #main>.products .container>.navs { width: 70%; }


}

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

    #banner .swiper-slide .info>.title {font-size: 4.6rem; }
    #banner .swiper-slide .info>.sub { font-size: 2rem; }

    #banner{ height:76%;}
    #space { height: 76%;}





    #main>.about .statistics>.item>.num { font-size: 5rem;}
    #main>.about .introduce>.layout>.content{padding-right: 0;}
    #main>.about .introduce>.layout>.content>.more{padding-top: 30px;}
    #main>.about .introduce>.layout>.content>.more>a{height: 46px;}
    #main>.about .introduce>.layout>.content>.more>a>i{font-size: 2.8rem; height: 46px; width: 46px;}
    #main>.about .introduce>.layout>.content>.more>a>span{  font-size: 1.4rem;}

    #main>.products .container>.navs { width: 76%;}

    #main>.cases .container>.swiper .swiper-slide>.box>.ico>img{height: 70px; }
    #main>.cases .container>.swiper .swiper-slide>.box>.title { font-size: 1.8rem;}

    #main>.navigation .item>a .title {  font-size: 1.8rem; }
}


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

    #banner .swiper-slide .info>.title {font-size: 4rem; }
    #banner .swiper-slide .info>.sub { font-size: 1.8rem; }






    #main .theme { font-size: 2.8rem;}

    #main>.about .introduce>.layout>.content { padding-left: 80px; }
    #main>.about .introduce>.layout>.content>.slogan { font-size: 1.6rem; padding: 25px 0; }

    #main>.about .statistics>.item>.num { font-size: 4.2rem;}


}

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


    #banner{ height: 70%}
    #banner .swiper-slide .info>.drop {height: 80px; top: -25px;}
    #banner .swiper-slide .info>.title {font-size: 3.6rem; }
    #banner .swiper-slide .info>.sub { font-size: 1.6rem; }
    #banner .swiper-slide img{height: 100%;width: auto;}

    #space{height:70%;}

    #main>.about .introduce{ background-position: 100% 0; background-size: 60% auto;}
    #main>.about .introduce>.layout>.img{width: 100%;float: none;}
    #main>.about .introduce>.layout>.content{width: 100%; float: none;padding: 0 0 50px 0; }
    #main>.about .introduce>.layout>.content>.slogan { width: 60%; }
    #main>.about .introduce>.layout>.content>.intro { font-size: 1.4rem; line-height: 2.2rem;}

    #main>.products .container>.navs{width: 80%; }
    #main>.products .container>.navs>.navSwiper{ height: auto;}
    #main>.products .container>.navs>.navSwiper .swiper-slide>a{ padding: 12px 20px;}
    #main>.products .container>.navs>.navSwiper .swiper-slide>a i>img{ height: 32px;}
    #main>.products .container>.navs>.navSwiper .swiper-slide>a p{ font-size: 1.7rem;}




    #main>.cases { height: 600px;}
    #main>.cases .bg>img{ height: 100%; width: auto;}

}


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

    #banner .swiper-slide .info>.drop{height:70px;}
    #banner .swiper-slide .info>.title {font-size: 3.6rem; }
    #banner .swiper-slide .info>.sub { font-size: 1.6rem; }

    #main>.about .statistics { padding: 30px 0;}
    #main>.about .statistics>.item>.num { font-size: 3.6rem;}
    #main>.about .statistics>.item>.num>em { font-size: 3rem; }
    #main>.about .statistics>.item>.tit { font-size: 1.6rem;}

    #main>.products .container>.navs{ width: 100%;}


    #main>.cases .container>.swiper .swiper-slide>.box>.ico>img { height: 60px;}
    #main>.cases .container>.swiper .swiper-slide>.box>.title { font-size: 1.6rem;}

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

}

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


    #banner{ height: 100% !important;}
    #banner .swiper-slide .mob{display: inline-block; width: auto;height: 100%; object-fit: cover;}
    #banner .swiper-slide .video_mask{ background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(57, 161, 98, .7)); }
    #banner .mouse{display: block;}

    #space{height:100%;}



    #main>.about {padding: 80px 0;}
    #main>.about .statistics>.item>.tit { font-size: 1.4rem;}

    #main>.products { padding: 80px 0; }
    #main>.products .container>.navs>.navSwiper .swiper-slide>a p { font-size: 1.6rem; margin-left: 10px;}
    #main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a .title {font-size: 1.4rem; }


    #main>.cases .theme{top: 80px;}
    #main>.cases .container>.swiper .swiper-slide>.box>.view>a{ width: 40px;height: 40px; }
    #main>.cases .container>.swiper .swiper-slide>.box>.view>a>i{font-size: 2rem;}


    #main>.navigation { padding: 80px 0;}
    #main>.navigation .item{  width: 47%; margin-right: 0; margin-bottom: 6%;}




}


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

    #banner .swiper-slide .info>.drop{height:60px;}
    #banner .swiper-slide .info>.title {font-size: 3rem; }
    #banner .swiper-slide .info>.sub { font-size: 1.4rem; }



    #main>.about .introduce>.layout>.content>.slogan {  width: 80%; }
    #main>.about .introduce>.layout>.content>.more>a{height: 40px;}
    #main>.about .introduce>.layout>.content>.more>a>i{font-size: 2.4rem; height: 40px; width: 40px;}
    #main>.about .introduce>.layout>.content>.more>a>span{  font-size: 1.2rem;}
    #main>.about .statistics>.item>.num { font-size: 3rem;}


    #main>.products .container>.navs>.navSwiper .swiper-slide>a{padding: 10px; }
    #main>.products .container>.navs>.navSwiper .swiper-slide>a i>img{ height: 28px;}
    #main>.products .container>.navs>.navSwiper .swiper-slide>a p{font-size: 1.4rem; }

    #main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a { padding: 30px; }



    #main>.navigation .item>a .ico>i { font-size: 5rem;}
    #main>.navigation .item>a .title {  font-size: 1.6rem; }

}


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

    #banner .swiper-slide .video_play:after{display: inline-block;}



    #main .theme{font-size: 2.4rem;}


    #main>.about {padding: 50px 0;}
    #main>.about .introduce>.layout>.content>.slogan { width: 100%; font-size: 1.4rem;}
    #main>.about .introduce>.layout>.img>img {border-radius: 30px; }
    #main>.about .statistics{padding: 20px;}
    #main>.about .statistics>.item{ width: 50%; margin: 0; padding: 15px 0;}
    #main>.about .statistics>.item:after{height: 100%;}
    #main>.about .statistics>.item:before{position: absolute;z-index: 12; left: 50%;bottom: 0; transform: translateX(-50%); width: 100%;height: 1px; background: #ccc;content: '';}
    #main>.about .statistics>.item:nth-child(2n):after{display: none;}
    #main>.about .statistics>.item:last-child:before, #main>.about .statistics>.item:nth-last-child(2):before{display: none;}


    #main>.products { padding: 50px 0; }
    #main>.products .container>.navs{ width: 90%; padding: 20px 0;}
    #main>.products .container>.show .innerSwiper>.swiper .swiper-slide>a { padding: 20px; }


    #main>.cases{ height: 420px;}
    #main>.cases .theme{top: 50px;}
    #main>.cases .container>.swiper .swiper-slide>.box{margin-top: -10%; height: 50%}
    #main>.cases .container>.swiper .swiper-slide>.box>.ico>img { height: 42px;}
    #main>.cases .container>.swiper .swiper-slide>.box>.view>a{ width: 32px;height: 32px; }
    #main>.cases .container>.swiper .swiper-slide>.box>.view>a>i{font-size: 1.8rem;}
    #main>.cases .container>.swiper .swiper-slide>.box>.title { font-size: 1.4rem;}


    #main>.navigation { padding:50px 0;}
    #main>.navigation .item>a {  padding: 25px 0; }
    #main>.navigation .item>a .ico>i { font-size: 4rem;}
    #main>.navigation .item>a .title {  font-size: 1.4rem; }

}

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


    #banner .swiper-slide .info>.drop{ left: 0; top:-10px; height:40px;}
    #banner .swiper-slide .info>.title {font-size: 2.4rem; }
    #banner .swiper-slide .info>.sub { font-size: 1.2rem; }

    #main>.products .container>.navs>.navSwiper .swiper-slide>a i>img{ height: 20px;}
    #main>.cases{ height: 320px;}

}