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

/*banner*/
.case-banner { width: 100%; min-width: 1210px; height: 300px; position: relative;}
.case-banner a { display: block; width: 100%; height: 300px; background: url(../images/banner2.jpg) no-repeat center center;}
.case-banner a img { display: block; margin: 0 auto;}

/*客户案例*/
.content-wrap { width: 100%; min-width: 1210px; background: url(../images/059.png)no-repeat; padding: 50px 0 30px;background-size: 100% 100%;}

/*左侧分类*/
.case-category.fixed { position: fixed; top: 50px;}

/*案例*/
.case-group-box h3 { font-size: 26px; color: #f9f9f9; text-align: center; padding: 10px 10px 20px; font-weight: 300;}
.case-list { padding-left: 130px;}
.case-list .case-group { width: 1100px;}
.case-list .case-item { float: left; position: relative; width: 250px; height: 325px; margin: 0 0 20px 20px; border: 1px solid #666; background: #fff;}
.case-list .case-item-pic { width: 250px; height: 250px; overflow: hidden;}
.case-list .case-item-pic img { display: block; width: 250px; height: 250px;}
.case-list .case-info-box { position: absolute; left: 0; bottom: 75px; width: 250px; height: 0; background-color: #000; overflow: hidden; filter: alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; transition: all .5s;}
.case-list .case-item:hover .case-info-box { height: 230px; padding: 10px 0;}
.case-list .case-name { color: #333; font-size: 16px; padding: 13px 10px 8px; font-weight: 700;}
.case-list .case-info { padding: 10px 20px 10px; height: 215px; color: #fff; overflow: hidden; font-size: 13px; line-height: 24px;}
.case-list .case-info .code-tab { width: 140px; overflow: hidden; margin: 0 auto 4px;}
.case-list .case-info .code-tab span { float: left; width: 68px; height: 26px; line-height: 26px; margin-right: 4px; cursor: pointer; text-align: center;}
.case-list .case-info .code-tab span.last { margin: 0;}
.case-list .case-info .code-tab span.active { background: #ff5400;}
.case-list .case-info .code-title { width: 140px; text-align: center; height: 26px; line-height: 26px; margin: 0 auto 4px;}
.case-list .case-info .code-box { margin: 0 auto 12px; overflow: hidden; width: 130px; height: 130px; background: #fff; padding: 5px;}
.case-list .case-info img { width: 130px; height: 130px; display: block; margin: 0 auto 15px;}
.case-list .case-info .btn { display: block; height: 28px; line-height: 28px; border: 1px solid #fff; border-radius: 3px; color: #fff; transition: all .3s; letter-spacing: 2px; width: 125px; text-align: center; margin: 0 auto;}
.case-list .case-info-box-btn .case-name { position: absolute; top: 40%; margin-top: -16px;}
.case-list .case-info-box-btn .case-info .btn { position: absolute; top: 50%; margin-top: -16px; margin-left: -56px; left: 50%;}
.case-list .case-info .btn:hover { background: rgba(255,255,255,.1);}
.case-mode { text-align: left; padding: 0 10px;}
.case-mode span { vertical-align: top; padding-right: 8px;}
.case-mode span.last { padding: 0;}
.case-mode .mode-icon { cursor: pointer;}
.case-mode .mode-icon .icon-pc { background-position: -109px -39px;}
.case-mode .mode-icon .icon-wap { background-position: -81px -40px;}
.case-mode .mode-icon .icon-app { background-position: -139px -38px;}