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

#strength{ position: relative;z-index: 5; background:#fff url("../img/strength_bg.jpg") no-repeat; background-position: 0 0; background-size: cover; margin: 0 auto;}

#strength .container{padding:30px 0 160px 0;}
#strength .describe{text-align: center; color: #666; font-size: 1.6rem; line-height: 2.4rem; padding-bottom: 50px;}

#strength .container .swiper-container {padding-bottom: 60px;}
#strength .container .swiper-container .swiper-slide { width: 38%; height: 28%;  background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.2); overflow: hidden;}
#strength .container .swiper-container .swiper-slide img{display:block;width: 100%;height: auto;}
#strength .container .swiper-container .swiper-slide .tit { padding:30px 0;text-align: center;color: #636363; font-size: 1.6rem; margin: 0;}
#strength .container .swiper-container .swiper-slide-active .tit{ background: #fff; font-weight: bold; color: rgba(1,64,153,1);}
#strength .container .swiper-pagination { width: 100%; bottom: 0;}
#strength .container .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px;border: 3px solid rgba(255,255,255,1);background: #d5d5d5;width: 12px;height: 12px; opacity: 1; transition: all .35s;}
#strength .container .swiper-pagination-bullets .swiper-pagination-bullet:hover{background: rgba(1,64,153,1);}
#strength .container .swiper-pagination-bullets .swiper-pagination-bullet-active { border: 3px solid rgba(1,64,153,1); background: #fff;}
#strength .container .prev{ position: absolute;z-index: 30; top: 36%; left: 20px; width: 50px;height: 50px; line-height: 50px; text-align: center; cursor: pointer; transition: all .35s;}
#strength .container .prev:after{position: absolute;z-index: 1; top: 0;left: 0; width: 100%;height: 100%; background:rgba(0,0,0,.1); content: ''; transform: rotate(45deg); transition: all .35s;}
#strength .container .prev>i{ position: relative;z-index: 5; font-size: 2rem; color: rgba(1,64,153,1); transition: all .35s;}
#strength .container .prev:hover{left: 16px;}
#strength .container .prev:hover:after{background: rgba(1,64,153,1);}
#strength .container .prev:hover>i{color: rgba(255,255,255,1);}
#strength .container .next{ position: absolute;z-index: 30; top: 36%; right: 20px; width: 50px;height: 50px; line-height: 50px; text-align: center; cursor: pointer; transition: all .35s;}
#strength .container .next:after{position: absolute;z-index: 1; top: 0;left: 0; width: 100%;height: 100%; background:rgba(0,0,0,.1); content: ''; transform: rotate(45deg); transition: all .35s;}
#strength .container .next>i{ position: relative;z-index: 5; font-size: 2rem; color: rgba(1,64,153,1); transition: all .35s;}
#strength .container .next:hover{right: 16px;}
#strength .container .next:hover:after{background: rgba(1,64,153,1);}
#strength .container .next:hover>i{color: rgba(255,255,255,1);}



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

    #strength .container .swiper-container .swiper-slide {width: 39.4%; height: 29%; }

}

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

    #strength .container .swiper-container .swiper-slide {width: 40.8%; height: 31.4%;}

}

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

    #strength .container .swiper-container .swiper-slide {width: 42%; height: 32%;}

}

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

    #strength .container .swiper-container .swiper-slide {width: 43.2%; height: 34%;}

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

    #strength .container .swiper-container .swiper-slide {width: 43.8%; height: 34.4%;}

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

    #strength .container .swiper-container .swiper-slide {width: 44.2%; height: 36%;}

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

    #strength .container .swiper-container .swiper-slide {width: 48.2%; height: 38%;}

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

    #strength .container .swiper-container {padding-bottom:10px;}
    #strength .container .swiper-container .swiper-slide {width: 50%; height: 40%;}
    #strength .container .prev{ width: 30px;height: 30px; line-height: 30px;}
    #strength .container .prev>i{ font-size: 1.6rem;}
    #strength .container .next{ width: 30px;height: 30px; line-height: 30px;}
    #strength .container .next>i{ font-size: 1.6rem;}


}

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

    #strength .container .swiper-container .swiper-slide {width: 62%; height: 52%;}
    #strength .container .swiper-container .swiper-slide .tit { padding:20px 0; font-size: 1.4rem;}
    #strength .container .button{text-align: center; padding-top: 60px;}
    #strength .container .prev{position: relative; left: auto!important;top: 0; display: inline-block; margin-right: 10px; vertical-align: top;}
    #strength .container .next{position: relative; right: auto!important;; left: auto; top: 0; display: inline-block; margin-left: 10px; vertical-align: top;}
    #strength .container .swiper-pagination { display: none;}
}