/*定义加载动画*/
@keyframes headerContentLift{
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(0px);
    }
}

/*隐藏所有超链接的默认文本样式*/
a{
    font-family: 'HeiTi';
    color: black;
    text-decoration: none;
}

/*导航栏容器，宽度为body宽度100%*/
.header_container{
    width: 100%;
    height: 60px;
    top: 0;
    position: fixed;
    background: white;
    border-radius: 5px;
    box-shadow: 0 1px 30px rgba(0,0,0,0.1);

    z-index: 20;
}

/*导航栏容器内的所有元素，默认背景白色*/
.header_container * {
    background: white;
}

/*导航栏，相对容器居中，使用auto自动布局*/
.header {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    
    background-color: rgb(179, 51, 1);
}

/*导航栏有内容的部分header_bar，以内都是flex布局*/
.header_bar{
    margin: 0 50px;
    display: flex;
    justify-content: space-between;
}

.header_bar *{
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/*导航栏的logo*/
.header_logo{
    width: 35%;
    height: 60px;
}

.header_logo_image > img{
    width: 60px;
}

.header_logo_text{
    font-size: 22px;
}

/*导航栏目录*/
.header_content{
    margin: 0;
    padding: 0;
    justify-content: right;
    align-content: right;
}

.header_content > li{
    height: 40px;
    padding: 0 30px;
    margin: 10px 0;
    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: rgba(128, 128, 128, 0.422);
    justify-content:space-around;

    transition: all 0.3s ease;
}


/*首个目录*/
#first_header_content{
    border-style: solid;
    border-left-width: 1px;
}

.header_content > li > a{
    font-size: 20px;

}

.header_content > li > a:hover{
animation: headerContentLift 0.5s ease forwards;
}