/* ============================================
   头部移动端样式 (Header Mobile Styles)
   ============================================ */

/* 移动设备全局样式 (最大宽度 767px) */
@media screen and (max-width: 767px) {
	/* 防止横向滚动条 */
	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	* {
		box-sizing: border-box;
	}

	/* 确保所有容器不会超出视口 */
	.container {
		width: 100%;
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}
}

/* 移动设备 (最大宽度 767px) */
@media screen and (max-width: 767px) {
	/* 头部区域 */
	.header {
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 180px;
		padding: 15px 0;
		box-sizing: border-box;
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	.header .row {
		margin: 0;
	}

	.header > .container {
		width: 100%;
		max-width: 100%;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.header .logo {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		max-width: 300px;
		height: auto;
		margin: 0 auto 15px;
		text-align: center;
		box-sizing: border-box;
	}

	.header .logo img {
		max-height: 50px;
		margin: 0 auto;
		max-width: 100%;
	}

	.header .search-wrapper {
		justify-content: center;
		height: auto;
	}

	.header .search {
		position: relative;
		top: auto;
		right: auto;
		max-width: 100%;
		width: 100%;
		margin-top: 15px;
		border: 1px solid #ffffff;
		background-color: #1b6bb4;
		box-sizing: border-box;
	}

	.header .search input {
		color: #ffffff;
		width: auto;
		flex: 1;
		max-width: 100%;
		box-sizing: border-box;
	}

	.header .search .form-control::placeholder {
		color: rgba(255, 255, 255, 0.7);
	}

	/* 导航栏移动端样式 */
	.banner {
		width: 100%;
		max-width: 100%;
		padding: 0;
		height: auto;
		box-sizing: border-box;
		overflow: hidden;
	}

	.banner .container {
		width: 100%;
		max-width: 100%;
		padding: 0;
		box-sizing: border-box;
	}

	.banner > .container > ul {
		display: none;
		flex-direction: column;
		width: 100%;
		background-color: #0052a3;
	}

	.banner > .container > ul.active {
		display: flex;
	}

	.banner .item {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		flex: none;
	}

	/* 移动端隐藏分割线 */
	.banner .item:not(:last-child)::after {
		display: none;
	}

	.banner .item > a {
		padding: 15px 20px;
		width: 100%;
		text-align: left;
		height: auto;
		line-height: 1.5;
	}

	/* 移动端下拉菜单 */
	.banner .item > ul {
		position: static;
		display: none;
		background-color: #004080;
		box-shadow: none;
		margin-left: 20px;
	}

	.banner .item.active > ul {
		display: flex;
	}

	.banner .item > ul li a {
		padding: 12px 20px;
		color: #ffffff;
	}

	.banner .item > ul li a:hover {
		background-color: rgba(255, 255, 255, 0.1);
		color: #ffffff;
	}

	/* 显示移动端菜单按钮 */
	.banner .mobileMenu {
		display: block;
		position: fixed;
		left: 15px;
		right: auto;
		top: 15px;
		background-color: #1b6bb4;
		width: 40px;
		height: 40px;
		padding: 8px;
		box-sizing: border-box;
		z-index: 1001;
	}

	.banner .openMenu {
		display: block;
	}

	.banner .openMenu.active {
		display: block;
	}

	.banner .openMenu.active ~ .closeMenu {
		display: none;
	}

	.banner .closeMenu.active {
		display: block;
	}
}

/* iPhone 6/7/8 优化 (375px) */
@media screen and (max-width: 375px) {
	.header {
		width: 100%;
		max-width: 100%;
		min-height: 160px;
		padding: 10px 0;
		box-sizing: border-box;
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	.header > .container {
		width: 100%;
		max-width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.header .logo {
		max-width: 250px;
		margin-bottom: 10px;
		box-sizing: border-box;
	}

	.header .logo img {
		max-height: 45px;
		max-width: 100%;
	}

	.header .search {
		height: 36px;
		margin-top: 10px;
		width: 100%;
		max-width: 100%;
		background-color: #1b6bb4;
		box-sizing: border-box;
	}

	.header .search input {
		font-size: 14px;
		padding: 0 40px 0 12px;
		height: 36px;
		max-width: 100%;
		box-sizing: border-box;
	}

	.banner {
		width: 100%;
		max-width: 100%;
		height: 50px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.banner .container {
		width: 100%;
		max-width: 100%;
		padding: 0;
		box-sizing: border-box;
	}

	.banner .mobileMenu {
		width: 36px;
		height: 36px;
		left: 10px;
		right: auto;
		top: 10px;
		padding: 7px;
		background-color: #1b6bb4;
		box-sizing: border-box;
	}

	.banner .item > a {
		padding: 12px 15px;
		font-size: 15px;
		height: auto;
		line-height: 1.4;
		box-sizing: border-box;
	}

	.banner .item > ul li a {
		padding: 10px 15px;
		font-size: 14px;
		box-sizing: border-box;
	}
}

/* 小屏幕移动设备 (最大宽度 480px) */
@media screen and (max-width: 480px) {
	.header {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	.header > .container {
		width: 100%;
		max-width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.header .logo {
		width: 100px;
		height: 35px;
		max-width: 100%;
		box-sizing: border-box;
	}

	.header .search {
		height: 32px;
		width: 100%;
		max-width: 100%;
		background-color: #1b6bb4;
		box-sizing: border-box;
	}

	.header .search input {
		font-size: 13px;
		padding: 0 35px 0 12px;
		max-width: 100%;
		box-sizing: border-box;
	}

	.banner {
		width: 100%;
		max-width: 100%;
		height: auto;
		box-sizing: border-box;
		overflow: hidden;
	}

	.banner .container {
		width: 100%;
		max-width: 100%;
		padding: 0;
		box-sizing: border-box;
	}

	.banner .item > a {
		padding: 12px 15px;
		font-size: 14px;
		height: auto;
		line-height: 1.5;
		box-sizing: border-box;
	}

	.banner .item > ul li a {
		padding: 10px 15px;
		font-size: 13px;
		box-sizing: border-box;
	}
}