@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{ width:100%; height:60px; border-bottom:1px solid #e6e6e6; text-align:center; font-size:3rem; font-weight: normal; color:#333; position:relative; z-index:1; }
#main .title>h3:after{position:absolute; width:160px; background:#0079c3; height:3px; left:50%; margin-left:-80px; bottom:-2px; display:block; content:'';}
#main .title>h4{text-align:center; font-weight:normal; height:60px; line-height:60px; font-size:15px; color:#999; font-family:Microsoft YaHei Light;}









#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 .product{ padding: 100px 0; height:430px; background-image:url(/img/m2_bg.jpg); background-repeat:no-repeat; background-size:cover; position:relative; z-index:3; background-attachment:fixed; margin: 0 auto;}
#main .product .title>h3{color: #fff; border-color: rgba(255,255,255,.2)}
#main .product .title>h4{ color: rgba(255,255,255,.6)}

#main .product>.container{ margin: 50px auto 0 auto;overflow: hidden; padding: 30px 20px; background: #fff; box-shadow: 0 0 16px rgba(0,0,0,.2);}
#main .product>.container .swiper-wrapper{padding-bottom: 20px; position: relative;}
#main .product>.container .swiper-wrapper:after{position: absolute;z-index: 12;right: 0; top: 0;width: 3px; height: 100%; background: #fff; content: '';}
#main .product>.container .swiper-slide{  transition: all .35s; box-sizing: border-box;}
#main .product>.container .swiper-slide>a{ position: relative; display: block; background:#fff;  border-right: 1px solid #eee; box-sizing: border-box; overflow: hidden; text-align: center;}
#main .product>.container .swiper-slide .img{ width: 270px; height: 270px; line-height: 270px; text-align: center;overflow: hidden;}
#main .product>.container .swiper-slide .img>img{width: 76%;height: auto; transition: all .8s;}
#main .product>.container .swiper-slide .tit{ position: relative;z-index: 10; width: 100%; height: 40px; margin: 20px auto; padding:0 20px;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;font-size: 1.4rem; color: #333; text-align: center; transition: all .35s;}
#main .product>.container .swiper-slide .tit>span{position: relative;z-index: 10;}
#main .product>.container .swiper-slide a:after{ position: absolute;z-index: 1; left: 0;bottom: -20px; width: 100%;height: 0; background: #0079c3; content: ''; transition: all .35s;}
#main .product>.container .swiper-slide>a:hover .tit{ color: #fff; transform: translateY(10px);}
#main .product>.container .swiper-slide>a:hover:after{height: 80px;}
#main .product>.container .swiper-slide>a:hover .img>img{transform: scale(1.04);}
#main .product>.container .swiper-pagination{ position: relative;z-index: 20; bottom: 0;}
#main .product>.container .swiper-pagination-bullet-active{ background: #0079c3;}

#main .product .more{text-align: center;padding-top: 50px;}
#main .product .more>a{display: inline-block; padding: 12px 60px; background: #0079c3; font-size: 1.6rem; color: #fff;border-radius: 40px; transition: all .35s;}
#main .product .more>a:hover{ transform: translateY(-6px);}


#main .news{margin: 0 auto; background: #f5f5f5; padding: 100px 0; margin-top: 450px;}
#main .news>.container>ul{margin-top:60px;}
#main .news>.container>ul>li{margin-bottom:50px;}
#main .news>.container>ul>li>a{display:block; height:220px;}
#main .news>.container>ul>li>a>.date{width:150px; height:120px; border-bottom:1px solid #e6e6e6; float:left;}
#main .news>.container>ul>li>a>.date>.year{font-size:26px; color:#0079c3; display:block; padding:46px 0 0 0;}
#main .news>.container>ul>li>a>.date>.day{display:block; color:#999; font-size:15px;}
#main .news>.container>ul>li>a>.img{width:280px; height:220px; background-color:#eee; float:left; overflow:hidden;}
#main .news>.container>ul>li>a>.img>img{width:100%; transition:all .45s;}
#main .news>.container>ul>li>a>.con{width:620px; float:right; height:130px; margin-top:35px; position:relative; text-align: left;}
#main .news>.container>ul>li>a>.con>.title{font-size:18px; text-align: left; display:block; color:#333; transition:all .2s;}
#main .news>.container>ul>li>a>.con>.content{font-size:13px; display:block; color:#999; line-height:180%; padding:17px 0 0 0;}
#main .news>.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 .news>.container>ul>li>a:hover>.con>.arrow{background-position:center left;}
#main .news>.container>ul>li>a:hover>.con>.title{color:#0079c3;}
#main .news>.container>ul>li>a:hover>.img>img{ transform: scale(1.1)}

#main .news .more{text-align: center;padding-top: 50px;}
#main .news .more>a{display: inline-block; padding: 12px 60px; background: #0079c3; font-size: 1.6rem; color: #fff;border-radius: 40px; transition: all .35s;}
#main .news .more>a:hover{ transform: translateY(-6px);}








#main .about{margin: 0 auto; padding: 100px 0;}
#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(238,238,238,.8) }
#main .about>.container .box>.txt{ font-size: 1.5rem; line-height: 2.4rem; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; 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 #0079c3; background:#0079c3; color:#fff; font-size:1.4rem; margin:30px 0 0 0; border-radius:30px; transition:all .16s;}
#main .about>.container .box>.more>a{color: #fff;transition: all .35s;}
#main .about>.container .box>.more:hover>a{color: #fff;}

#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*/