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

#solution{ position: relative;z-index: 5; background: #fff; margin: 0 auto;}

#solution .list{margin: 0 auto;}
#solution .list>ul{margin: 0 auto;}
#solution .list>ul>li{ position: relative; display: block; float: left;width: 48.5%; margin-bottom: 3%;overflow: hidden;  box-sizing: border-box; transition: all .35s; }
#solution .list>ul>li:after{ position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; opacity: 0; background: rgba(1,64,151,.6); content: ''; transition: all .35s;}
#solution .list>ul>li:nth-child(even){float: right;}
#solution .list>ul>li .con{position: absolute;z-index: 5; left: 50%; top: 50%; margin-left: -15%; margin-top: -70px; width: 30%;  height:140px; box-sizing: border-box; text-align: center; background: rgba(1,64,153,.7); transition: all .35s;}
#solution .list>ul>li .con>.ico{padding: 20px 0 10px 0; transition: all .35s;}
#solution .list>ul>li .con>.ico>img{height: 70px; width: auto; transition: all .35s;}
#solution .list>ul>li .con>.tit{color: #fff;font-size: 1.6rem;}
#solution .list>ul>li .img{text-align: center;}
#solution .list>ul>li .img>img{ width: 100%;height: auto;}
#solution .list>ul>li:hover{ transform: scale(1.1); box-shadow: 2px 3px 20px rgba(0,0,0,.4);}
#solution .list>ul>li:hover .con{ background: rgba(1,64,153,0);transform: scale(1.2);}
#solution .list>ul>li:hover:after{opacity: 1;}

#solution .view{ margin:0 auto; padding-top: 100px;}
#solution .view>.box{position: relative;}
#solution .view>.box>.tit{position: absolute;z-index: 4; left: 10%;bottom: 0;box-sizing: border-box;padding: 50px; background: rgba(1,64,153,.8); font-size: 3.6rem; font-weight: 700 ;color: rgba(255,255,255,1);}
#solution .view>.box>.tit>img{display: inline-block;margin-right: 20px;}
#solution .view>.box>.img{ text-align: center;}
#solution .view>.box>.img>img{width: 100%;height: auto;}
#solution .view>.tags{margin:0 auto;}
#solution .view>.tags>.item{ padding:50px 0;}
#solution .view>.tags>.item>.tit{ position: relative;padding: 20px 0; text-align: center; font-size: 1.8rem; font-weight: 700; color: rgba(1,64,153,1);}
#solution .view>.tags>.item>.tit:after{position: absolute;z-index: 3; left: 50%;bottom: 0; margin-left: -20px; width: 40px;height: 2px;background: rgba(1,64,153,1);content: '';transition: all .35s;}
#solution .view>.tags>.item>.con{ padding-top: 30px; font-size:1.6rem; line-height:2.8rem; color:#666;}
#solution .view>.tags>.item>.con>p{margin-bottom:20px;}
#solution .view>.tags>.item>.con img{max-width:100%;height:auto;}
#solution .view>.tags>.item>.con table{ border-top:1px solid #ddd; border-left:1px solid #ddd; box-sizing: border-box; margin:0 auto; width:100%;}
#solution .view>.tags>.item>.con table td{ color:#666; font-size:1.4rem; padding:8px; text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
#solution .view>.tags>.item>.con .tableWap{ overflow:hidden; overflow-x:auto;}
#solution .view>.pageurl{margin:0 auto;padding:50px 0 80px 0; text-align: center;}
#solution .view>.pageurl a{ display: inline-block;padding: 12px 80px; color: #666; font-size: 1.8rem;  border-radius: 50px; background: #eee;  transition: all .35s;}
#solution .view>.pageurl a:hover{ color: #fff;  background: rgba(1,64,153,1); box-shadow: 2px 3px 20px rgba(0,0,0,.4);}


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


    #solution .view>.box>.tit{padding: 40px; font-size: 2.4rem;}
    #solution .view>.box>.tit>img{width: 100px;height: auto;}


}

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

    #solution .list>ul>li .con{ margin-left: -12%; margin-top: -50px; width: 24%;  height:100px;}
    #solution .list>ul>li .con>.ico>img{height: 40px;}
    #solution .list>ul>li .con>.tit{font-size: 1.4rem;}

    #solution .view>.tags>.item>.tit{ font-size: 1.6rem;}
    #solution .view>.tags>.item>.con{ font-size:1.4rem; line-height:2.4rem;}


}

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

    #solution .list>ul>li .con{ margin-left: -14%; width: 28%;}

    #solution .view>.pageurl a{ padding: 10px 50px; font-size: 1.6rem;}

}

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

    #solution .list>ul>li{  float: none;width: 100%; }
    #solution .view>.tags>.item{ padding-bottom: 0;}
    #solution .view>.box>.tit{left: 0;bottom: 0;padding: 0; width: 100%;height: 50px; line-height: 50px; text-align: center; font-size: 1.8rem;}
    #solution .view>.box>.tit>img{width:34px;}





}