@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#solution{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto; padding-top: 100px;}

#solution .title{ position:relative; width:86%; max-width:1300px; margin:0 auto; font-size: 4.5rem; color: #333; text-align:center;font-weight: 400;}
#solution .title:after{position:absolute;z-index:3;left:50%; bottom:-10px; margin-left: -30px; width:60px;height:3px; background:rgba(38,87,161,1); content:'';}

#solution .display{margin: 0 auto; padding-bottom: 100px;}
#solution .display>.describe{ width: 80%; margin: 0 auto; padding: 50px 0; text-align: center;font-size: 1.6rem; line-height: 2.8rem; color: #666;}

#solution .display>.list{margin: 0 auto;}
#solution .display>.list>ul{margin: 0 auto; text-align: center; }
#solution .display>.list>ul>li{ position: relative; display:block;  margin: 0 auto; margin-bottom: 50px; background: #ddd;transition: all .35s;}
#solution .display>.list>ul>li:last-of-type{margin-bottom: 0;}
#solution .display>.list>ul>li:after{position:absolute;z-index:1;left:0;top:0; width:100%;height:100%; background: url("../img/solution_mask.png") no-repeat; background-size: cover; background-position: 0 0; content: ''; transition: all .35s; }
#solution .display>.list>ul>li>.img{ position: relative; height: 450px; margin: 0 auto;overflow: hidden; text-align: right;}
#solution .display>.list>ul>li>.img>img{ position: relative; top: -5%; width: auto;height: 116%; transition: all .8s;}
#solution .display>.list>ul>li>.box{ position: absolute;z-index: 8;left: 10%;bottom: 24%; width: 35%; text-align: left; box-sizing: border-box; }
#solution .display>.list>ul>li>.box>.tit{font-size: 2.8rem; color: rgba(146,191,46,1);}
#solution .display>.list>ul>li>.box>.tit>i{margin-right: 10px;}
#solution .display>.list>ul>li>.box>.txt{ padding: 20px 0; font-size: 1.6rem; line-height: 2.4rem; color: #666;}
#solution .display>.list>ul>li>.box>.view{  text-align: left;}
#solution .display>.list>ul>li>.box>.view>a{ display: inline-block; padding: 7px 20px;  background: #666; border-radius: 3px;  overflow: hidden; text-align: center;transition: all .35s;}
#solution .display>.list>ul>li>.box>.view>a>span{display: inline-block; float: left; font-size: 12px; color:#fff;margin-right: 5px; font-family: "Microsoft YaHei"; transition: all .35s;}
#solution .display>.list>ul>li>.box>.view>a>i{color: #fff; font-size: 16px;}
#solution .display>.list>ul>li>.box>.view>a:hover{background: rgba(38,87,161,1);}
#solution .display>.list>ul>li>.box>.view>a:hover>span{color: #fff;}
#solution .display>.list>ul>li>.box>.view>a:hover>i{color: #fff;}
#solution .display>.list>ul>li:hover:after{background: url("../img/solution_mask_hover.png") no-repeat; background-size: cover; background-position: 0 0; }
#solution .display>.list>ul>li:hover .img>img{ transform: scale(1.1); }
#solution .display>.list>ul>li:nth-child(even) .box{ right: 10%; left: auto;}
#solution .display>.list>ul>li:nth-child(even):after{ transform: rotateY(180deg); left: auto; right: 0;}
#solution .display>.list>ul>li:nth-child(even) .img{text-align: left;}


#solution .view{margin: 0 auto;}
#solution .view>.describe{  position: relative; width: 70%; margin: 0 auto; background: rgba(146,191,46,1); overflow: hidden;}
#solution .view>.describe>.box{ position: absolute; left: 0;top: 0; width: 45%;  box-sizing: border-box;padding: 50px; text-align: left;}
#solution .view>.describe>.box>.tit{ position: relative;z-index: 8; font-size: 3.6rem; color: #fff;}
#solution .view>.describe>.box>.tit>i{ display: inline-block; float: left; margin-right: 10px; background: #f3f3f3; width: 50px;height:50px; line-height: 50px; text-align: center;overflow: hidden; border-radius: 100%;}
#solution .view>.describe>.box>.tit>i>img{ position: relative;z-index: 1; top: -5px; width: 30px;height: auto;}
#solution .view>.describe>.box>.txt{ position: relative;z-index: 8; padding: 20px 0; font-size: 1.6rem; line-height: 2.8rem; color: #fff;}
#solution .view>.describe>.img{ position: relative; width: 55%; overflow: hidden;  text-align: right;}
#solution .view>.describe>.img>img{width: 100%;height: auto;}
#solution .view>.describe>.img:after{ position: absolute;z-index: 3; left: 0; top: 0; width: 100%;height: 100%; background: rgba(0,0,0,.3); content: '';}

#solution .view>.section{padding: 100px 0;  margin: 0 auto; }
#solution .view>.section>.container{ padding: 50px 0; text-align: center;}
#solution .view>.section>.container>.box{text-align: left; font-size: 1.6rem; line-height: 2.8rem; color: #666; }
#solution .view>.section:nth-child(odd){background: #fff;}

#solution .view>.product{margin: 0 auto;  background: url("../img/solution_product_bg.jpg") no-repeat; background-position: left bottom; background-size: cover;  padding: 100px 0; }
#solution .view>.product>.container{ position: relative; margin: 50px auto;}
#solution .view>.product>.container>.prev{ position: absolute;z-index: 3;left: 8%; top: 50%; margin-top: -25px; width: 50px;height: 50px; line-height: 50px; text-align: center; cursor: pointer; color: rgba(38,87,161,1); border-radius: 100%; border: 1px solid rgba(38,87,161,1); transition: all .35s;}
#solution .view>.product>.container>.next{ position: absolute;z-index: 3;right: 8%; top: 50%; margin-top: -25px; width: 50px;height: 50px; line-height: 50px; text-align: center; cursor: pointer; border-radius: 100%; border: 1px solid rgba(38,87,161,1); transition: all .35s;}
#solution .view>.product>.container>.prev>i, #solution .view>.product>.container>.next>i{font-size: 1.8rem;}
#solution .view>.product>.container>.prev:hover, #solution .view>.product>.container>.next:hover{background: rgba(38,87,161,1); color: #fff;}
#solution .view>.product>.container .swiper-slide{width:70%;background: #fff; padding:40px  80px; }
#solution .view>.product>.container .swiper-slide>.img{width: 25%;}
#solution .view>.product>.container .swiper-slide>.img>a>img{width: 100%;height: auto;}
#solution .view>.product>.container .swiper-slide>.box{width: 75%; box-sizing: border-box; padding: 50px 10%;text-align: left;}
#solution .view>.product>.container .swiper-slide>.box>.tit{padding: 10px 0;}
#solution .view>.product>.container .swiper-slide>.box>.tit h3{color: rgba(38,87,161,1); font-size: 2.8rem;}
#solution .view>.product>.container .swiper-slide>.box>.tit span{display: block;font-size: 1.6rem;color: #999;}
#solution .view>.product>.container .swiper-slide>.box>.txt{font-size: 1.4rem; color: #666; line-height: 2.4rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4; overflow: hidden;}
#solution .view>.product>.container .swiper-slide>.box>.tit:hover h3{color: rgba(146,191,46,1);}







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

    #solution>.display>.list>ul>li>.img>img{ top: 0; height: 100%;}


    #solution .view>.describe>.box>.tit{ font-size:3rem;}
    #solution .view>.describe>.box>.tit>i{ width: 42px;height:42px; line-height: 42px;}
    #solution .view>.describe>.box>.tit>i>img{ width: 26px;}
    #solution .view>.describe>.box>.txt{ font-size: 1.4rem; line-height: 2rem;}


}

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

    #solution>.display>.list>ul>li>.img{ height: 400px;}

}

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

    #solution .title{ font-size: 3.6rem;}

    #solution>.display>.describe{ font-size: 1.4rem; line-height: 2rem;}

    #solution>.display>.list>ul>li:after{ background-size: 100% 100%;}
    #solution>.display>.list>ul>li:hover:after{background-size: 100% 100%; }
    #solution>.display>.list>ul>li>.img{ height: 360px;}
    #solution>.display>.list>ul>li>.box>.txt{ font-size: 1.4rem; line-height: 2rem;}

    #solution .view>.describe{width: 86%;}
    #solution .view>.describe>.box{ position: absolute; top: auto;bottom: 0; background: rgba(0,0,0,.5); float:none; width: 100%; }
    #solution .view>.describe>.img{ position: relative; float: none; width: 100%;}

    #solution .view>.section>.container>.box{ font-size: 1.4rem; line-height: 2rem; }

    #solution .view>.product>.container .swiper-slide>.img{width: 40%;}
    #solution .view>.product>.container .swiper-slide>.box{width: 60%; padding: 20px 10%;}
    #solution .view>.product>.container .swiper-slide>.box>.tit h3{color: rgba(38,87,161,1); font-size: 2.2rem;}

    #solution .view>.product>.container .swiper-slide>.box>.txt{font-size: 1.2rem;line-height: 1.8rem;-webkit-line-clamp: 3;}


}

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

    #solution .view>.describe>.box{padding:0 50px; padding-top: 20px;}

}



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

    #solution .title{ font-size: 2.8rem;}
    #solution>.display>.describe{ font-size: 1.2rem; line-height: 1.8rem;}

    #solution>.display>.list>ul>li{ margin-bottom: 30px;}
    #solution>.display>.list>ul>li:after{display: none;}
    #solution>.display>.list>ul>li>.box{position: relative; width: 100%; left: 0;bottom: 0; right: auto!important; padding: 30px;}
    #solution>.display>.list>ul>li>.box>.tit{font-size: 2rem;}
    #solution>.display>.list>ul>li>.box>.tit>i>img{height: 46px; width: auto;}
    #solution>.display>.list>ul>li>.box>.txt{ font-size: 1.2rem; line-height: 1.8rem;}

    #solution>.display>.list>ul>li>.img{height: auto;}
    #solution>.display>.list>ul>li>.img>img{ width: 100%;height: auto;}


    #solution .view>.describe>.box>.tit{ font-size: 2.4rem;}
    #solution .view>.describe>.box>.txt{ font-size: 1.2rem; line-height: 1.8rem;}

    #solution .view>.section>.container>.box{ font-size: 1.2rem; line-height: 1.8rem; }

    #solution .view>.product>.container .swiper-slide { padding: 40px; }
    #solution .view>.product>.container .swiper-slide>.box>.tit h3{ font-size: 2rem;}
    #solution .view>.product>.container .swiper-slide>.box>.tit span{font-size: 1.2rem;}
    #solution .view>.product>.container .swiper-slide>.box>.txt{  display: none; }

    #solution .view>.product>.container>.prev{ margin-top: -20px; width: 40px;height: 40px; line-height: 40px; }
    #solution .view>.product>.container>.next{ margin-top: -20px; width: 40px;height: 40px; line-height: 40px;}
    #solution .view>.product>.container>.prev>i, #solution .view>.product>.container>.next>i{font-size: 1.6rem;}


}

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

    #solution .view>.describe>.box {position: relative; background: rgba(146,191,46,1); padding: 20px; }

}