/* 产品菜单导航栏 begin */
.navbar{
    /* z-index: 2;
    position: sticky;
    top:0; */
    margin-top:-5px;
    background-color: #0085d1;
    height: 80px;
}
.navbar a{
    text-decoration: none;
}
.navbar ul{
    width:1200px;
    margin:0 auto;
    padding:0;
    list-style: none;
    display:box; display:-webkit-box; display:-moz-box; 
}
.navbar li{
    position: relative;
    box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; 
    text-align: center;
    line-height: 80px;
}
.navbar li::after{
    position: absolute;
    right:0;
    top:50%;
    margin-top:-15px;
    display: inline-block;
    content:'';
    width:1px;
    height: 30px;
    background-color: #fff;
}
.navbar ul>li:last-child::after{
    background-color: transparent;
}
.navbar li>a{
    display: block;
    color:#fff;
    font-size:18px;
    /* 限制一行 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
    /* active */
.navbar li.active>a{
    font-size:24px;
    font-weight: bold;
}
.navbar li.active::before{
    position: absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    content:'';
    width: 0; 
    height: 0; 
    border-width: 15px;
    border-style: solid;
    border-color:transparent transparent #fff transparent;
}
/* 产品菜单导航栏 end */

 /* 产品中心 begin */
 .case{
    width:1200px;
    margin:0 auto;
    padding-bottom:100px;
}
.case .oneline{ 
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
.case a{
    text-decoration: none;
}

.case .case-list{
    padding:0;
    margin:0;
    list-style: none;
    margin-bottom:50px;
}
.case .case-list li{
    display: inline-block;
    width:280px;
    margin-right:18px;
    margin-top:50px;
}
.case .case-list li:nth-of-type(4n){
    margin-right:0;
}

    /* 案例图片 */
.case .case-list .main-pic{
    position: relative;
    font-size:0;
}
.case .case-list img{
    width:100%;
    height: 280px;
}
.case .case-list .up-graybox{
    transition: all 0.4s ease 0s;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.case .case-list .up-graybox>.bgbox{
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}
.case .case-list .up-graybox>.stit{
    font-size: 16px;
    line-height: 30px;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15px;
    color: #fff;
}
.case .case-list .up-graybox>.stit>.line {
    display: inline-block;
    width: 100px;
    height: 1px;
    background-color: #f2f2f2;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    transition: all 0.6s ease 0s;
}
.case .case-list .up-graybox>.stit>.line.lineb{
    bottom:0;
}

    /* 案例图片hover效果 */
.case .case-list li:hover .up-graybox{
    opacity: 1;
}
.case .case-list li:hover .line{
    width:10px;
    margin-left: -5px;
}
.case .case-list li:hover .tit{
    background-color: #0085d1;

} 
.case .case-list li:hover .tit>h3{
    color:#fff;
}  

    /* 案例标题 */
.case .case-list .tit{
    margin-top:-5px;
    padding:10px 0;
    background: #fff;
    transition: .3s;
}
.case .case-list h3{
    display: inline-block;
    margin:0;
    font-size:18px;
    color:#444;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    padding-left: 5%;
    width: 70%;
    font-weight: normal;
}

    /* 标题箭头 */
.case .case-list .arrow{
    float: right;
    display: block;
    width: 20%;
    height: 60px;
    background: url(../images/arrow.png) no-repeat 10px center; 
    transition: 0.5s;
    border-left:1px solid #eee;
}
.case .case-list li:hover .arrow{
    background: url(../images/arrow-on.png) no-repeat 18px center; /* 背景定位位移 */
}
/* 产品中心 end */