/* =========================================================
   全局基础样式
========================================================= */

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
}

img {
	max-width: 100%;
}

.hidden {
	display: none;
}

.koangzhi {
	width: 100%;
}

.juzhaongs {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	text-align: center;
}

.textobjss,
.textobjsstrtr {
	position: absolute;
	width: 50%;
	color: #ffffff;
	font-size: 1.6vw;
}

.textobjss {
	top: 5%;
	right: 3%;
}

.textobjsstrtr {
	top: 2%;
	left: 4%;
}

.gais,
.gaistr {
	margin: 0;
	font-size: 2vw;
}

.gaistrEn,
.gaisEn {
	font-size: 2vw;
}

.mrdefault {
	position: relative;
	width: 100%;
}

.yangsloginstr {
	position: relative;
	width: 100%;
	height: auto;
}

.imgbackgrounds {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

.JoinExImg {
	position: relative;
	width: 100%;
}


/* =========================================================
   参展报名 / 专业观众 / 个人购票
========================================================= */

.join-ex-list {
	width: 100%;
	height: 75vh;
	padding: 0;
	background: #ffffff;
	display: flex;
	flex-direction: column;
}

.join-ex-item {
	flex: 1;
	padding: 0 10%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.join-ex-item:hover {
	background: #f5f5f5;
}

.join-ex-text {
	color: #1a1a1a;
	font-size: clamp(32px, 4.5vw, 60px);
	font-weight: 700;
	letter-spacing: 1.5px;
}

.join-ex-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.join-ex-arrow svg {
	width: clamp(40px, 4.5vw, 64px);
	height: clamp(40px, 4.5vw, 64px);
}

.join-ex-divider {
	flex-shrink: 0;
	height: 1px;
	margin: 0 20px;
	background: #e5e5e5;
}


/* =========================================================
   关于美护上海
========================================================= */

.about-notes-section {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 650px;
	padding: clamp(30px, 4vw, 60px) 0;
	background-color: #ebebee;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.about-notes-section::before {
	content: "";
	position: absolute;
	top: 36px;
	left: 36px;
	z-index: 2;
	width: clamp(16px, 2vw, 28px);
	height: clamp(16px, 2vw, 28px);
	background: #ffffff;
	border-radius: 50%;
}

.about-notes-title {
	    font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
	align-self: flex-end;
	margin: 0;
	padding: 0 clamp(20px, 4vw, 80px);
	color: #1a1a1a;
	font-size: clamp(28px, 3.5vw, 52px);
	font-weight: 400;
	letter-spacing: 1px;
}

.about-banner-wrap {
	position: relative;
	width: 100%;
	margin-top: clamp(20px, 3vw, 48px);
}

.notes-stripe-img {
	display: block;
	width: 100%;
	height: auto;
}

.about-notes-text {
	width: 90%;
	margin: clamp(30px, 4vw, 64px) auto 0;
}

.about-notes-text p {
	margin: 0 0 clamp(14px, 1.5vw, 26px);
	color: #333333;
	font-size: clamp(18px, 2vw, 32px);
	line-height: clamp(1.6, 1.5vw + 0.8, 2.1);
}


/* =========================================================
   美护上海亮点
========================================================= */

.highlights-section {
	width: 100%;
	height: 100vh;
	min-height: 680px;
	background: #ffffff;
	border-top: 5px solid #ebebee;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* 顶部标题区域 */
.highlights-header {
	position: relative;
	flex: 0 0 18%;
	min-height: 120px;
	padding: 0 clamp(50px, 8vw, 120px);
	border-bottom: 2px solid #ebebee;
	display: flex;
	align-items: center;
}

.highlights-title {
	margin: 0;
	color: #050505;
	font-size: clamp(30px, 3vw, 48px);
	font-weight: bold;
	/* font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif; */
	line-height: 1.2;
	letter-spacing: 1px;
}

/* 右上角粉色圆点 */
.highlights-dot {
	position: absolute;
	top: 14px;
	right: 15px;
	width: clamp(18px, 2vw, 25px);
	height: clamp(18px, 2vw, 25px);
	background: #e0e0e0;
	border-radius: 50%;
}

/* 下方左右内容 */
.highlights-content {
	flex: 1;
	min-height: 0;
	display: flex;
}

/* 左侧数据区域 */
.highlights-left {
	flex: 0 0 64%;
	min-width: 0;
	padding:
		clamp(24px, 3vw, 45px)
		clamp(30px, 5vw, 80px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* 数据列表 */
.highlights-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: clamp(7px, 1vh, 13px);
}

/* 单条数据 */
.highlight-item {
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	justify-content: center;
	column-gap: clamp(10px, 1vw, 18px);
	white-space: nowrap;
}

/* 数字 */
.hl-num {
	display: block;
	margin: 0;
	color: #050505;
	font-family:
		Arial,
		"Helvetica Neue",
		"PingFang SC",
		"Microsoft YaHei",
		sans-serif;
	font-size: clamp(35px, 1.5vw, 52px);
	font-weight: 700;
	line-height: 1.20;
	letter-spacing: -1px;
	text-align: right;
}

/* 平方米上标 */
.hl-num sup {
	position: relative;
	top: -0.35em;
	font-size: 55%;
	line-height: 0;
}

/* 数据说明 */
.hl-label {
	color: #161616;
	font-family:
		"PingFang SC",
		"Microsoft YaHei",
		Arial,
		sans-serif;
	font-size: clamp(20px, 2vw, 29px);
	font-weight: 400;
	line-height: 1.2;
	text-align: left;
}

/* 底部同期举办文字 */
.highlights-cohost {
	margin-top: clamp(14px, 2vh, 25px);
	margin-right: 0;
	color: #050505;
	font-size: clamp(20px, 2vw, 29px);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

/* 右侧图片区域 */
.highlights-right {
	flex: 0 0 36%;
	min-width: 0;
	height: 100%;
	background: #eeeeee;
	overflow: hidden;
}

.highlights-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}


/* =========================================================
   平板端适配
========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

	.textobjss,
	.textobjsstrtr {
		font-size: 1.6vw;
	}

	.gais,
	.gaistr {
		font-size: 2vw;
	}

	.highlights-section {
		height: auto;
		min-height: 650px;
		overflow: visible;
	}

	.highlights-header {
		flex-basis: 17%;
		min-height: 105px;
		padding: 0 6vw;
	}

	.highlights-title {
		font-size: clamp(28px, 3.5vw, 38px);
		font-weight: 400;
		/* font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif; */
	}

	.highlights-left {
		flex-basis: 62%;
		padding: 25px 35px;
	}

	.highlights-right {
		flex-basis: 38%;
	}

	.highlight-item {
		grid-template-columns: auto auto;
		column-gap: 10px;
	}

	.hl-num {
		font-size: clamp(31px, 4vw, 43px);
	}

	.hl-label {
		font-size: clamp(17px, 2.2vw, 23px);
	}

	.highlights-cohost {
		font-size: clamp(18px, 2.2vw, 23px);
		font-weight: 400;
	}
}


/* =========================================================
   手机端适配
========================================================= */

@media (max-width: 768px) {

	.AddDivColor {
		display: block;
		padding: 15px 20px;
		color: #333333;
		font-size: 16px;
		text-decoration: none;
	}

	.Distancefromthetop {
		width: 70% !important;
		margin: 1% 0 0 1%;
	}

	.subtractleft {
		margin: 0;
	}

	.subtractright {
		margin: 0 0 0 -3px;
	}

	.subtracttop {
		margin: 0 0 0 -5px;
	}

	.fontleft {
		margin: 0 0 0 -5px;
	}

	.textobjsstrtr {
		top: 0;
		left: 2%;
	}

	.JoinExImg {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
	}

	.join-ex-list {
		width: 100%;
		height: auto;
		padding: 6px 0;
	}

	.join-ex-item {
		flex: none;
		min-height: 70px;
		padding: 0 10%;
	}

	.join-ex-text {
		font-size: clamp(16px, 4.5vw, 20px);
	}

	.join-ex-arrow svg {
		width: 20px;
		height: 20px;
	}

	.join-ex-divider {
		margin: 0 12px;
	}


	/* 关于美护上海 */

	.about-notes-section {
		height: auto;
		min-height: 0;
		padding: 3vh 0 5%;
	}

	.about-notes-section::before {
		top: 20px;
		left: 20px;
		width: clamp(12px, 3vw, 20px);
		height: clamp(12px, 3vw, 20px);
	}

	.about-notes-title {
		padding: 0 20px;
		font-size: 20px;
	}

	.about-banner-wrap {
		margin-top: 24px;
	}

	.about-notes-text {
		width: 100%;
		margin-top: 24px;
		padding: 0 20px;
	}

	.about-notes-text p {
		margin-bottom: 12px;
		font-size: 13px;
		line-height: 1.7;
	}


	/* =====================================================
	   美护上海亮点
	   手机端保持桌面布局，整体等比例缩小
	===================================================== */

	.highlights-section {
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 1221 / 730;
		background: #ffffff;
		border-top: 0.41vw solid #ebebee;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.highlights-header {
		position: relative;
		flex: 0 0 18%;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 0 8vw;
		border-bottom: 0.16vw solid #fae4dd;
		display: flex;
		align-items: center;
	}

	.highlights-title {
		margin: 0;
		color: #050505;
		font-size: 3.4vw;
		font-weight: 400;
		font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
		line-height: 1.2;
		letter-spacing: 0.08vw;
		white-space: nowrap;
	}

	.highlights-dot {
		position: absolute;
		top: 1.15vw;
		right: 1.23vw;
		width: 2vw;
		height: 2vw;
		background: #e0e0e0;
		border-radius: 50%;
	}

	.highlights-content {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: row;
	}

	.highlights-left {
		flex: 0 0 64%;
		width: 64%;
		min-width: 0;
		height: 100%;
		padding: 1.8vw 3vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.highlights-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 0.65vw;
	}

	.highlight-item {
		display: grid;
		grid-template-columns: auto auto;
		align-items: baseline;
		justify-content: center;
		column-gap: 0.82vw;
		white-space: nowrap;
	}

	.hl-num {
		display: block;
		margin: 0;
		color: #050505;
		font-family:
			Arial,
			"Helvetica Neue",
			"PingFang SC",
			"Microsoft YaHei",
			sans-serif;
		font-size: 4.25vw;
		font-weight: 700;
		line-height: 1.08;
		letter-spacing: -0.08vw;
		text-align: right;
	}

	.hl-num sup {
		position: relative;
		top: -0.35em;
		font-size: 55%;
		line-height: 0;
	}

	.hl-label {
		color: #161616;
		font-family:
			"PingFang SC",
			"Microsoft YaHei",
			Arial,
			sans-serif;
		font-size: 2.38vw;
		font-weight: 400;
		line-height: 1.2;
		text-align: left;
	}

	.highlights-cohost {
		margin-top: 1.3vw;
		margin-right: 0;
		color: #050505;
		font-size: 2.38vw;
		font-weight: 400;
		line-height: 1.5;
		text-align: center;
		white-space: normal;
		word-wrap: break-word;
		overflow-wrap: break-word;
		max-width: 100%;
	}

	.highlights-right {
		flex: 0 0 36%;
		width: 36%;
		min-width: 0;
		height: 100%;
		background: #eeeeee;
		overflow: hidden;
	}

	.highlights-img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: center center;
	}


	/* 原有通用移动端样式 */

	.imgbackgrounds {
		width: 100%;
		height: auto !important;
	}

	.gais {
		top: 80%;
		right: 10%;
		z-index: 12;
	}

	.yangsloginstr {
		position: relative;
		width: 100%;
		height: auto !important;
	}

	.textobjss,
	.textobjsstrtr {
		width: 55%;
		font-size: 1.6vw;
	}

	.gais,
	.gaistr {
		font-size: 2vw;
	}

	.mrdefault {
		position: relative;
		width: 100%;
		height: auto !important;
	}

	.textobjss {
		top: 0;
		right: 1%;
	}

	p {
		margin: 0 !important;
	}
}