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

#solution{margin: 0 auto; padding-bottom: 100px;}
#solution>.list{display: block; margin: 0 auto; padding: 50px 0;}
#solution>.list ul{display: block;margin: 0 auto;}
#solution>.list ul>li{display: block; background: #fff; border: 1px solid #eee;  margin-bottom: 3%; transition: all .35s;}
#solution>.list ul>li>a{ position: relative; display: block; box-sizing: border-box;}
#solution>.list ul>li:nth-child(even) .img{ float: right;}
#solution>.list ul>li:nth-child(even) .box{float: left;}
#solution>.list ul>li>a .img{ position:relative; width: 40%; float:left; overflow: hidden;}
#solution>.list ul>li>a .img>img{width: 100%;height: auto; transition: all 1s;}
#solution>.list ul>li>a .box{ position: relative; width: 60%; float: right; text-align: left; box-sizing: border-box;padding: 50px 100px;}
#solution>.list ul>li>a .box:after{ position: absolute;z-index: 12; top: 50px; left: -60px; width: 0;height: 0;border: 30px solid;border-left-color: transparent;border-right-color: #001386;border-top-color:  transparent;border-bottom-color: transparent; content: '';opacity: 0; transition: all .35s;}
#solution>.list ul>li>a .box>.tit{font-size:2.6rem; color: #333;}
#solution>.list ul>li>a .box>.txt{font-size:1.6rem; color: #999; line-height: 24px; padding-top: 20px;}
#solution>.list ul>li:nth-child(even)>a .box:after{border-left-color: #001386;border-right-color: transparent; left: auto; right: -60px;}
#solution>.list ul>li>a:hover .tit{color: #fff;}
#solution>.list ul>li>a:hover .txt{color: rgba(255,255,255,.7)}
#solution>.list ul>li:hover {background: #001386;}
#solution>.list ul>li:hover .box:after{opacity: 1;}