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

#solution{ margin:0 auto;}

#solution>.list{ width:86%; padding:50px 0;margin:0 auto;}
#solution>.list>ul{margin:0 auto;padding:0;}
#solution>.list>ul>li{display:block; float:left; width:23%;overflow:hidden; padding:1%;}
#solution>.list>ul>li:nth-child(4n+1){clear:both;}
#solution>.list>ul>li>a{display:block;}
#solution>.list>ul>li .img{ position:relative; overflow:hidden;margin:0 auto;}
#solution>.list>ul>li .img:after{position:absolute;z-index:3;left:0;bottom:0; width:100%;height:0;background:rgba(2,106,181,.8);opacity:0; content:''; transition:all .35s;}
#solution>.list>ul>li .img>img{width:100%;height:auto; transition:all 1s;}
#solution>.list>ul>li .con{margin:0 auto; padding:20px 0; text-align:center;}
#solution>.list>ul>li .con>h2{ position:relative; display:inline-block; box-sizing:border-box; padding:0; font-size:20px; color:#333;margin:0 auto; transition:all .35s;}
#solution>.list>ul>li .con>h2:after{ position:absolute;z-index:2;left:0;top:50%; margin-top:-1px; opacity:0; width:20px;height:1px; background:#1761ab;content:''; transition:all .35s;}
#solution>.list>ul>li .con>p{font-size:14px; color:#999;padding:20px 0; margin:0 auto;}
#solution>.list>ul>li:hover .img>img{transform:scale(1.3);}
#solution>.list>ul>li:hover .img:after{height:20px;opacity:1;}
#solution>.list>ul>li:hover .con{background:#fff;}
#solution>.list>ul>li:hover .con>h2{padding-left:30px; color:#1761ab;}
#solution>.list>ul>li:hover .con>h2:after{opacity:1;}


#solution>.view{ position:relative; width:100%;margin:0 auto;}
#solution>.view>.list{ position:absolute;z-index:4; width:35%; height:100%; box-sizing:border-box; text-align:center;padding:1%; border-right:1px solid #ddd; max-width:950px}
#solution>.view>.list>.img{ text-align:center;}
#solution>.view>.list>.img>img{width:100%;height:auto;}
#solution>.view>.list>.tit{font-size:28px;padding:20px 0; color:#1761ab;}
#solution>.view>.list>.nav{padding:40px 40px 0 0;}
#solution>.view>.list>.nav>a{display:block;padding:20px 0; font-size:15px; color:#666; border-bottom:1px solid #ddd;}
#solution>.view>.container{ position:relative; width:65%;box-sizing:border-box;padding:10% 6%; background:#fff; min-width: calc(100% - 950px); }
#solution>.view>.container .back{ position:absolute;z-index:5;left:0;top:0;}
#solution>.view>.container .back>a{display:inline-block; font-size:16px; color:#fff; background:#1c73c5;padding:20px 40px; transition:all .35s;}
#solution>.view>.container .back>a>img{height:28px; width:auto;margin-right:10px;}
#solution>.view>.container .back>a:hover{background:#022347;}
#solution>.view>.container .item>.tit{border-bottom:1px solid #ccc; padding:20px 0; text-align:left;font-size:20px; font-weight:bold; color:#333;}
#solution>.view>.container .item>.con{padding:50px 0; text-align:left; font-size:16px; line-height:28px; color:#666;}
#solution>.view>.container .item>.con p{margin-bottom:30px;}
#solution>.view>.container .item>.con img{max-width:100%; height:auto;}


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

  #solution>.list>ul>li{ width:48%;}
  #solution>.view>.list>.tit{font-size:24px;}
  #solution>.view>.container .item>.con{padding:30px 0; font-size:14px; line-height:24px;}


}
@media only screen and (max-width: 780px){
  #solution>.list{padding:50px 0;}
  #solution>.view>.list{position:relative; float:none; width:100%;height:auto; border-right:0; border-bottom:1px solid #ddd;}
  #solution>.view>.container{ position:relative; float:none; width:100%;box-sizing:border-box;padding:10% 6%;}
  #solution>.view>.container .back{ top:auto; left:auto; right:0; bottom:0;}
  #solution>.view>.container .back>a{font-size:14px;padding:10px 40px;}
  #solution>.view>.container .item>.con p{margin-bottom:10px;}
}

@media only screen and (max-width: 640px){
  #solution>.list>ul>li{ float:none; width:100%;}
}