button { outline: 0 } img { border: 0 } a { color: #666 } a:hover { color: #eee } .clearfix::after { clear: both; content: "."; display: block; height: 0; visibility: hidden } .clearfix { } .solution-box { background: #262c50 } .solution-bj { background: url(../images/bg.jpg); background-size: cover } .solution-header { max-width: 1210px; padding: 50px 15px; margin-left: auto; margin-right: auto; text-align: center } .solution-header h2 { margin-bottom: 10px; font-size: 36px; line-height: 46px; text-align: center; color: #fafbfe; font-weight: inherit } .solution-header p { font-size: 18px; line-height: 22px; text-align: center; color: #fff; opacity: .6 } .solution-content { max-width: 1172px; margin: 0 auto } .solution-list { width: 300px; float: left } .solution-list ul li { width: 240px; height: 90px; background: rgba(255,255,255,.15); padding-left: 30px; margin: 0 10px; position: relative } .solution-list ul li h2 { font-size: 18px; color: #fff; line-height: 90px; font-weight: inherit; margin-top: 0px; margin-bottom: 0px; } .solution-list ul .on { width: 260px; margin: 0; padding-left: 40px; background-image: linear-gradient(-180deg,#777a98 0%,#777a98 63%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F67E78,endColorstr=#F56F69); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#F67E78, endColorstr=#F56F69)" } .solution-item { margin-left: 300px; display: block; padding: 5px 10px 0; overflow: hidden } .solution-item ul li { padding: 15px 0 } .solution-item ul li h2 { font-size: 22px; line-height: 28px; color: #fff; margin: 0 0 15px; font-weight: inherit } .solution-item ul li p { opacity: .8; font-size: 14px; color: #fff; line-height: 22px } .s-btn { display: inline-block; color: #36383c; font-size: 14px; line-height: 20px; padding: 4px 20px; cursor: pointer; border: 1px solid #d4d5d7; position: relative; letter-spacing: normal } .solution-more { border: 1px solid #fafbfe; border-radius: 4px; height: 40px; width: 140px; margin: 20px 0 0; line-height: 30px; font-size: 14px; color: #fafbfe; padding-left: 30px } .solution-more em { width: 13px; height: 8px; margin-left: 10px; display: inline-block; background: url(data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAAXNSR0IArs4c6QAAAGRJREFUGBm1jkEKgDAMBKtYf+JJ3yM+UrS+RlD8inEivVr2YmAgbWeThvBHmVmCBRp5PnILF5zee7BS0lnecW/o3xCXB4dOGYCT1E0ReQbfNEK5+EWEDVbvy3Z+RZxggFoKfEkPa309oQKxul4AAAAASUVORK5CYII=) no-repeat;background-size: cover; transition: margin-left .3s ease-out } .solution-more:hover { color: #777a98; border: 1px solid #777a98 } .solution-more:hover em { margin-left: 15px; background: url(data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAAXNSR0IArs4c6QAAAI1JREFUGBljYCADMBLS87sgfQPDf4Z/LIKSYYwNDX9A6pkIaWIRkAz7z8ig//vDs+v/GxrYQOoJ2gRSBFL8+8Pz60DWP1YBKW2wpl/56beAAqogBYQAIyPDBuJsmpnG+uc6wxqggf9YNBnCCGr6j64hfdZvFkLO+XuDKZiFhaGagUfiGmN6wz9C6nHKAwAcay6AxWqjRQAAAABJRU5ErkJggg==) no-repeat } .solution-title { position: relative; } .solution-title h3 { font-size: 18px; color: #fff; width: 135px; font-weight: inherit; margin: 0 0 10px 0; } .solution-title span { border-top: 1px solid #fff; opacity: .2; display: inline-block; width: 100%; position: absolute; margin-left: 135px; top: 12px } .solution-brand { width: 100%; position: relative } .tuijian .row{ margin-top:25px; } .index_jjfa .thumbnail { margin-bottom: 0px ; background-color: transparent; padding:0px ; } .index_jjfa .thumbnail a { height: 180px; } .index_jjfa .thumbnail .caption{ padding:0px ; } .index_jjfa .thumbnail .caption h4{ color:#fff; text-align: center; font-size: 15px; margin: 0px; } .solution-brand-item { padding: 15px 20px 10px 0; width: 213px; float: left } .solution-brand-item a { border: 1px solid rgba(255,255,255,.2); border-radius: 2px; padding-left: 50px; display: block; position: relative } .solution-brand-item a i { position: absolute; width: 24px; height: 24px; left: 20px; top: 8px; color: #fff; font-size: 24px } .solution-item .solution-brand-item a p { font-size: 14px; color: #fff; line-height: 40px } .solution-brand-item .solution-more { width: auto; margin-top: 0 } .solution-brand-item a:hover { background: rgba(255,255,255,.1) } .solution-more-wrap { padding-top: 50px; padding-bottom: 50px; text-align: center; display: block } .solution-more-wrap .solution-more { width: auto; margin-top: 0; color: #999; font-size: 18px; border: none } .solution-more-wrap .solution-more:hover { color: #f56f69 } .solution-brand-item a i img { width: 22px; height: 22px; display: block; border: none } .clearFangan a { border: none; padding-left: 20px } .clearFangan a:hover { background: 0 0 } .clearFangan a img { width: 130px } .solution-item ul { display: none; padding-top: 10px; }