@charset "utf-8";
/* CSS Document */





/*banner */
#banner{position:relative;background:#fff; height:auto; overflow:hidden; transition:all .35s;}
#banner .swiper-container{width:100%; height:100%;}
#banner .swiper-slide{ width:100%; height:100%; overflow:hidden; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
#banner .swiper-slide img{max-width:100%;}
#banner .swiper-slide img.mob{display: none;}
#banner .swiper-slide .mc{ position: absolute;z-index: 98;left: 50%;top: 32%; margin-left: -35%; width: 70%; text-align: center;}
#banner .swiper-slide .mc>.tit{ position: relative; padding: 20px 0; font-size: 5rem; color: #fff; font-weight: bold; background-image:-webkit-linear-gradient(right bottom,#ffffff,#3aa9ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
#banner .swiper-slide .mc>.tit:after{position: absolute;z-index: 3; left: 50%;bottom: 0; margin-left: -60px; width: 120px;height: 2px; background: rgba(1,64,153,1); background:linear-gradient(to right bottom,#3aa9ff,#ffffff); content: '';}
#banner .swiper-slide .mc>.txt{ width: 80%; margin: 0 auto; padding: 30px; font-size: 1.6rem; line-height: 2.8rem; color: rgba(255,255,255,1);}
#banner .swiper-slide .mc>.more{display: block;margin: 0 auto;}
#banner .swiper-slide .mc>.more>a{position: relative; display: inline-block; width: 120px;height: 40px; border-radius: 30px; border: 1px solid rgba(255,255,255,1); transition: all .35s;}
#banner .swiper-slide .mc>.more>a:after{ position: absolute;  z-index: 3; left: 50%;top: 50%; margin-left: -3px;margin-top: -6px; width: 0; height: 0; border-top: 6px solid transparent; border-left: 12px solid rgba(255,255,255,1); border-bottom: 6px solid transparent;content: '';}
#banner .swiper-slide .mc>.more>a:hover{ border: 0; background: rgba(1,64,153,.7);}
#banner .swiper-pagination{ bottom:50px;}
#banner .swiper-pagination-bullet{width:80px; height:2px; background:#ddd; margin: 0 10px; border-radius: 0; border:0; opacity:1; transition:all .2s;}
#banner .swiper-pagination-bullet:hover{opacity:.5;}
#banner .swiper-pagination-bullet-active{background:rgba(1,64,153,1); opacity:1 !important;}


/* end*/



/*main */
#main{margin: 0 auto;}
#main .wrap{ width: 86%;margin: 0 auto; max-width: inherit;}
#main .title{text-align: left;padding: 30px 0;}
#main .title>i{display: block;font-size: 1.8rem; font-weight: bold; color: #888;}
#main .title>h3{display: block;font-size: 3.6rem; font-weight: normal; color: rgba(1,64,153,1); }


#main>.product{margin: 0 auto;padding: 80px 0;}
#main>.product .container{ position: relative; margin: 0 auto;}
#main>.product .container .swiper-button{}
#main>.product .container .swiper-button>div{ position: absolute; top: 50%; z-index: 4; display: inline-block; margin-top: -30px; height: 60px; line-height: 60px; text-align: center; width: 40px; background: #ccc; opacity: .3; cursor: pointer;  transition: all .35s;}
#main>.product .container .swiper-button>div>i{font-size: 2.4rem; color: rgba(1,64,153,.6);transition: all .35s;}
#main>.product .container .swiper-button>div.prev{left: 0;}
#main>.product .container .swiper-button>div.next{right: 0;}
#main>.product .container .swiper-button>div:hover{opacity: 1; background: rgba(1,64,153,1);}
#main>.product .container .swiper-button>div:hover i{color: rgba(255,255,255,1);}
#main>.product .container .swiper-button .swiper-button-disabled{opacity: .1;}
#main>.product .container .swiper-container{width: 80%;margin: 0 auto;}
#main>.product .container .swiper-container .swiper-wrapper{ transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;}
#main>.product .container .swiper-slide>a{display: block; transition: all .8s;}
#main>.product .container .swiper-slide>a>.img{ width:40%; text-align: left;}
#main>.product .container .swiper-slide>a>.img>img{width: 100%;height: auto;}
#main>.product .container .swiper-slide>a>.box{ width: 50%; text-align: left;box-sizing: border-box;padding-top:10%;}
#main>.product .container .swiper-slide>a>.box>.tit{font-size: 3.6rem; color: rgba(78,78,78,1);transition: all .35s;}
#main>.product .container .swiper-slide>a>.box>.subtit{padding: 20px 0; font-size: 1.6rem; color: rgba(142,142,142,1);transition: all .35s;}
#main>.product .container .swiper-slide>a>.box>.more{ text-align:left; padding-top: 20px;}
#main>.product .container .swiper-slide>a>.box>.more>span{display: inline-block; background: rgba(1,64,153,1); border: 1px solid rgba(1,64,153,1);  padding: 10px 30px; font-size: 1.4rem; color: rgba(255,255,255,1); transition: all .35s;}
#main>.product .container .swiper-slide>a>.box>.more>span>i{ display: inline-block; margin-left: 20px; font-family: 'SimSun'; font-style: normal; font-size: 1.6rem;}
#main>.product .container .swiper-slide>a>.box>.more>span:hover{ background: rgba(255,255,255,1); color: rgba(1,64,153,1);}

#main>.solution{ position: relative; margin: 0 auto;}
#main>.solution>.title{position: absolute;z-index: 9; left: 7%;top: 30px;}
#main>.solution>.title>h3{color:rgba(255,255,255,1);}
#main>.solution .container{ position: relative; margin: 0 auto;}
#main>.solution .container:after{position: absolute;z-index: 3;  left: 0;top: 0; width: 100%;height: 100%;background: rgba(0,0,0,.3);content: '';}
#main>.solution .container>.box{ position: absolute;z-index: 9; top: 30%; left: 50%; margin-left: -25%; width: 50%; text-align: center;}
#main>.solution .container>.box>.tit{font-size: 3.6rem; color: rgba(255,255,255,1);}
#main>.solution .container>.box>.txt{ margin: 20px 0; font-size: 1.6rem; line-height: 2.8rem; color: rgba(255,255,255,1);}
#main>.solution .container>.nav{ position: absolute;z-index: 9; bottom: 8%; left: 50%; margin-left: -25%; width: 50%; text-align: center;}
#main>.solution .container>.nav>ul{margin: 0 auto;}
#main>.solution .container>.nav>ul>li{display: block;float:left;width: 25%; box-sizing: border-box;padding: 20px;}
#main>.solution .container>.nav>ul>li>a{display: block;  background: rgba(255,255,255,.2); transition: all .35s;}
#main>.solution .container>.nav>ul>li.active>a{background-color: rgba(1,64,153,1);background:linear-gradient(to right bottom,rgba(56,168,255,1),rgba(1,64,153,1));}
#main>.solution .container>.nav>ul>li>a>.ico{ text-align: center;padding-top:20px;}
#main>.solution .container>.nav>ul>li>a>.ico>img{width: 80px;height: auto;}
#main>.solution .container>.nav>ul>li>a>.name{ padding: 10px 0 20px 0; font-size: 1.4rem; color: rgba(255,255,255,.8);}
#main>.solution .container>.nav>ul>li>a:hover{transform:scale(1.2); box-shadow: 0 1px 5px rgba(0,0,0,.2);}
#main>.solution .container>.bg{position:absolute; z-index:1; left:0; top:0; width:100%;height:100%;opacity:1; background-size:cover; transition:all .5s;}

#main>.about{margin: 0 auto;padding: 80px 0;background: url("../img/main_about_bg.jpg") no-repeat; background-size: cover; background-position: left bottom;}
#main>.about .container{ position: relative; margin: 0 auto;padding: 20px 0;}
#main>.about .container .box{width: 50%; text-align: left;}
#main>.about .container .box>.tit{font-size: 2.4rem; color: rgba(50,50,50,1);}
#main>.about .container .box>.txt{ margin:20px 0;font-size: 1.4rem; line-height: 2.4rem; color: rgba(102,102,102,1); height: 170px; overflow: hidden;}
#main>.about .container .box>.txt>p{margin-bottom: 15px;}
#main>.about .container .box>.more{ text-align:left; padding-top: 20px;}
#main>.about .container .box>.more>a{display: inline-block; background: rgba(1,64,153,1); border: 1px solid rgba(1,64,153,1);  padding: 10px 30px; font-size: 1.4rem; color: rgba(255,255,255,1); transition: all .35s;}
#main>.about .container .box>.more>a>i{ display: inline-block; margin-left: 20px; font-family: 'SimSun'; font-style: normal; font-size: 1.6rem;}
#main>.about .container .box>.more>a:hover{ background: rgba(255,255,255,1); color: rgba(1,64,153,1);}
#main>.about .container .statistics{ position: absolute;z-index: 8; right: 0; bottom: -80px;}
#main>.about .container .statistics>ul{margin: 0;}
#main>.about .container .statistics>ul>li{display: inline-block;float:left; width:180px; height: 150px; text-align: center; }
#main>.about .container .statistics>ul>li:nth-child(1){background:rgba(1,64,153,1);}
#main>.about .container .statistics>ul>li:nth-child(2){background:rgba(51,129,189,1);}
#main>.about .container .statistics>ul>li:nth-child(3){background:rgba(92,154,202,1);}
#main>.about .container .statistics>ul>li>h3{ display: block; margin: 25px auto 0 auto ;font-size: 5.6rem; font-weight: normal; font-family: Arial; color: rgba(255,255,255,1);}
#main>.about .container .statistics>ul>li>p{ display: block;padding: 5px 0; color: rgba(255,255,255,.9);font-size: 1.4rem;}


#main>.news{margin: 0 auto;padding: 80px 0; background: #f7f7f7;}
#main>.news .container{ position: relative; margin: 0 auto;}
#main>.news .container .swiper-button{ position: absolute;z-index: 9; right: 0;top: -70px;}
#main>.news .container .swiper-button>div{display: inline-block; margin-left: 10px; border: 2px solid rgba(87,87,87,1); height: 38px; line-height: 38px; padding:0 20px; opacity: .3; cursor: pointer; transition: all .35s;}
#main>.news .container .swiper-button>div>i{font-size: 2rem; color: #333;}
#main>.news .container .swiper-button>div:hover{ border: 2px solid rgba(1,64,153,1); opacity: .6;}
#main>.news .container .swiper-button>div:hover i{color: rgba(1,64,153,1);}
#main>.news .container .swiper-button .swiper-button-disabled{opacity: .1;}
#main>.news .container .swiper-slide{padding: 20px 0;}
#main>.news .container .swiper-slide>a{display: block; transition: all .8s;}
#main>.news .container .swiper-slide>a>.img{ position: relative; text-align: center;margin: 0 auto;}
#main>.news .container .swiper-slide>a>.img:after{position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%; background: rgba(1,64,153,.6);  content: ''; opacity: 0; transition: all .35s;}
#main>.news .container .swiper-slide>a>.img:before{ position: absolute;z-index: 3;left: 0;top: 0; width: 100%;text-align: center; font-family: iconfont; font-size: 3.6rem; color: rgba(255,255,255,1); opacity: 0; content: '\e866'; transition: all .35s;}
#main>.news .container .swiper-slide>a>.img>img{width: 100%;height: auto; transition: all 1s;}
#main>.news .container .swiper-slide>a>.box{position: relative; text-align: left;box-sizing: border-box;padding: 25px; background: #fff;overflow: hidden;}
#main>.news .container .swiper-slide>a>.box>.tit{font-size: 2rem; color: #333;overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#main>.news .container .swiper-slide>a>.box>.txt{ margin: 10px auto; font-size: 1.4rem; 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>.box>.time{font-size: 1.4rem; color: #ccc;}
#main>.news .container .swiper-slide>a:hover{box-shadow:2px 2px 6px rgba(0,0,0,.1);}
#main>.news .container .swiper-slide>a:hover .box>.tit{color:rgba(1,64,153,1);}
#main>.news .container .swiper-slide>a:hover .img:after{opacity: 1; }
#main>.news .container .swiper-slide>a:hover .img:before{opacity: 1;top: 45%; }

#main>.hr{ background: url("../img/main_hr_bg.jpg") no-repeat; background-attachment: fixed; background-position: 50% 50%; height: 350px;margin: 0 auto;}
#main>.hr .box{ padding-top: 80px;}
#main>.hr .box>.tit{font-size: 3.6rem; color: rgba(255,255,255,1);}
#main>.hr .box>.txt{padding: 20px 0; font-size: 1.8rem; color: rgba(255,255,255,.8); }
#main>.hr .box>.more{ text-align:left; padding-top: 20px;}
#main>.hr .box>.more>a{display: inline-block; background: transparent; border: 1px solid rgba(255,255,255,1);  padding: 10px 30px; font-size: 1.4rem; color: rgba(255,255,255,1); transition: all .35s;}
#main>.hr .box>.more>a>i{ display: inline-block; margin-left: 20px; font-family: 'SimSun'; font-style: normal; font-size: 1.6rem;}
#main>.hr .box>.more>a:hover{ border: 1px solid rgba(1,64,153,1); background: rgba(1,64,153,1); color: rgba(255,255,255,1);}


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

    #main>.about .container .box>.txt{ height: 180px;}

}



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



    #main>.about .container .statistics>ul>li{width:170px; height: 140px; }
    #main>.about .container .statistics>ul>li>h3{ font-size: 5rem;}
    #main>.about .container .statistics>ul>li>p{ font-size: 1.4rem;}

    #main>.solution .container>.box{ margin-left: -35%; width: 70%;}
    #main>.solution .container>.nav{ margin-left: -30%; width: 60%;}

    #main>.news .container .swiper-slide>a>.box>.tit{font-size: 1.8rem;}


}

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

    #banner .swiper-slide .mc>.tit{ font-size: 4rem; }
    #banner .swiper-slide .mc>.txt{ width: 100%; padding: 20px; font-size: 1.4rem; line-height: 2rem;}
    #banner .swiper-pagination{ bottom:30px;}

    #main .title>i{font-size: 1.4rem;}
    #main .title>h3{font-size: 2.8rem; }

    #main>.product .container .swiper-slide>a>.img{ width:50%;}
    #main>.product .container .swiper-slide>a>.box{ width: 40%;}
    #main>.product .container .swiper-slide>a>.box>.tit{font-size: 3rem;}

    #main>.about .container .statistics>ul>li{width:160px; height: 130px; }
    #main>.about .container .statistics>ul>li>h3{ font-size: 4rem;}
    #main>.about .container .statistics>ul>li>p{ font-size: 1.2rem;}


    #main>.solution .container>.box>.tit {font-size: 3rem;}
    #main>.solution .container>.box>.txt {font-size: 1.4rem;line-height: 2.4rem; }
    #main>.solution .container>.nav{ margin-left: -35%; width: 70%;}

    #main>.news .container .swiper-slide>a>.box>.tit{font-size: 1.6rem;}
    #main>.news .container .swiper-slide>a>.box>.txt { font-size: 1.2rem; line-height: 2rem; }
    #main>.news .container .swiper-slide>a>.box>.time {font-size: 1.1rem;}

    #main>.hr .box>.tit{font-size: 2.8rem;}

}



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

    #banner .swiper-slide .mc>.tit { font-size: 3.2rem;}
    #banner .swiper-slide .mc>.txt { font-size: 1.2rem; line-height: 1.8rem;}

    #main>.about .container .box{width: 100%; float: none;padding-bottom: 50px;}
    #main>.about .container .box>.txt{  height: 120px;}




}


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

    #banner .swiper-slide .mc { top: 25%; }

    #main .title{text-align: center;padding: 20px 0;}

    #main>.product{padding: 30px 0;}
    #main>.product .container .swiper-slide>a>.box{padding-top: 14%;}
    #main>.product .container .swiper-slide>a>.box>.tit{font-size: 2rem;}
    #main>.product .container .swiper-slide>a>.box>.subtit{padding: 10px 0; font-size: 1.2rem;}
    #main>.product .container .swiper-slide>a>.box>.more{padding: 0;}
    #main>.product .container .swiper-slide>a>.box>.more>span{padding: 8px 20px; font-size: 1.2rem;}
    #main>.product .container .swiper-slide>a>.box>.more>span>i{  margin-left: 10px; font-size: 1.4rem;}


    #main>.about {padding: 30px 0;}
    #main>.about .container .box>.tit{display: none;}
    #main>.about .container .box>.txt{  height: 150px;}
    #main>.about .container .box>.more{text-align: center;}
    #main>.about .container .box>.more>a{padding: 8px 20px; font-size: 1.2rem;}
    #main>.about .container .box>.more>a>i{ margin-left: 10px; font-size: 1.4rem;}
    #main>.about .container .statistics{ position: relative;bottom: -50px;}
    #main>.about .container .statistics>ul>li {width: 33.33%;height: 130px; }
    #main>.about .container .statistics>ul>li:nth-child(1){background:rgba(1,64,153,.8);}
    #main>.about .container .statistics>ul>li:nth-child(2){background:rgba(51,129,189,.8);}
    #main>.about .container .statistics>ul>li:nth-child(3){background:rgba(92,154,202,.8);}


    #main>.solution>.title{ left: 0;top: 30px; width: 100%; text-align: center;}
    #main>.solution .container>.box>.tit { font-size: 2.4rem; }
    #main>.solution .container>.box>.txt { font-size: 1.4rem; line-height: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
    #main>.solution .container>.nav{ margin-left: -40%; width: 80%;}
    #main>.solution .container>.nav>ul>li>a>.ico>img{width: 60px;}
    #main>.solution .container>img{ width: auto;height: 600px;}

    #main>.news { padding: 30px 0; }
    #main>.news .container .swiper-button{ position: relative;z-index: 9; right: 0;top: 0; text-align: right;}
    #main>.news .container .swiper-button>div{height: 30px; line-height: 30px; padding:0 16px;}

    #main>.hr .box>.txt {font-size: 1.6rem; }
    #main>.hr .box>.more>a{padding: 8px 20px; font-size: 1.2rem;}
    #main>.hr .box>.more>a>i{ margin-left: 10px; font-size: 1.4rem;}

}



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

    #main>.product .container .swiper-button>div{  height: 40px; line-height: 40px; width: 26px; }
    #main>.product .container .swiper-button>div>i{font-size: 2rem; }
    #main>.product .container .swiper-slide>a>.box>.more>span{padding: 6px 10px; font-size: 1.1rem;}
    #main>.product .container .swiper-slide>a>.box>.more>span>i{  font-size: 1.2rem;}


    #main>.solution .container>.nav{ margin-left: -45%; width: 90%;}
    #main>.solution .container>.nav>ul>li {padding: 10px;}
    #main>.solution .container>.nav>ul>li>a>.ico>img{width: 50px;}
    #main>.solution .container>.nav>ul>li>a>.name { font-size: 1.2rem; }
    #main>.solution .container>img{ height: 520px;}




    #main>.about .container .box>.more>a{padding: 6px 10px; font-size: 1.1rem;}
    #main>.about .container .box>.more>a>i{ font-size: 1.2rem;}

    #main>.hr .box>.more>a{padding: 6px 10px; font-size: 1.1rem;}
    #main>.hr .box>.more>a>i{ font-size: 1.2rem;}

}


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

    #banner .swiper-slide img.pc{display: none;}
    #banner .swiper-slide img.mob{display: block; width: 100%;height: auto;}
    #banner .swiper-pagination-bullet { width: 50px; }





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


}

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

    #banner .swiper-slide .mc{top: 40%;}
    #banner .swiper-slide .mc>.tit { font-size: 2.8rem;}
    #banner .swiper-slide .mc>.txt { display: none;}
    #banner .swiper-slide .mc>.more{padding-top: 20px;}
    #banner .swiper-slide .mc>.more>a { width: 80px; height: 30px;}

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


    #main>.product .container .swiper-button>div{  height: 32px; line-height: 32px; width: 20px; }
    #main>.product .container .swiper-button>div>i{font-size: 1.8rem; }
    #main>.product .container .swiper-slide>a>.img{ width:80%; float: none; text-align: center; margin: 0 auto;}
    #main>.product .container .swiper-slide>a>.box{ width: 100%; float: none;padding-top:0; text-align: center;}
    #main>.product .container .swiper-slide>a>.box>.tit { font-size: 1.6rem; }
    #main>.product .container .swiper-slide>a>.box>.more{display: none;}
    #main>.product .container .swiper-pagination{position: relative; bottom: 0;}


    #main>.about .wrap{width: 100%;}
    #main>.about .container .box{width: 86%; margin: 0 auto; padding-bottom: 0;}
    #main>.about .container .statistics{  width: 100%;}
    #main>.about .container .statistics>ul>li{ height: auto;padding: 20px 0;}
    #main>.about .container .statistics>ul>li>h3{margin: 0; font-size: 3.2rem;}

    #main>.solution .container>.box { margin-left: -40%; width: 80%;}
    #main>.solution .container>.box>.tit { font-size: 2rem;}
    #main>.solution .container>.box>.txt { font-size: 1.2rem;line-height: 1.8rem;}
    #main>.solution .container>.nav { margin-left: -40%;width: 80%; bottom: 20px; }
    #main>.solution .container>.nav>ul>li { padding: 5px; width: 50%;}
    #main>.solution .container>.nav>ul>li>a>.name { padding: 10px 0;font-size: 1.2rem;}
    #main>.solution .container>.nav>ul>li>a>.ico>img{width: 40px;}


    #main>.news .container .swiper-button{text-align: center;}
    #main>.news .container .swiper-button>div{height: 24px; line-height: 24px; padding:0 10px;}
    #main>.news .container .swiper-button>div>i {display: inline-block;vertical-align: top; font-size: 1.6rem; }

    #main>.hr {height: auto;}
    #main>.hr .box { padding: 40px 0; }
    #main>.hr .box>.tit { font-size: 2.4rem;}
    #main>.hr .box>.txt { width: 70%; font-size: 1.4rem; }



}