/* 针对大屏幕的样式 */
@media screen and (min-width: 1024px) {
	.joinUsContent {
		width: 100%;
		display: flex;
	}

	.joinUsContentLeft {
		width: 75%;
		padding-right: 30px;
		box-sizing: border-box;
	}

	.joinUsContentall {
		width: 100%;
	/*	padding-right: 30px; */
		box-sizing: border-box;
	}
	
	.joinUsContentRight {
		flex: 1;
	}

	.joinUsContentRight img {
		width: 100%;
	}

	.joinUsContentTxt {
		font-size: 16px;
		line-height: 1.5em;
		margin-top: 20px;
	}

	.joinUsPop {
		margin-top: 30px;
	}

	.PopTitle {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.PopContent {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		grid-template-columns: 1fr 1fr;

	}

	.popBox {
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
		overflow: hidden;
		border-radius: 8px;
		padding: 20px;
		box-sizing: border-box;
	}




	.info-container {
		width: 100%;
		text-align: left;
	}

	.popTop {
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.popTitle {
		font-size: 18px;
		font-weight: bold;
	}

	.popTitle span {
		display: inline-block;
		width: 6px;
		height: 18px;
		background-color: #c33;
		margin-right: 5px;
	}

	.popDate {
		font-weight: bold;
		color: deepskyblue;
	}

	.popTxt {
		margin-top: 20px;
		font-size: 18px;
		font-weight: bold;
	}

	.popC {
		color: #ccc;
		font-size: 16px;
	}

	.popLable {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.popLable p {
		display: flex;
	}

	.popLable p span {
		display: block;
		padding: 5px 14px;
		border-radius: 3px;
		margin-right: 8px;
		box-sizing: border-box;
		color: #c33;
		background-color: #f7d8d9;
	}

	.popLable a {
		font-size: 15px;
		font-weight: bold;
	}

	.joinModalTitle {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.joinModalTitle span {
		display: block;
		width: 6px;
		height: 18px;
		background-color: #c33;
		margin-right: 5px;
	}

	.joinModalTitle b {
		font-size: 16px;
	}

	.joinModalDate {
		font-size: 16px;
		line-height: 1.5em;
		margin-bottom: 15px;
	}

	.joinModalTxt {
		font-size: 16px;
		line-height: 1.5em;
		margin-bottom: 15px;
	}

	/* 模态框样式 */
	.modal {
		display: none;
		/* 默认隐藏 */
		position: fixed;
		/* 固定定位 */
		z-index: 1000;
		/* 确保模态框位于页面顶层 */
		left: 0;
		top: 0;
		width: 100%;
		/* 全屏宽度 */
		height: 100%;
		/* 全屏高度 */
		overflow: auto;
		/* 启用滚动条（如果需要） */
		background-color: rgba(0, 0, 0, 0.5);
		/* 背景色，稍微透明 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		display: flex;
		/* 使用Flexbox布局 */
	}

	.modal-content {
		background-color: #fefefe;
		padding: 20px;
		padding-right: 0;
		border: 1px solid #888;
		border-radius: 15px;
		position: relative;
		width: 750px;
		/* 圆角 */
		max-width: 90%;

		/* 最大宽度，以防内容过宽 */

		/* 最大高度，以防内容过高 */
		overflow-y: auto;
		/* 启用垂直滚动条（如果需要） */
	}

	.joinTxtBox {
		max-height: 60vh;
		overflow-y: scroll;
		-ms-overflow-style: none;
	}

	.joinTxtBox::-webkit-scrollbar {
		width: 12px;
	}

	.joinTxtBox::-webkit-scrollbar-track {
		background: #f1f1f1;
	}

	.joinTxtBox::-webkit-scrollbar-thumb {
		background-color: rgb(204, 51, 51);
		border-radius: 10px;
		height: 10px;
	}

	.joinTxtBox::-webkit-scrollbar-thumb:hover {
		background: #ff0000cc;
		/* 滚动条悬停时的颜色 */
	}
	.modal-close {
		color: #aaa;
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 28px;
		font-weight: bold;
	}

	.modal-close:hover,
	.modal-close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}

	.poph1 {
		margin-bottom: 20px;
		font-size: 18px;
	}
}

/* 针对中等屏幕的样式 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.joinUsContent {
		width: 100%;
	}

	.joinUsContentLeft {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 15px;
	}
	
	.joinUsContentall {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 15px;
	}

	.joinUsContentRight {
		width: 100%;
	}

	.joinUsContentRight img {
		width: 100%;
	}

	.joinUsContentTxt {
		font-size: 16px;
		line-height: 1.5em;
		margin-top: 20px;
	}

	.joinUsPop {
		margin-top: 30px;
	}

	.PopTitle {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.PopContent {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
	}

	.popBox {
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
		overflow: hidden;
		border-radius: 8px;
		padding: 20px;
		box-sizing: border-box;
	}

	.info-container {
		width: 100%;
		text-align: left;
	}

	.popTop {
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.popTitle {
		font-size: 18px;
		font-weight: bold;
	}

	.popTitle span {
		display: inline-block;
		width: 6px;
		height: 18px;
		background-color: #c33;
		margin-right: 5px;
	}

	.popDate {
		font-weight: bold;
		color: deepskyblue;
	}

	.popTxt {
		margin-top: 20px;
		font-size: 18px;
		font-weight: bold;
	}

	.popC {
		color: #ccc;
		font-size: 18px;
	}

	.popLable {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.popLable p {
		display: flex;
	}

	.popLable p span {
		display: block;
		padding: 5px 14px;
		border-radius: 3px;
		margin-right: 8px;
		box-sizing: border-box;
		color: #c33;
		background-color: #f7d8d9;
	}

	.popLable a {
		font-size: 18px;
		font-weight: bold;
	}

	.joinModalTitle {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.joinModalTitle span {
		display: block;
		width: 6px;
		height: 18px;
		background-color: #c33;
		margin-right: 5px;
	}

	.joinModalTitle b {
		font-size: 16px;
	}

	.joinModalDate {
		font-size: 16px;
		line-height: 1.5em;
		margin-bottom: 15px;
	}

	.joinModalTxt {
		font-size: 16px;
		line-height: 1.5em;
		margin-bottom: 15px;
	}

	/* 模态框样式 */
	.modal {
		display: none;
		/* 默认隐藏 */
		position: fixed;
		/* 固定定位 */
		z-index: 1000;
		/* 确保模态框位于页面顶层 */
		left: 0;
		top: 0;
		width: 100%;
		/* 全屏宽度 */
		height: 100%;
		/* 全屏高度 */
		overflow: auto;
		/* 启用滚动条（如果需要） */
		background-color: rgba(0, 0, 0, 0.5);
		/* 背景色，稍微透明 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		display: flex;
		/* 使用Flexbox布局 */
	}
	
	.modal-content {
		background-color: #fefefe;
		padding: 20px;
		padding-right: 0;
		border: 1px solid #888;
		border-radius: 15px;
		position: relative;
		width: 600px;
		/* 圆角 */
		max-width: 90%;
	
		/* 最大宽度，以防内容过宽 */
	
		/* 最大高度，以防内容过高 */
		overflow-y: auto;
		/* 启用垂直滚动条（如果需要） */
	}
	
	.joinTxtBox {
		max-height: 60vh;
		overflow-y: scroll;
		-ms-overflow-style: none;
	}
	
	.joinTxtBox::-webkit-scrollbar {
		width: 12px;
	}
	
	.joinTxtBox::-webkit-scrollbar-track {
		background: #f1f1f1;
	}
	
	.joinTxtBox::-webkit-scrollbar-thumb {
		background-color: red;
		border-radius: 10px;
		height: 10px;
	}
	
	.joinTxtBox::-webkit-scrollbar-thumb:hover {
		background: #ff0000cc;
		/* 滚动条悬停时的颜色 */
	}
	
	.modal-close {
		color: #aaa;
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 28px;
		font-weight: bold;
	}

	.modal-close:hover,
	.modal-close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}

	.poph1 {
		margin-bottom: 20px;
		font-size: 18px;
	}
}

/* 针对小屏幕的样式 */
@media screen and (max-width: 767px) {
	.joinUsContent {
		width: 100%;
	}

	.joinUsContentLeft {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 15px;
	}

	.joinUsContentall {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 15px;
	}

	.joinUsContentRight {
		width: 100%;
	}

	.joinUsContentRight img {
		width: 100%;
	}

	.joinUsContentTxt {
		font-size: 16px;
		line-height: 1.5em;
		margin-top: 20px;
	}

	.joinUsPop {
		margin-top: 30px;
	}

	.PopContent {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
	}

	.popBox {
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
		overflow: hidden;
		border-radius: 8px;
		padding: 10px;
		box-sizing: border-box;
	}

	.info-container {
		width: 100%;
		text-align: left;
	}

	.popTop {
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.poph1 {
		margin-bottom: 15px;
		font-size: 16px;
	}

	.popTitle {
		display: flex;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.popTitle span {
		display: inline-block;
		width: 6px;
		height: auto;
		background-color: #c33;
		margin-right: 5px;
	}

	.popDate {
		width: 40%;
		font-size: 12px;
		font-weight: bold;
		color: deepskyblue;
	}

	.popTxt {
		margin-top: 20px;
		font-size: 16px;
		font-weight: bold;
	}

	.popC {
		color: #ccc;
		font-size: 16px;
	}

	.popLable {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.popLable p {
		display: flex;
	}

	.popLable p span {
		display: block;
		padding: 5px 14px;
		border-radius: 3px;
		margin-right: 8px;
		box-sizing: border-box;
		color: #c33;
		background-color: #f7d8d9;
	}

	.popLable a {
		font-size: 16px;
		font-weight: bold;
	}

	.joinModalTitle {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.joinModalTitle span {
		display: block;
		width: 6px;
		height: 18px;
		background-color: #c33;
		margin-right: 5px;
	}

	.joinModalTitle b {
		font-size: 14px;
	}

	.joinModalDate {
		font-size: 14px;
		line-height: 1.5em;
		margin-bottom: 5px;
	}

	.joinModalTxt {
		font-size: 14px;
		line-height: 1.5em;
		margin-bottom: 5px;
		padding-right: 10px;
		box-sizing: border-box;
	}

	/* 模态框样式 */
	.modal {
		display: none;
		/* 默认隐藏 */
		position: fixed;
		/* 固定定位 */
		z-index: 1000;
		/* 确保模态框位于页面顶层 */
		left: 0;
		top: 0;
		width: 100%;
		/* 全屏宽度 */
		height: 100%;
		/* 全屏高度 */
		overflow: auto;
		/* 启用滚动条（如果需要） */
		background-color: rgba(0, 0, 0, 0.5);
		/* 背景色，稍微透明 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		display: flex;
		/* 使用Flexbox布局 */
	}

	.modal-content {
		background-color: #fefefe;
		padding: 20px;
		padding-right: 0;
		border: 1px solid #888;
		border-radius: 15px;
		position: relative;
		width: 70%;
		/* 圆角 */
		max-width: 90%;
	
		/* 最大宽度，以防内容过宽 */
	
		/* 最大高度，以防内容过高 */
		overflow-y: auto;
		/* 启用垂直滚动条（如果需要） */
	}
	
	.joinTxtBox {
		max-height: 50vh;
		overflow-y: scroll;
		-ms-overflow-style: none;
	}
	
	.joinTxtBox::-webkit-scrollbar {
		width: 12px;
	}
	
	.joinTxtBox::-webkit-scrollbar-track {
		background: #f1f1f1;
	}
	
	.joinTxtBox::-webkit-scrollbar-thumb {
		background-color: rgb(204, 51, 51);
		border-radius: 10px;
		height: 10px;
	}
	
	.joinTxtBox::-webkit-scrollbar-thumb:hover {
		background: #ff0000cc;
		/* 滚动条悬停时的颜色 */
	}

	.modal-close {
		color: #aaa;
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 28px;
		font-weight: bold;
	}

	.modal-close:hover,
	.modal-close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}
	.hr{
		height: 50px;
		display: block !important;
	}
}