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

#main{margin: 0 auto; transition: all .35s;}
#main.active {transform: translateX(-220px);}
#main .title{text-align: center; padding: 50px 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: #00428E; content: '';}
#main .describe{text-align: center; margin: 0 auto; font-size: 1.8rem;color: #999;line-height: 3rem;}


#main .product{margin: 0 auto;padding: 0px 0;background: #fafafa;}
#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: #00428E; 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: #00428E;  transition: all .35s;}
#main .product>.container .prev>i, #main .product>.container .next>i{font-size: 3rem; color: #fff;}
#main .product>.container .prev>i>img, #main .product>.container .next>i>img{width:60%;vertical-align: revert;}
#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: rgb(0 66 142 / 22%); 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: #00428E; opacity: 1; content: ''; transition: all .3s; }
#main .product>.container .swiper-slide>a:hover .tit{background: #00428E; 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;}


@media only screen and (max-width: 1280px){
    #main .describe { font-size: 1.6rem; line-height: 2.8rem; }
}
@media only screen and (max-width: 960px){
    #main .title>h3{ font-size: 3rem;}
    #main .describe { 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;}
}
@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;}
}
@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;}
}
@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%;}
}