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





/*banner */

#banner{position:relative;background:#fff; height:auto; overflow:hidden; transition:all .35s;}
#banner .swiper-pagination{ z-index: 80; left: 50%; width: 76%; bottom: 50px; margin-left: -38%; text-align: center; }
#banner .swiper-pagination .swiper-pagination-bullet { width: 14px!important; height: 14px!important; border: 2px solid #fff; background: none!important; opacity: 1!important; }
#banner .swiper-pagination .swiper-pagination-bullet-active{background: #fff!important;}
#banner .swiper-slide.swiper-slide-active img{animation: ring 2s infinite; animation-iteration-count:1;}

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

/* end*/






/*main */

#main{margin: 0 auto;}
#main .wrap{width: 86%; max-width: 1080px;}


#main .title{margin: 0 auto; text-align: center;}
#main .title>h3{ position: relative; display: block; margin: 0 auto; font-size: 3.6rem; font-weight: normal; padding: 15px 0; }
#main .title>h3:after{position: absolute; z-index: 5; left: 50%; bottom: 0; margin-left: -25px; width: 50px;height: 2px; background: #001386; content: '';}
#main .title>h3.br{border-bottom:1px solid #e6e6e6;}

#main .product{ margin: 0 auto; padding: 100px 0 50px 0;}
#main .product>.container{position: relative; margin: 0 auto;padding: 30px 0;}
#main .product>.container .prev, #main .product>.container .next{ position: absolute;z-index: 12; left: -100px; top: 40%; cursor: pointer; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 100%; background: #e6e6e6; transition: all .35s;}
#main .product>.container .next{ right: -100px;left:  auto;}
#main .product>.container .prev>i, #main .product>.container .next>i{font-size: 3rem; color: #001386;}
#main .product>.container .prev:hover, #main .product>.container .next:hover{background: #00fcff;}
#main .product>.container .swiper{ margin: 0 auto; padding: 60px 0;}
#main .product>.container .swiper .swiper-slide>a{ position: relative; display: block;}
#main .product>.container .swiper .swiper-slide .img{text-align: center;overflow: hidden; box-sizing: border-box; border: 1px solid #e6e6e6;}
#main .product>.container .swiper .swiper-slide .img>img{width: 100%;height: auto; transition: all .8s;}
#main .product>.container .swiper .swiper-slide .tit{ padding: 15px; text-align: center;font-size: 1.6rem; width: 100%; transition: all .35s;}
#main .product>.container .swiper .swiper-slide:hover{ z-index: 60;}
#main .product>.container .swiper .swiper-slide>a:hover .img{border-color: #001386;}
#main .product>.container .swiper .swiper-slide>a:hover .tit{ bottom: 10px; color: #001386; }
#main .product>.container .swiper .swiper-slide>a:hover:after{height: 0;}
#main .product>.container .more{text-align: center;padding-top: 50px;}
#main .product>.container .more>a{display: inline-block; padding: 12px 60px; background: #fff; border: 1px solid #001386; font-size: 1.6rem; color: #001386;border-radius: 40px; transition: all .35s;}
#main .product>.container .more>a:hover{ background: #001386; color: #fff; transform: translateY(-6px);}







#main .solution{margin: 0 auto; padding: 100px 0;}
#main .solution>.container{margin: 0 auto;}
#main .solution>.container>ul{width: 1400px;height: 400px;margin: 50px auto;}
#main .solution>.container>ul>li{position:relative; width: 19.2%; height: 400px; margin-right: 1%; float: left; text-align: center; border-radius: 8px;overflow: hidden; box-sizing: border-box;padding: 60px 30px; background-position: center center; background-size: cover; background-repeat: no-repeat; transition:all .7s ease 0s;}
#main .solution>.container>ul>li:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%; height: 60%; background: linear-gradient(rgba(0,0,0,1),rgba(212,0,46,0)); content: '';transition: all .35s; }
#main .solution>.container>ul>li:last-child{margin-right: 0;}
#main .solution>.container>ul>li:hover{opacity: 1;}
#main .solution>.container>ul>li .ico{ position: relative;z-index: 60; margin-bottom:10px;transition: all .35s;}
#main .solution>.container>ul>li .ico>img{height: 40px;width: auto;}
#main .solution>.container>ul>li .tit{ position: relative;z-index: 60; color: #fff;font-size: 2rem; font-weight: bold;transition: all .35s;}
#main .solution>.container>ul>li .box{ position: absolute;z-index: 60; left: 50%; bottom: 0; opacity: 0; width: 340px; padding: 20px 0; transform: translateX(-50%); transition: all .35s;}
#main .solution>.container>ul>li .box>.txt{font-size: 1.6rem; color: rgba(255,255,255,.9); line-height: 2.4rem;}
#main .solution>.container>ul>li .box>.more{ display: none; padding-top: 20px;}
#main .solution>.container>ul>li .box>.more>a{display: inline-block;background: #333; font-size: 1.4rem; color: #fff; border-radius: 30px; padding: 6px 20px; transition: all .35s;}
#main .solution>.container>ul>li.active:after{ height: 100%;background: linear-gradient(rgba(212,0,46,1),rgba(212,0,46,.5));}
#main .solution>.container>ul>li.active .box{opacity: 1; transform: translateX(-50%); bottom: 25%; }
#main .solution>.container>ul>li.active .tit{font-size: 3rem;}


#main .cases{margin: 0 auto; padding: 100px 0;}
#main .cases>.container>ul{margin-top:60px;}
#main .cases>.container>ul>li{margin-bottom:50px;}
#main .cases>.container>ul>li>a{display:block; height:220px;}
#main .cases>.container>ul>li>a>.date{width:150px; height:120px; border-bottom:1px solid #e6e6e6; float:left;}
#main .cases>.container>ul>li>a>.date>.year{font-size:26px; color:#001386; display:block; padding:46px 0 0 0;}
#main .cases>.container>ul>li>a>.date>.day{display:block; color:#999; font-size:15px;}
#main .cases>.container>ul>li>a>.img{width:360px; height:220px; background-color:#eee; float:left; overflow:hidden;}
#main .cases>.container>ul>li>a>.img>img{width:100%; transition:all .45s;}
#main .cases>.container>ul>li>a>.con{width:620px; float:right; height:130px; margin-top:35px; position:relative; text-align: left;}
#main .cases>.container>ul>li>a>.con>.title{font-size:18px; text-align: left; display:block; color:#333; transition:all .2s;}
#main .cases>.container>ul>li>a>.con>.content{font-size:13px; display:block; color:#999; line-height:180%; padding:17px 0 0 0;}
#main .cases>.container>ul>li>a>.con>.arrow{display:block; width:26px; height:26px; background:url(../img/arr.png) no-repeat center right; position:absolute; left:0; bottom:0; overflow:hidden; transition:all .3s .08s;}
#main .cases>.container>ul>li>a:hover>.con>.arrow{background-position:center left;}
#main .cases>.container>ul>li>a:hover>.con>.title{color:#001386;}
#main .cases>.container>ul>li>a:hover>.img>img{ transform: scale(1.1)}
#main .cases .more{text-align: center;padding-top: 50px;}
#main .cases .more>a{display: inline-block; padding: 12px 60px; background: #001386; font-size: 1.6rem; color: #fff;border-radius: 40px; transition: all .35s;}
#main .cases .more>a:hover{ transform: translateY(-6px);}








#main .about{margin: 0 auto; padding: 100px 0; background: #f5f5f5;}
#main .about>.container{ position: relative; margin: 0 auto; padding: 100px 0;}
#main .about>.container .box{width:700px; box-sizing: border-box; padding:50px; position:relative; z-index:2; top: 20px; background: rgba(26,68,153,.8) }
#main .about>.container .box>.txt{ font-size: 1.5rem; line-height: 2.4rem; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;}
#main .about>.container .box>.txt>p{margin-bottom: 20px;}
#main .about>.container .box>.more{display:block; width:130px; height:40px; text-align:center; line-height:40px; border: 1px solid #00fcff; background:#00fcff; font-size:1.4rem; margin:30px 0 0 0; border-radius:30px; transition:all .16s;}
#main .about>.container .box>.more>a{color:#001386; transition: all .35s;}


#main .about>.container .imgshow{width:635px; height:430px; position:absolute; right:0; top:50px; z-index:1; overflow:hidden;}
#main .about>.container .imgshow>.img{padding:15px; width:100%; height:100%; position:relative; z-index:2;}
#main .about>.container .imgshow>.img>img{display:block;}
#main .about>.container .imgshow .arrowR{width:60px; height:60px; position:absolute; right:20px; top:180px; z-index:3;}
#main .about>.container .imgshow .arrowR>img{width:100%; height:100%; filter:alpha(opacity=80); opacity:.8; transition:all .2s;}
#main .about>.container .imgshow .arrowR:hover>img{filter:alpha(opacity=100); opacity:1;}




#main .contact{height:466px; margin: 0 auto; background-image:url(../img/main_contact_bg.jpg); background-repeat:no-repeat; background-size:cover; position:relative; z-index:1; background-attachment:fixed;}
#main .contact>.wrap{width:720px; padding:86px 0 0 0;}
#main .contact .box{ width: 600px; margin: 0 auto; text-align: center;}
#main .contact .title{color:#fff; font-size:3.2rem; font-weight: 600;}
#main .contact .box{padding:10px 0 0 0; color:#fff; font-size:13px;}
#main .contact .box>.tit{color:rgba(255,255,255,.5); margin-top:20px; margin-bottom:2px;}
#main .contact .box>.notop{margin-top:5px !important;}
#main .contact .box .big{font-size:20px;}












/* end*/