/* CSS Document */
* {
    box-sizing: border-box;
}
h2 {
	font-size: 2rem;
}
ul,a{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;/*超链接下划线*/
}
body {
/*	min-width: 590px;*/
    font-family: Arial;
    padding: 10px;
    background: #f1f1f1;
}
.display_inline {
    display: inline;
}

/* 为文章添加卡片效果 */
.card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}
/*.card h2{
    text-align: center;
}
.card h3{
    text-align: center;
}
.card h4{
    text-align: center;
}*/

/* 页眉/Blog 标题 */
header {
	width: 100%;
    padding: 10px 30px;
    text-align: center;
    background: white;
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content:center;
}

header h1 {
/*    font-size: 50px;*/
}
#header_1 {
	display: flex;
    flex-direction: row;
    align-items:center;
    justify-content:center;
}
#header_1 img{
    height: 80px;
}
#header_1 lable{
    font-size: 2rem;
}
#header_2 {
/*    font-size: 20px;*/
    margin: 0 100px;
    /*flex-grow:2;*/
}
/* 设置上导航栏的样式 #f1f1f1*/
nav {
    overflow: hidden;
    background-color: white;
	display: flex;
    flex-direction: row;
    align-items:center;
    justify-content:space-around;
}

/* 设置 topnav 链接的样式 */
nav a {
	word-break: keep-all;
    font-size: x-large;
    margin-left: 20px;
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
nav :nth-child(1){
	margin-left: 0;
}

/* 改变鼠标悬停时的颜色 */
nav a:hover {
    background-color: #ddd;
    color: black;
}

#header_3 {
/*    font-size: 16px;*/
    display: flex;
    flex-direction: row;
    align-items:center;
	justify-content:center;
}
#header_3_l {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
}
#header_3_l_2 {
    margin-top: 8px;
}
#header_3_r img{
    height: 80px;
}



/* 页脚 */
footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}
footer div p {
	display: inline-block;
}

@media (max-width: 1500px){
	#header_2 {
    margin: 0 80px;
}
}
@media (max-width: 1451px){
	header{
		flex-wrap: wrap;

	}
	#header_1{
		order: 1;
		width: 40%;
		text-align: left;
		justify-content: flex-start;
	}
	#header_2{
		order: 2;
		width: 80%;
	}
	nav {
		width: 100%;
		justify-content: space-between;
	}
	#header_2 nav a {
		word-break: normal;
	}
	#header_3{
		order: 1;
		width: 40%;
		justify-content: flex-end;
	}

}


@media (max-width: 1309px){

}

@media (max-width: 990px) {
	nav a {
		padding: 0;
	}
/*
	* {
		font-size: 1.6rem;
	}
*/
	h2 {
		font-size: 2rem;
	}
	#header_1{
		margin-left: -30px;
		width: 40%;
	}
	#header_1 lable{
		font-size: 2.8rem;
	}
	#header_2{
		width: 100%;
		margin: 0 0 0 0;
	}
	#header_2 nav {
		width: 100%;
	}
	#header_2 nav a {
		font-size: 2.6rem;
		margin: 0;
	}
	#header_3{
		width: 60%;
	}
	#header_3 #header_3_l #header_3_l_1{
		font-size: 1.8rem;
	}
	#header_3 #header_3_l #header_3_l_2{
		font-size: 1.8rem;
	}
	#header_1 img {
		height: 120px;
	}
	#header_3_r img{
		height: 120px;
	}
    #main{
/*        margin-left: 5%;*/
/*        width: ;*/
		flex-direction: column;

    }
	#main_left_nav ul li {
		margin-left: 1rem;
	}
	#main_left_nav p {
		margin-left: 1rem;
	}


	footer div p {
		font-size: 1.8rem;
	}
}
/* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
@media (max-width: 890px) {

}

@media (max-width: 735px){

		#header_1{
		width: 50%;
	}
		#header_3{
		width: 50%;
	}
}


@media (max-width: 590px){

}