/* 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-pagination{ bottom:50px;}
#banner .swiper-pagination-bullet{width:10px; height:10px; 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:#db261d; opacity:1 !important;}


/* end*/



/*main */
#main{margin: 0 auto; transition: all .35s;}
#main.active {transform: translateX(-220px);}
#main .title{text-align: center;
/*padding: 50px 0;*/
padding: 20px 0;
}
#main .title>h3{ position: relative; display: block;font-size: 3.6rem; font-weight:400;color: rgba(53,59,73,1); }
#main .title>h3:after{position: absolute;z-index: 3; left: 50%;bottom: -10px; margin-left: -20px; width: 40px;height: 2px; background: #db261d; content: '';}
#main .describe{text-align: center; margin: 0 auto; font-size: 1.8rem;color: #999;line-height: 3rem;}







#main .about{margin: 0 auto;
/*padding: 100px 0; */
padding: 55px 0;
background:url(../img/about_bg.jpg) no-repeat center/cover; background-attachment: fixed; box-sizing: border-box;}
#main .about>.container{margin: 0 auto;}
#main .about>.container>.video{text-align: center; padding: 50px 0;}
#main .about>.container>.video>a{display: inline-block; color: #fff; transition: all .35s;}
#main .about>.container>.video>a>i{font-size: 8rem;}
#main .about>.container>.describe{padding: 0 100px;  text-align: center;}
#main .about>.container>.describe>.tit{ color: #fff; font-size: 5rem;}
#main .about>.container>.describe>.txt{
    padding: 50px 0 30px 0; 
    color: #fff; 
    font-size: 1.6rem; 
    /*line-height: 2.8rem;*/
    line-height: 4.2rem;
    text-align: left;
}
#main .about>.container>.view{ text-align: center;padding: 50px; transition: all .35s;}
#main .about>.container>.view>a{display: inline-block; font-size: 1.4rem; color: rgba(255,255,255,.8); padding: 10px 60px; border-radius: 30px; border: 2px solid rgba(255,255,255,.6); transition: all .35s;}
#main .about>.container>.view>a>i{font-style: normal; font-size: 1.6rem;}
#main .about>.container>.view>a:hover{  transform:translateY(-10px);background: #db261d; border: 2px solid #db261d; color: rgba(255,255,255,1);}

#main .product{margin: 0 auto;padding: 50px 0; background: #eee;}
#main .product>.container{ position: relative; margin: 0 auto; padding-bottom: 50px;}
#main .product>.container .prev{position: absolute;z-index: 4; left: -60px;top: 30%; cursor: pointer; width: 40px;height: 40px; line-height: 40px; text-align: center; background: #db261d; transition: all .35s; }
#main .product>.container .next{ position: absolute;z-index: 4; right: -60px;top: 30%; cursor: pointer; width: 40px;height: 40px; line-height: 40px; text-align: center; background: #db261d;  transition: all .35s;}
#main .product>.container .prev>i, #main .product>.container .next>i{font-size: 3rem; color: #fff;}
#main .product>.container .prev:hover, #main .product>.container .next:hover{ background: rgba(53,59,73,1);}
#main .product>.container .swiper-slide>a{display: block;text-align: center;}
#main .product>.container .swiper-slide>a>.img{ position: relative;text-align: center; overflow: hidden; height: auto; margin: 0 auto;}
#main .product>.container .swiper-slide>a>.img>img{ position: relative;z-index: 60; top:-12%; max-width: 100%;height: auto;}
#main .product>.container .swiper-slide>a>.img:after{ position: absolute;z-index: 1; left: 0; bottom: -30px;  width: 100%;height: 100%; opacity: 0; background:#db261d12; content: ''; transition: all .36s;}
#main .product>.container .swiper-slide>a>.tit{ position: relative; padding: 30px; font-size: 1.8rem; color: #333; box-sizing: border-box; text-align: center; transition: all .35s;}
#main .product>.container .swiper-slide>a>.tit:after{ position: absolute;z-index: 1; left: 50%; bottom: 15px; margin-left: -15px; width: 30px;height: 1px; background: #db261d; opacity: 1; content: ''; transition: all .3s; }
#main .product>.container .swiper-slide>a:hover .tit{background: #db261d; color: #fff;}
#main .product>.container .swiper-slide>a:hover .tit:after{ background: rgba(255,255,255,.5); margin-left: -30px; width: 60px; opacity: 1; }
#main .product>.container .swiper-slide>a:hover .img:after{bottom: 0;opacity: 1;}

#main .solution{ padding: 50px 0; margin: 0 auto;background:url(../img/solution_bg.jpg) no-repeat center/cover;box-sizing: border-box; }
#main .solution .container{position: relative; padding: 50px 0;}
#main .solution .container>.box{position: absolute;width: 100%; box-sizing:border-box; 
/*padding: 50px;*/
padding: 20px 50px;
}
#main .solution .container>.box>.core{ text-align: center; margin: 0 auto;}
#main .solution .container>.box>.core>img{max-width: 100%;height: auto;}
#main .solution .container>.box>.circle{ position: absolute;z-index: 4; left: 50%;top: 0; opacity: 0; margin-left: -240px; width: 480px; height: 100%; zoom: 1; background: url("../img/solution_circle.png") no-repeat; background-position: 50% 50%; background-size: 100% auto; }
#main .solution .container>.box>.circle:nth-child(1){-webkit-animation: enlarge 2s linear;-moz-animation: enlarge 2s linear;animation: enlarge 2s linear;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;}
#main .solution .container>.box>.circle:nth-child(2){-webkit-animation: enlarge 2s linear 0.4s;-moz-animation: enlarge 2s linear 0.4s;animation: enlarge 2s linear 0.4s;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;}
#main .solution .container>.box>.circle:nth-child(3){-webkit-animation: enlarge 2s linear 0.8s;-moz-animation: enlarge 2s linear 0.8s;animation: enlarge 2s linear 0.8s;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;}
#main .solution .container>.box>.circle:nth-child(4){-webkit-animation: enlarge 2s linear 1.2s;-moz-animation: enlarge 2s linear 1.2s;animation: enlarge 2s linear 1.2s;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;}
#main .solution .container>.box>.circle:nth-child(5){-webkit-animation: enlarge 2s linear 1.6s;-moz-animation: enlarge 2s linear 1.6s;animation: enlarge 2s linear 1.6s;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;}
#main .solution .container>.box>.circle:nth-child(6){-webkit-animation: enlarge 2s linear 2s;-moz-animation: enlarge 2s linear 2s;animation: enlarge 2s linear 2s;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;}
#main .solution .container>.navbar{ position: relative;z-index: 90; width: 30%; height: 100%; text-align: right;}
#main .solution .container>.navbar>ul{margin: 0;}
#main .solution .container>.navbar>ul>li{display: block; position: relative; 

/*padding: 50px 0;*/
padding: 40px 0;
}
#main .solution .container>.navbar>ul>li:nth-child(2),#main .solution .container>.navbar>ul>li:nth-child(3){ right: 70px;}
#main .solution .container>.navbar>ul>li>a{ position: relative; display: block; font-size: 1.8rem;color: #333; line-height: 80px;transition: all .35s; }
#main .solution .container>.navbar>ul>li>a>i{display: inline-block; float: right; vertical-align: top; font-size: 5rem;color: #db261d; margin:0 20px;}
#main .solution .container>.navbar>ul>li>a>p{ position: absolute;  background: rgba(0,0,0,.6); border-radius: 8px; height: 0; padding: 10px; opacity: 0; font-size: 1.4rem; color: #fff; line-height: 2rem;transition: all .35s; }
#main .solution .container>.navbar:nth-of-type(3){ text-align: left; }
#main .solution .container>.navbar:nth-of-type(3)>ul>li>a>i{float: left;}
#main .solution .container>.navbar:nth-of-type(3)>ul>li:nth-child(2),#main .solution .container>.navbar:nth-of-type(3)>ul>li:nth-child(3){ left: 70px; right: auto;}
#main .solution .container>.navbar>ul>li>a:hover{ color: #db261d; transform:translateY(-8px);}
#main .solution .container>.navbar>ul>li>a:hover p{ margin-top: -5px; height: auto;opacity: 1; }





#main .application{margin: 0 auto; padding: 50px 0;}
#main .application>.container{margin: 0 auto;}
#main .application>.container>ul{margin: 0 auto;}
#main .application>.container>ul>li{ position: relative; float: left;width: 25%; overflow: hidden;}
#main .application>.container>ul>li .con{ position: absolute;z-index: 80; left: 0;top: 30%; width: 100%; padding: 8%; text-align: center; box-sizing: border-box; transition: all .35s;}
#main .application>.container>ul>li .con>.ico{position: relative; padding: 20px 0;}
#main .application>.container>ul>li .con>.ico:after{position: absolute;z-index: 1; left: 50%; bottom: 0; margin-left: -20px; width: 40px;height: 2px; background: #fff;content: ''; transition: all .35s;}
#main .application>.container>ul>li .con>.ico>i{font-size:8rem; color: #fff;}
#main .application>.container>ul>li .con>.tit{ padding: 20px 0; font-size: 2.8rem; color: rgba(255,255,255,1); transition: all .5s;}
#main .application>.container>ul>li .con>.txt{  font-size: 1.6rem; color: rgba(255,255,255,.8); transition: all .5s;}
#main .application>.container>ul>li .con>.view{ text-align: center;transform:translateY(14px);padding: 50px; opacity: 0; transition: all .35s;}
#main .application>.container>ul>li .con>.view>span{font-size: 1.2rem; color: #fff; padding: 8px 30px; border-radius: 30px; border: 2px solid rgba(255,255,255,1);transition: all .35s;}
#main .application>.container>ul>li .con>.view>span>i{font-style: normal; font-size: 1.6rem;}
#main .application>.container>ul>li .img{ position: relative;z-index: 1; text-align: center;}
#main .application>.container>ul>li .img:after{position: absolute;z-index: 2; left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,.3); content: ''; transition: all .8s;}
#main .application>.container>ul>li .img>img{width: 100%;height: auto; transition: all 1s;}

#main .application>.container>ul>li:hover .img>img{ transform: scale(1.2);opacity: .6; }
#main .application>.container>ul>li:hover .img:after{background: #db261d;}
#main .application>.container>ul>li:hover .view{transform:translateY(0px); opacity: 1;}
#main .application>.container>ul>li .con>.view:hover span{background: rgba(53,59,73,1); border: 2px solid rgba(53,59,73,1);}




#main .service{margin: 0 auto; padding:50px 0;}
#main .service>.container{ margin: 0 auto; padding-bottom: 80px;}
#main .service>.container>.item{width: 48%; overflow: hidden;}
#main .service>.container>.item>.tit{text-align: left; position: relative;}
#main .service>.container>.item>.tit>span{ position: absolute;z-index: 3;left: 0;bottom: 0;width: 100%;padding:30px 50px; font-size: 2.4rem; font-weight: 400; color: #fff; box-sizing: border-box; }
#main .service>.container>.item>.box{text-align: left; background: #eee;padding: 30px 50px; height: 210px; max-height: 210px; overflow:hidden; box-sizing: border-box;}
#main .service>.container>.item>.box>.url{margin: 0 auto;}
#main .service>.container>.item>.box>.url>a{display: block; float: left; text-align: center; width: 48%; margin: 2% 0; padding: 10px 0; font-size: 2rem; border: 1px solid #ddd; box-sizing: border-box; background: #fff; transition: all .35s;}
#main .service>.container>.item>.box>.url>a:nth-child(even){float: right;}
#main .service>.container>.item>.box>.url>a:hover{background: #db261d; color: #fff; border: 1px solid #db261d;}
#main .service>.container>.item>.box>.txt>p.tel{ font-size: 3rem;height: 50px; line-height: 50px; color: #db261d;}
#main .service>.container>.item>.box>.txt>p.tel>i{font-size: 5rem; float: left; margin-right: 10px;}
#main .service>.container>.item>.box>.txt>p{ display: block; padding: 30px 0; font-size: 1.8rem; color: rgba(53,59,73,1);}




@media only screen and (max-width: 1280px){
    #main .about>.container>.describe>.tit{ font-size: 4.2rem;}
    #main .about>.container>.describe>.txt{ font-size: 1.4rem; line-height: 2.4rem;}
    #main .describe { font-size: 1.6rem; line-height: 2.8rem; }
    #main .solution .container>.box>.circle{ margin-left: -210px; width: 420px;}
    #main .solution .container>.navbar>ul>li>a{ font-size: 1.6rem; line-height: 60px; }
    #main .solution .container>.navbar>ul>li>a>i{ font-size: 4rem; margin-right: 10px; }
    #main .solution .container>.navbar>ul>li>a>p{ font-size: 1.2rem;  line-height: 1.8rem;}
    #main .application>.container>ul>li .con>.ico>i{font-size:6rem;}
    #main .application>.container>ul>li .con>.tit{font-size: 2rem;}
    #main .application>.container>ul>li .con>.txt{  font-size: 1.4rem;}
}
@media only screen and (max-width: 1080px){
    #main .service>.container>.item>.box>.url>a{font-size: 1.6rem;}
    #main .service>.container>.item>.box>.txt>p.tel{ font-size: 2.4rem; height: 40px; line-height: 40px;}
    #main .service>.container>.item>.box>.txt>p.tel>i{font-size: 4rem;}
    #main .service>.container>.item>.box>.txt>p{ font-size: 1.6rem; padding: 24px 0; }
}
@media only screen and (max-width: 960px){
    #main .title>h3{ font-size: 3rem;}
    #main .describe { font-size: 1.4rem; line-height: 2rem; }
    #main .about>.container>.describe{padding: 0 50px; }
    #main .about>.container>.describe>.tit{ font-size: 4rem;}
    #main .about>.container>.describe>.txt{ font-size: 1.4rem; line-height: 2rem;}
    #main .product{padding: 20px 0;}
    #main .product>.container .swiper-slide>a>.tit {padding: 30px 20px;font-size: 1.6rem; }
    #main .product>.container .swiper-slide>a>.img{  height:220px;}
    #main .solution{padding:20px 0;}
    #main .solution .container>.box>.core>img { max-width: 60%; }
    #main .solution .container>.box>.circle{ margin-left: -200px; width: 400px;}
    #main .solution .container>.navbar>ul>li>a{ font-size: 1.4rem;}
    #main .solution .container>.navbar>ul>li>a>i{ font-size: 3.6rem; margin-right: 5px; }
    #main .application{ padding: 20px 0;}
    #main .application>.container>ul>li{ width: 50%; max-height: 400px; overflow: hidden;}
    #main .application>.container>ul>li .con{ top: 15%; padding: 6%;}
    #main .application>.container>ul>li .img>img{ position: relative; margin-top: -20%; width: 100%;height: auto; transition: all 1s;}
    #main .service{padding:20px 0;}
    #main .service>.container>.item>.box>.txt>p.tel{ font-size: 2rem;}
    #main .service>.container>.item>.box>.txt>p{ font-size: 1.4rem;}

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


    #main .product>.container .swiper-slide>a>.tit {padding: 30px 0;font-size: 1.4rem; }
    #main .product>.container .swiper-slide>a>.img{  height:180px;}

    #main .about { padding: 30px 0; }
    #main .service>.container>.item{width: 100%; float: none; margin-bottom:30px;}
    #main .service>.container>.item>.box {height: auto;padding:15px 25px }

    #main .solution .container>.navbar{width: 36%;}
    #main .solution .container>.navbar>ul>li{text-align: center; padding-top: 0;}
    #main .solution .container>.navbar>ul>li>a{ line-height: 40px;}
    #main .solution .container>.navbar>ul>li>a>i{display: block; float: none!important; margin: 0;}
    #main .solution .container>.navbar>ul>li>a>p{display: none;}


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

    #main .product>.container .prev{left:-20px;width: 30px;height: 30px; line-height:30px; }
    #main .product>.container .next{ right: -20px;  width: 30px;height: 30px; line-height: 30px;;}
    #main .product>.container .prev>i, #main .product>.container .next>i{font-size: 2.4rem;}

    #main .about>.container>.describe>.tit {font-size: 3rem; }
    #main .about>.container>.describe {padding: 0; }

    #main .solution .container>.box{position: relative;padding: 50px; }
    #main .solution .container>.box>.core>img { max-width: 80%; }
    #main .solution .container>.navbar{ position: relative;z-index: 90; margin-top: -20%; width: 48%; height: auto; text-align: right;}
    #main .solution .container>.navbar>ul{margin: 0;}
    #main .solution .container>.navbar>ul>li{display: block; position: relative; padding: 10px 0;text-align: left;}
    #main .solution .container>.navbar>ul>li:nth-child(2),#main .solution .container>.navbar>ul>li:nth-child(3){ right: auto;}
    #main .solution .container>.navbar>ul>li>a{ background: rgba(144,40,51,.9); color: rgba(255,255,255,1); border-radius: 3px; padding: 10px 7px; text-align: center; }
    #main .solution .container>.navbar>ul>li>a>i{  color: rgba(255,255,255,1); font-size: 3rem; }
    #main .solution .container>.navbar>ul>li>a>p{ display: none; }
    #main .solution .container>.navbar:nth-of-type(3){ text-align: left; }
    #main .solution .container>.navbar:nth-of-type(3)>ul>li:nth-child(2),#main .solution .container>.navbar:nth-of-type(3)>ul>li:nth-child(3){ left: 0; right: auto;}
    #main .solution .container>.navbar>ul>li>a:hover{ color: rgba(255,255,255,1);}


}


@media only screen and (max-width: 520px){
    #main .title{padding: 30px 0;}
    #main .title>h3{ font-size: 2rem;}
    #main .describe { font-size: 1.2rem; line-height: 1.8rem; }

    #main .product>.container .swiper-slide>a>.img{  height:auto;}
    #main .product>.container .swiper-slide>a>.img>img { top: 0; width: 100%;}

    #main .about>.container>.describe>.tit {font-size: 2.4rem; }
    #main .about>.container>.describe>.txt {padding: 20px 0; 
    /*font-size: 1.2rem; */
    /*line-height: 1.8rem;*/
    font-size: 1.5rem;
    line-height: 2.7rem;
    }
    #main .about>.container>.view {padding: 30px;}
    #main .about>.container>.view>a { font-size: 1.2rem; padding: 6px 30px; }

    #main .application{ padding: 0;}

    #main .application>.container>ul>li .con>.ico>i {font-size: 4.8rem;}
    #main .application>.container>ul>li .con>.tit { font-size: 1.8rem;}
    #main .application>.container>ul>li .con>.txt {font-size: 1.2rem; }

    #main .service{ padding: 0;}
    #main .service>.container>.item>.tit>span { font-size: 2rem; }
    #main .service>.container>.item>.box>.url>a { font-size: 1.4rem; }

    #main .service>.container { padding-bottom: 40px;  }


    #main .solution{ padding: 0;}
    #main .solution .container>.box {padding: 20px;}
    #main .solution .container>.box>.circle{ margin-left: -140px; width: 280px; }
    #main .solution .container>.box>.core>img{max-width: 100%;}
    #main .solution .container>.navbar{ 
        /*margin-top: -26%;*/
        margin-top: 11%;}
    #main .solution .container>.navbar>ul>li>a { font-size: 1.2rem; overflow: hidden;text-overflow:ellipsis; white-space: nowrap; }
}
@keyframes enlarge {
    0% {
        transform:scale(1.1);
        opacity: 0.9;
    }
    25% {
        transform:scale(1.2);
        opacity: 0.7;
    }
    50% {
        transform:scale(1.3);
        opacity: 0.5;
    }
    75% {
        transform:scale(1.4);
        opacity: 0.3;
    }
    100% {
        transform:scale(1.5);
        opacity: 0.1;
    }
}