* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 去除列表默认样式 */
ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

:root {
    --primary-color: #47d9cd;   /* 定义主要颜色变量 */
    --secondary-color: #ebebeb; /* 定义次要颜色变量 */
    --font-family: 'Arial', sans-serif; /* 定义字体变量 */
  }


/* 最小宽度为1200px的时候 */
@media screen and (min-width:1200px) {
	.header-content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position:fixed;
		left: 0;
		top: 0;
		z-index: 999;
		width: 100%;
		padding: 0 10%;
        margin: 0 auto;
		height: 100px;
		background-color: #ffffff;
	}
	
	.header-content .header-logo{
        display: flex;
        align-items: center;
		height: 100px;
	}
	.header-content .header-logo a {
        display: flex;
        align-items: center;
		height: 100%;
	}
	.header-content .header-logo a img{
		height: 90%;
	}

	.header-title {
		display: flex;
		flex: 1;
		align-items: center;
		height: 100%;
	}
	
	.header-title ul{
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 8%;
		height: 100%;
	}
	.header-title ul li{
		display: flex;
		align-items: center;
		/* padding: 20%; */
		height: 100%;
		
	}
    .header-title ul li a div,
    .header-title .header-tel
     {
        font-size: 16px;
    }
	
	.header-title ul li a:hover{
		display: flex;
		align-items: center;
		background-color: var(--secondary-color);
        color: var(--primary-color);
        text-decoration: none; /* 去掉下划线 */
        font-weight: 700;
		padding: 0 10px;
		height: 100%;
		border-bottom: 4px solid var(--primary-color);
	}
}






@media screen and (min-width:950px) and (max-width:1200px) {
	.header-content{
		position:fixed;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
		padding: 0 6%;
        margin: 0 auto;
		height: 140px;
		background-color: #fff;
	}
	
	.header-content .header-logo{
		height:80px;
	}
	.header-content .header-logo  a {
		display: flex;
		align-items: center;
		height: 100%;
	}
	.header-content .header-logo  a img{
		height: 80px;
	}
	.header-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60px;
	}
	.header-title ul{
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 8% 0 0;
		height: 60px;
	}
    .header-title ul li a div,
    .header-title .header-tel
     {
        font-size: 16px;
    }
	.header-title ul li a:hover{
		display: flex;
		align-items: center;
        background-color: var(--secondary-color);
        color: var(--primary-color);
        text-decoration: none; /* 去掉下划线 */
        font-weight: 700;
		padding: 0 10px;
		height: 60px;
		border-bottom: 4px solid var(--primary-color);
	}
}









@media screen and (max-width:950px) {
	.header-content{
		width: 100%;
		padding: 0 4%;
        margin: 0 auto;
		background-color: #fff;
		/* height: 60px; */
	}
	.header-content .header-logo{
        display: flex;
        justify-content: left;
		height: auto;
		width: 100%;
	}
	.header-content .header-logo  a {
		display: flex;
		align-items: center;
		height: 60px;
	}
	.header-content .header-logo  a img{
		height: 80%;
		width: 100%;
	}
	
	.header-title ul li {
		height: 40px;
        line-height: 40px;
	}
	.header-title ul li a:hover{
		display: flex;
		align-items: center;
        background-color: var(--secondary-color);
        color: var(--primary-color);
        text-decoration: none; /* 去掉下划线 */
        font-weight: 700;
		border-bottom: 4px solid var(--primary-color);
	}
    .header-tel {
        display: none;
    }
}