<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@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&gt;.describe{ width: 80%; margin: 0 auto; padding: 50px 0; text-align: center;font-size: 1.6rem; line-height: 2.8rem; color: #666;}

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


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

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

#solution .view&gt;.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&gt;.product&gt;.container{ position: relative; margin: 50px auto;}
#solution .view&gt;.product&gt;.container&gt;.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&gt;.product&gt;.container&gt;.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&gt;.product&gt;.container&gt;.prev&gt;i, #solution .view&gt;.product&gt;.container&gt;.next&gt;i{font-size: 1.8rem;}
#solution .view&gt;.product&gt;.container&gt;.prev:hover, #solution .view&gt;.product&gt;.container&gt;.next:hover{background: rgba(38,87,161,1); color: #fff;}
#solution .view&gt;.product&gt;.container .swiper-slide{width:70%;background: #fff; padding:40px  80px; }
#solution .view&gt;.product&gt;.container .swiper-slide&gt;.img{width: 25%;}
#solution .view&gt;.product&gt;.container .swiper-slide&gt;.img&gt;a&gt;img{width: 100%;height: auto;}
#solution .view&gt;.product&gt;.container .swiper-slide&gt;.box{width: 75%; box-sizing: border-box; padding: 50px 10%;text-align: left;}
#solution .view&gt;.product&gt;.container .swiper-slide&gt;.box&gt;.tit{padding: 10px 0;}
#solution .view&gt;.product&gt;.container .swiper-slide&gt;.box&gt;.tit h3{color: rgba(38,87,161,1); font-size: 2.8rem;}
#solution .view&gt;.product&gt;.container .swiper-slide&gt;.box&gt;.tit span{display: block;font-size: 1.6rem;color: #999;}
#solution .view&gt;.product&gt;.container .swiper-slide&gt;.box&gt;.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&gt;.product&gt;.container .swiper-slide&gt;.box&gt;.tit:hover h3{color: rgba(146,191,46,1);}







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

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


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


}

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

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

}

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

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

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

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

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

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

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

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


}

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

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

}



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

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

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

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


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

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

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

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


}

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

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

}



</pre></body></html>