body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,menu,nav,section {
    margin:0;padding:0;font-family: "微软雅黑", "宋体", Arial, sans-serif;
}
body,button,input,select,textarea{
    font:13px/1.5 arial,tahoma,\5b8b\4f53;
}
ul,li{
    list-style:none;
}
/*全局样式*/
.fn-clear:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.fn-clear {
    zoom:1; /* for IE6 IE7 */
}
/* 隐藏、显示, 通常用来与 JS 配合 */
.hide {
    display:none;
}
.show {
    display:block;
}

/* 浮动左右, 设置内联, 减少浮动带来的bug */
.fl,.fr {
    display:inline;
}
.fl {
    float:left;
}
.fr {
    float:right;
}

/*text-align*/
.ta-c{text-align: center;}
.ta-l{text-align: left;}
.ta-r{text-align: right;}

a{color:#333;}
a:hover{color:#2077fa;text-decoration:none;}
a:focus{color:#2077fa;text-decoration:none;}

.family-wryh{font-family: "微软雅黑"}

/*padding margin值*/

.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt25{padding-top:25px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}

.pl0{padding-left:0!important;}
.pl20{padding-left:20px;}
.pl37{padding-left:37px;}
.pl40{padding-left:40px;}
.pl80{padding-left:80px;}
.pl90{padding-left:90px;}
.pl240{padding-left:240px;}
.pr0{padding-right:0;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr40{padding-right:40px;}

.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}

.w1{width:470px;}
.w100{width:100%;}
.h100{width:100%;}

.fs12{font-size:12px;}
.col8c8c8a{color:#b3b3b2;}
.coldedede{color:#dedede;}


.more{
    border:1px solid #2077fa;
    padding: 5px 15px;
    display:inline-block;
    color:#2077fa;
}
.more:hover{
    background-color:#2077fa;
    color:#fff;
}



/** 头部 **/
header{
    height:106px;
    line-height:106px;
}
.logo{
    width:356px;
}
h2{
    font-size:18px;
    font-weight:700;
    text-align:center;
}
.line{
    height:4px;
    background-color:#e4e3e3;
}

/** nav **/
.top-nav{
    margin-right:8em;
}
nav{
    height:106px;
    overflow:hidden;
}
nav a{
    position:relative;
    color:#333;
    font-size:14px;
    float:left;
    height:106px;
    line-height:136px;
    width:102px;
    margin:0 2px;
}
nav a.nav-home{
    width:90px;
}
nav a::before,nav a::after{
    content: attr(data-name);
    display:block;
    background: url(../img/nav-icon.png) no-repeat;
    position:absolute;
    top:0;
    left:0;
    text-align:center;
    width:102px;
    height:106px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

nav a.nav-home::before,nav a.nav-home::after{
    width:90px;
}

nav a.nav-home::before{
    background-position:35px 30px;
}
nav a.nav-about::before{
    background-position:-72px 30px;
}
nav a.nav-prod::before{
    background-position:-198px 30px;
}
nav a.nav-app::before{
    background-position:-326px 30px;
}
nav a.nav-cont::before{
    background-position:-452px 30px;
}

nav a.nav-home::after{
    background-position:35px -52px;
}
nav a.nav-about::after{
    background-position:-72px -52px;
}
nav a.nav-prod::after{
    background-position:-198px -52px;
}
nav a.nav-app::after{
    background-position:-326px -52px;
}
nav a.nav-cont::after{
    background-position:-452px -52px;
}

nav a::before{
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    z-index: 2;
}
nav a::after{
    top:106px;
    z-index:100;
    color:#0868fa;
    background-color:#f5f5f5;
}

nav a:hover::before {
    -webkit-transform: translate(0, -116px);
    -ms-transform: translate(0, -116px);
    transform: translate(0, -116px);
}
nav a:hover::after {
    -webkit-transform: translate(0, -106px);
    -ms-transform: translate(0, -106px);
    transform: translate(0, -106px);
}

nav .active{
    color:#0868fa;
    background-color:#f5f5f5;
}
nav a.active::before{
    background-position-y:-52px;
}
nav a.active:hover::after{
    display:none;
}
nav a.active:hover::before{
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.banner{

}
.banner img{
    width:100%;
}

/** footer **/
footer{
    padding:30px 0 20px;
    line-height:24px;
    background-color:#323740;
    color:#fff;
}
footer .w1{
    margin:0 auto;
}

.f-logo{
    width:70px;
    margin-top:4px;
}

.wrap{
    width:90%;
    margin:0 auto;
}

/** 内容样式 **/
.h-title{
    font-size: 18px;
    font-weight: 300;
    position:relative;
    padding-left:26px;
    height:26px;
    line-height:25px;
    text-shadow: rgba(0,0,0,.15) 0 0 1px;
}
.h-title:before{
    content: '';
    position:absolute;
    left:14px;
    width:4px;
    height:26px;
    background-color:#2275f6;
}
.h-title-r{
    text-align:right;
}
.h-title-r a{
    display:inline-block;
    padding:5px 15px;
    margin:0 0 0 10px;
}
.h-title-r .pro-list{
    color:#333;
    background:#fff;
    transition:background 1s,color;
}
.h-title-r .pro-list:hover{
    color:#fff;
    background:#2077fa;
}

/* 公司简介 */
.h-int{
    border-bottom:1px solid #dedede;
}
.h-int p{
    line-height:24px;
}

.about-pic{
    height:200px;
    width:60%;
    overflow:hidden;
}
.about-pic img{
    width:100%;
}

/** 首页产品列表、产品中心列表**/
.prod-h{

}
.prod-h .img-bor div{
    border:1px solid #f3f2f2;
    overflow: hidden;
}
.prod-h img{
    width:100%;
    transition:transform 0.5s;
}
.prod-h .img-bor:hover img{
    transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1);
}
.prod-h span{
    height:66px;
    line-height:66px;
    display:block;
    text-align:center;
    font-size:15px;
    color:#797878;
    text-shadow: rgba(0,0,0,.15) 0 0 1px;
}

.prod-h .img-bor{
    padding:24px 24px 0;
    box-shadow: 0 0 15px rgba(51,51,51,.10);
}
.prod-h .img-bor:hover{
    border-color:#80aff6;
    box-shadow: 0 0 25px rgba(32,119,250,.2);
}


/** 品牌 **/
.link-wrap{
    padding:0 14px;
}
.link-wrap ul{
    display:flex;
}
.link-wrap li{
    padding:1px;
    flex:1;
    border:1px solid #eee;
    border-right:none;
}
.link-wrap li img{
    width:100%;
}
.link-wrap li:first-child{

}
.link-wrap li:last-child{
    border-right:1px solid #eee;
}
.link-wrap li img{
    width:100%;
}


@media (min-width:1260px) {
    .wrap{
        width:1170px;
    }
    .top-nav{
        margin-right:10em;
    }
}

@media (max-width:1150px) {
    .top-nav{
        margin-right:0;
    }
}

@media (max-width:1120px) {
    .logo{
        width:320px;
    }
    .logo img{
        width:320px;
    }
}

@media (max-width:990px) {
    .logo{
        width:280px;
    }
    .logo img{
        width:280px;
    }
    header {
        height: 106px;
        line-height: 106px;
    }
    .nav-sty1{

    }
    .nav-sty1 a{

    }
}




/** css3动画 **/

.animate1:before, .animate1:after{
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-sty1,.btn-sty2,.btn-sty3{
    display: inline-block;
    position: relative;
    opacity: .999;
    border-radius:0;
}
.btn-sty1 {
    padding: 5px 15px;
    border: 1px solid #2077fa;
    color: #2077fa;
}
.btn-sty2 {
    padding:10px 50px;
    border: 1px solid #2077fa;
    color: #2077fa;
}
.btn-sty3 {

}

.h-title-r .btn-sty1:hover{
    background-color:#fff;
}

/** 蓝色按钮:btn-sty1 **/

.animate1{
    background-color: transparent;

}
.animate1:before, .animate1:after {
    content: '';
    width: 0;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: -1;
}
.animate1:before {
    left: 50%;
}
.animate1:after {
    right: 50%;
}
.animate1:hover {
    color: #fff;
}
.animate1:hover:before, .animate1:hover:after {
    width: 50%;
    opacity: 1;
}
.animate1.btn-blue:before, .animate1.btn-blue:after {
    background-color: #2077fa;
}
.animate1.btn-blue:hover {
    border-color: #2077fa;
}

/** 轮播图 **/
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right{
    font-size:26px;
}


/** 内页 **/
.content{
    min-height:500px;
}

.content p{
    padding:8px 0;
    line-height:24px;
    font-size:14px;
}

.flex-container {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items:stretch;
}

.flex-item {

}

.col-title{
    margin:25px 0 30px;
    padding:0 4px;
    height:36px;
    line-height:30px;
    border-bottom:1px solid #e6e6e6;
}
.col-title h3{
    font-size:17px;
    line-height:30px;
}
.col-title h3 span{
    background: url(../img/nav-icon.png) -113px -79px no-repeat;
    width:20px;
    height:20px;
    padding-left:27px;
    float:left;
    margin-top:4px;
}
.col-title h3 .product{
    background-position: -240px -79px;
}
.col-title h3 .app{
    background-position: -368px -81px;
    margin-top:5px;
}
.col-title h3 .contact{
    background-position: -493px -81px;
    margin-top:5px;
}

.col-title h3 em{
    font-size:13px;
    color:#bdbdbd;
    display:inline-block;
    margin-left:5px;
}
.col-title .current{
    color:#878686;
    line-height:36px;
    font-size:12px;
}

/* 左侧导航 */
/*.sub-nav{

}
.sub-nav a{
    display:inline-block;
    height:32px;
    line-height:32px;

    padding:0 20px;
    margin:0 5px;
}
.sub-nav a:hover{
    color:#fff;
    background-color:#0960e4;
}
.sub-nav .active{
    color:#fff;
    background-color:#0960e4;
}*/


.left-nav{
    background-color:#f6f5f5;
}
.left-nav li{
    width:200px;
    height:40px;
    line-height:40px;
    background-color:#eee;
    border-bottom:1px solid #e7e7e7;
    margin-bottom:3px;

}
.left-nav li em{
    font-style:normal;
}
.left-nav li a{
    padding:0 10px 0 20px;
    display:block;
    font-size:14px;
}
.left-nav li a:hover{
    background-color:#0960e4;
    color:#fff;
}
.left-nav li .active{
    background-color:#0960e4;
    color:#fff;
}

.content .contact-wrap .contact-tit{
    font-size:18px;
    font-weight:700;
    padding:10px 0 20px;
}

.content .contact-wrap p{
    line-height:30px;
    font-size:15px;
}


/** 产品列表 **/
.prod-item{
    width:280px;
    height:300px;
    float:left;
    margin:0 30px 0 0;
}

/** 产品应用列表 **/

.appl-list{

}
.appl-list .row {
    margin-right: -25px;
    margin-left: -25px;
}
.appl-list .col-lg-4,.appl-list .col-md-4,.appl-list .col-sm-4{
    padding-right: 25px;
    padding-left: 25px;
}
.appl-list img{
    width:100%;
    transition:transform 0.5s;
}



.appl-list .row div:first-child .list{
    padding-left:0;
}
.appl-list .row div{
    overflow:hidden;
}
.appl-list .row div:hover img{
    transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1);
}
.appl-list .row span{
    display:block;
    height:46px;
    line-height:46px;
    text-align:center;
    font-size:17px;
    position:relative;
}
.appl-list .row div span:after{
    content:attr(data-name);
    width:100%;
    height: 0;
    opacity: 1;
    left:0;
    position: absolute;
    bottom:0;
    background-color:#2077fa;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    z-index:10;
    color:#fff;
}

.appl-list .row div:hover span:after{
    opacity: 1;,
    color:#fff;
    height:100%;
}