@charset "utf-8";


#solution .container{margin:0 auto; padding:30px 0;}
#solution .container>.list{margin: 0 auto;}
#solution .container>.list>ul>li{display: block; float: left; width: 48%; padding: 60px 0; border-bottom: 1px solid #eee;}
#solution .container>.list>ul>li:nth-child(even){float: right;}
#solution .container>.list>ul>li>a{ position: relative; display: block;overflow: hidden;}
#solution .container>.list>ul>li .img{ position:relative;display: block;width: 100%; text-align:left;overflow: hidden;}
#solution .container>.list>ul>li .img:after{position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.6);opacity: 0; content: '';transition: all .35s;}
#solution .container>.list>ul>li .img>img{width: 100%;height: auto; transition: all .8s;}
#solution .container>.list>ul>li .box{ position: relative;z-index: 99; left: 0;bottom:0; width: 100%; background:#eee; box-sizing: border-box;padding:30px; text-align: left;transition: all .34s;}
#solution .container>.list>ul>li .box>.tit{ width: 70%; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; line-height: 160%;}
#solution .container>.list>ul>li .box>.tit>span{font-size:1.8rem; font-weight:700; color:rgba(0,0,0,1); width: calc(100%);background-image: linear-gradient(transparent calc(100% - 2px), #000 2px);background-repeat: no-repeat;background-size: 0 100%;transition: background-size 0.3s;}
#solution .container>.list>ul>li .box>.txt{ padding: 20px 0; height: 80px; font-size: 1.4rem; color: #999; line-height: 160%;}
#solution .container>.list>ul>li .box>.more{padding-top: 20px;}
#solution .container>.list>ul>li .box>.more>span{font-size: 1.2rem;font-weight: 600; color: #666;}
#solution .container>.list>ul>li .box>.more i{ display: inline-block; vertical-align: center; color: rgba(255,64,0,1);}
#solution .container>.list>ul>li:hover .tit>span{background-size: 100% 100%;}
#solution .container>.list>ul>li:hover .img:after{opacity: 1;}
#solution .container>.list>ul>li:hover .img>img{transform: scale(1.2);}
#solution .container>.list>ul>li:hover .box{bottom: 0;}


#solution .container>.view{margin: 0 auto;padding: 50px 0;}
#solution .container>.view>.title{font-size: 2.4rem; font-weight: 700; color: #000; text-align: center; line-height: 160%;}
#solution .container>.view>.img{text-align: center;padding:50px 15px 15px 15px; margin: 0 auto;}
#solution .container>.view>.img>img{max-width: 100%;height: auto; vertical-align: center;}
#solution .container>.view>.content{padding:50px;text-align: left;font-size: 1.6rem; color: #666; line-height: 3rem;}
#solution .container>.view>.pageurl{ text-align: left; border-top: 1px solid #eee;padding: 30px;}
#solution .container>.view>.pageurl>a{display: inline-block; border: 1px solid #ddd;padding: 10px 30px;font-size: 1.4rem; color: #999; transition: all .35s;}
#solution .container>.view>.pageurl>a>i{display: inline-block; color: rgba(255,64,0,1); vertical-align: top; margin-right: 8px;}
#solution .container>.view>.pageurl>a:hover{background: rgba(255,64,0,1); box-shadow: 2px 2px 12px rgba(0,0,0,.2); color: #fff;}
#solution .container>.view>.pageurl>a:hover i{color: #fff;}


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

    #solution .container>.list>ul>li{ float: none; width: 100%; padding: 30px 0; }
    #solution .container>.list>ul>li:nth-child(even){float: none;}

}