.headerWrap{
    position: fixed;
    width:100%;
    min-width: 1200px;
    height: 90px;
    font-size: 16px;
    line-height: 90px;
    color:white;
    z-index: 999;
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
    overflow-y: paged-x-controls;
}
.headerWrap.headerFixed{
    background-color:#050c21;
}
.header{
    height: 100%;
    width:1200px;
    margin: 0 auto;
}
.header .ztb-logo{
    float: left;
    height: 100%;
    width:150px;
    background-image: url("../images/home/ztb-logo-header.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    margin-right: 15px;
    margin-left: 15px;
    transform: scale(1.3, 1.3);
}
.header .logo{
    float: left;
    height: 100%;
    width:125px;
    margin-left: 20px;
    background-image: url("../images/home/logo_home_navbar.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.header .logo>a{
    display: block;
    width:100%;
    height: 100%;
}
.header .nav{
    float: right;
}
.header .nav>div{
    cursor: pointer;
    position: relative;
    float: left;
    margin-left: 53px;
}
.navTitle{
    position: relative;
    display: inline-block;
}
.navTitle.index{
    top:4px\0;
}
.navTitle.index>a{
    display: inline-block;
    width:100%;
    height: 100%;
    text-decoration: none;
    color: white;
}
.navTitle.index.active>a{
    font-family: 'sy-medium';
    color: #cf1d1d;
}
.header .nav>div .navTitle:after{
    position: absolute;
    content: '';
    display: none;
    width: 64px;
    height: 4px;
    bottom: 0px;
    background-color: #cf1d1d;
    animation: changeShort 0.5s linear forwards;
    -webkit-animation: changeShort 0.5s linear forwards;
}
.header .nav>div .navTitle.index:after{
    left: -50%;
}
@keyframes changeShort {
    0%{transform: scaleX(1);-webkit-transform:scaleX(1)}
    100%{transform: scaleX(0.5);-webkit-transform:scaleX(0.5)}
}
@-webkit-keyframes changeShort {
    0%{transform: scaleX(1);-webkit-transform:scaleX(1)}
    100%{transform: scaleX(0.5);-webkit-transform:scaleX(0.5)}
}

.header .nav>div:hover .navTitle:after{
    display: block;
}
.header .nav>div:hover .navLis{
    display: block;
}
.header .nav>div .navTitle.active:after{
    display: block;
}
.navTitle.active{
    font-family: 'sy-medium';
    color:#cf1d1d;
}
.navTitle:hover{
    font-family: 'sy-medium';
    color:#cf1d1d;
    /*border-bottom: 4px solid #cf1d1d;*/
}
.navTitle.index:hover>a{
    font-family: 'sy-medium';
    color:#cf1d1d;
}
.navLis{
    display: none;
    top:90px;
    position: absolute;
    width: 168px;
    left: -53px;
    opacity: 0;
    animation: headerFadeDown 0.2s linear forwards;
    -webkit-animation: headerFadeDown 0.2s linear forwards;
}
@keyframes headerFadeDown {
    0%{transform: translateY(-10px);opacity: 0;}
    100%{tranform:translateY(0px);opacity: 1}
}
.navLis li{
    cursor: pointer;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(71,78,92,0.5);
}
.navLis li:hover{
    background-color: rgba(71,78,92,0.3);
}
.navLis li a{
    display: block;
    width:100%;
    height: 100%;
    text-decoration: none;
    color:#ffffff;
}
.navLis li:hover a{
    font-family: 'sy-medium';
    color:#cf1d1d;
}