:root {
		--product-bg-image: url('./img/productBg.png');
	}

	body,
	html {
		margin: 0;
		padding: 0;
		font-family: Roboto
	}

	/* 超链接样式 */
	a,
	a:link,
	a:visited,
	a:hover,
	a:active {
		text-decoration: none;
		color: inherit;
	}

	/* 列表项样式 */
	li {
		list-style: none;
	}

	/*========================== header =============*/
	header {
		margin: 0 auto;
		width: 1440px;
		height: 101px;
		display: flex;
		align-items: center;
		/* 垂直居中 */
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(128, 128, 128, 0.2);
		/* 底图 */
		/* background-image: url(./img/HEADER.png); */
		background-size: 1440px auto;
	}

	.logo {
		/* logo */
		width: 285px;
		height: 72px;
		/* 自动布局 */
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 10;
		padding-left: 60px;
		padding-top: 16px;
		padding-bottom: 13px;
		padding-right: 50px;
	}

	.nav-container {
		width: 650px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.select-box {
		display: flex;
		flex-direction: column;
		gap: 10px;
		position: relative;
		/* 为图片定位提供上下文 */
		background-color: transparent;
	}

	.select {
		display: block;
		height: 40px;
		box-sizing: border-box;
		border: 1px solid rgba(51, 51, 51, 1);
		border-radius: 4px;
		box-shadow: inset 2px 4px 10px 0px rgba(87, 87, 87, 0.25);
		background-color: white;
		/* 确保背景色为白色 */
		width: 100%;
		padding-left: 8px;
		padding-top: 5px;
		caret-color: transparent;
		/* 隐藏光标 */
	}

	nav {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: transparent;
	}

	.select-box img {
		width: 16px;
		height: 16px;
		/* background: rgba(128, 128, 128, 1); */
		padding: 15px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	input.select::placeholder {
		color: rgba(128, 128, 128, 1);
		font-family: Roboto;
		font-size: 16px;
		font-weight: 400;
		line-height: 45px;
		letter-spacing: 0%;
		text-align: left;
	}

	nav ul {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		gap: 32px;
	}

	nav ul li a {
		padding-right: 0;
		color: rgba(51, 51, 51, 1);
		font-family: Roboto;
		font-size: 16px;
		font-weight: 600;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
		text-transform: uppercase;
	}

	.buttion {
		width: 285px;
		height: 45px;
		display: flex;
		gap: 20px;
		padding-left: 85px;
		padding-top: 20px;
		padding-bottom: 20px;
		/* background-color: bisque; */
	}

	.buttion span {
		color: rgba(0, 0, 0, 1);
		font-family: Roboto;
		font-size: 12px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
	}

	/* 带文字的项目 */
	.buttion div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* gap: 4px; */
		width: auto;
		/* padding: 0 8px; */
		transition: all 0.3s ease;
	}

	.buttion div:hover {
		color: rgba(0, 63, 125, 1);
	}

	.buttion div:hover a,
	.buttion div:hover span {
		color: rgba(0, 63, 125, 1);
	}

	/* 纯图标项目 */
	.buttion div:has(img:only-child) {
		/* width: 42px; */
	}

	/* 统一 a 标签样式 */
	.buttion div a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	ul li {
		position: relative;
		display: inline-block;
	}

	ul li .underline {
		width: 100%;
		height: 3px;
		background: rgba(0, 63, 125, 1);
		position: absolute;
		bottom: -10px;
		left: 0;
		display: none;
	}

	ul li:hover .underline,
	ul li a:hover+.underline {
		display: block;
	}

	/* 1440px宽度容器通用样式 */
	.container-1440,
	.content,
	.footer-container {
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 20px;
	}

	/*========================== banner =============*/
	.banner {
		margin: 0 auto;
		/* BANNER1440 */
		width: 1440px;
		height: 520px;
		/* 自动布局 */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 10;
		/* 底图 */
		/* background-image: url(./img/banner.png); */
		background-image: url(./img/banner1.png);
		background-size: 1440px auto;
	}

	.banner-slide {
		position: absolute;
		width: 1440;
		height: 100%;
		display: none;
	}

	.banner-slide.active {
		display: block;
	}

	.slider-indicators {
		position: absolute;
		top: 522px;
		left: 332px;
		display: flex;
		gap: 3px;
		/* background-color: red; */
	}

	.slider-indicator {
		width: 18px;
		height: 3px;
		border-radius: 6px;
		cursor: pointer;
	}

	.slider-indicator.active {
		width: 36px;
		background: rgba(255, 255, 255, 1);
	}

	.banner-content {
		padding-top: 73px;
		padding-left: 100px;
	}

	.banner-title {
		width: 800px;
		height: 26px;
		color: rgba(255, 255, 255, 1);
		font-family: Roboto;
		font-size: 22.5px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
	}

	.banner-subtitle {
		width: 800px;
		height: 62px;
		color: rgba(255, 255, 255, 1);
		font-family: Roboto;
		font-size: 52.5px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
		margin-top: 4px;
	}

	.banner-features div {
		width: 800px;
		height: 25px;
		opacity: 0.8;
		color: rgba(255, 255, 255, 1);
		font-family: Roboto;
		font-size: 19.5px;
		font-weight: 500;
		line-height: 25px;
		letter-spacing: 0%;
		text-align: left;
	}

	.banner-button {
		/* width: 221.8px; */
		width: fit-content;
		height: 36.2px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 38.4px;
		padding: 9.6px 24px;
		margin-top: 30px;
		border-radius: 36px;
		background: rgba(196, 8, 8, 0.8);
		border: none;
		cursor: pointer;
		color: rgba(255, 255, 255, 1);
		font-family: Roboto;
		/* font-size: 14px; */
		font-size: 17px;
		font-weight: 400;
		line-height: 1.5;
		letter-spacing: 0%;
		text-align: left;
	}

	.banner-button:hover {
		/* color: rgba(0, 0, 0, 0.6); */
		font-family: Roboto;
		font-weight: 400;
		line-height: 25px;
		letter-spacing: 0%;
		text-align: left;
		box-sizing: border-box;
		border: 1px solid rgba(0, 0, 0, 0.2);
		box-shadow: 0px 10px 10px 0px rgba(196, 8, 8, 0.35);
	}

	.banner-button img {
		width: 14.4px;
		height: 14.4px;
	}

	.slider-indicator {
		width: 18px;
		height: 3px;
		border-radius: 6px;
		background: rgba(255, 255, 255, 0.2);
	}

	.slider-indicator.active {
		width: 36px;
		background: rgba(255, 255, 255, 1);
	}

	/*========================== Main Content =============*/
	/* Main Content */
	.content {
		/* background-color: #f5f5f5; */
	}

	/* Footer */
	footer {
		width: 100%;
		background-color: #333;
	}

	.footer-container {
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 20px;
		padding: 20px;
	}

	.video {
		margin: 0 auto;
		width: 1440px;
		height: 359.17px;
		display: flex;
		background: linear-gradient(0.00deg, rgba(22, 80, 163, 0.2), rgba(255, 255, 255, 0.1) 100%);
		justify-content: center;
		margin-top: 68px;
	}

	.video li {
		width: 399.95px;
		height: 239.17px;
		border-radius: 4px;
		margin-left: 20px;
	}

	.layer-1 {
		margin: 0 auto;
		width: 1440px;
		height: 840px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 38.400001525878906;
		background: rgba(255, 255, 255, 1);
	}

	.layer-2 {
		margin: 0 auto;
		width: 1440px;
		height: 771.6px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 38.400001525878906;
		/* background-image: url(./img/Frame105.png) */
		background-image: url(./img/layer-2.png)
			/* background-size: 1440px auto; */
	}

	/* 	.layer-3 {
		margin: 0 auto;
		width: 1440px;
		height: 878.81px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 24;
	} */
	/* 	.layer-4 {
		margin: 0 auto;
		width: 1440px;
		height: 906.2px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 68;
		padding: 72px 84px 0px 84px;
	} */
	.tilte-container {
		margin: 0 auto;
		width: 1238.4px;
		height: 93.6px;
		/* 自动布局 */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 4.800000190734863;
		margin-top: 78.6px;
	}

	.title-container-1 {
		/* SERVICES */
		width: 1238.4px;
		height: 20px;
		color: rgba(0, 63, 125, 1);
		font-family: Roboto;
		font-size: 16.8px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
		margin-bottom: 4.8px;
	}

	.title-container-2 {
		color: rgba(0, 0, 0, 1);
		font-family: Roboto;
		font-size: 39.6px;
		font-weight: 400;
		line-height: 43.2px;
		letter-spacing: 0%;
		text-align: left;
		text-transform: uppercase;
		margin-bottom: 10.8px;
	}

	.title-container-3 {
		color: rgba(102, 102, 102, 1);
		font-family: Roboto;
		font-size: 16.8px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
	}

	.tilte-container-img {
		margin: 38.4px auto;
		/* Frame 45 */
		width: 1238.4px;
		height: 561.6px;
		/* 自动布局 */
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.services-container {
		margin: 38.4px auto;
		width: 1238.4px;
		height: 561.6px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.service-item {
		text-align: center;
		width: 412px;
		height: 561.6px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* background-color: red; */
	}

	.service-item img {
		text-align: center;
		width: 48px;
		height: 48px;
		opacity: 0.5;
	}

	.service-item:hover {
		backdrop-filter: blur(30px);
		background: rgba(77, 77, 77, 0.05);
	}

	.service-item:hover img {
		opacity: 1;
	}

	.service-content {
		width: 268.8px;
		height: auto;
		color: rgba(255, 255, 255, 0.5);
		font-family: Roboto;
		font-size: 20px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
	}

	.service-content span {
		line-height: 2;
	}

	.service-description {
		margin-top: 0;
		background-color: transparent;
		color: rgba(255, 255, 255, 1);
		font-family: Roboto;
		font-size: 12px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: center;
	}

	.service-content .service-description {
		height: 24px;
		color: rgba(255, 255, 255, 1);
		font-family: Roboto;
		font-size: 12px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: center;
		display: none;
	}

	.service-item:hover .service-description {
		display: block;
	}

	.service-item:hover .service-title {
		color: rgba(255, 255, 255, 1);
	}

	.tilte-container ul {
		padding: 0;
		margin: 0;
		margin-top: 24px;
		margin-bottom: 24px;
	}

	.tilte-container ul li {
		float: left;
		/* Frame 52 */
		width: 137.8px;
		height: 43.2px;
		/* 自动布局 */
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 12;
		box-sizing: border-box;
		border: 0.6px solid rgba(0, 0, 0, 0.4);
		border-radius: 36px;
		background: rgba(255, 255, 255, 0);
		margin-right: 15px;
		margin-top: 4px;
	}

	.tilte-container .active {
		border-radius: 36px;
		border: 0;
		color: #FFFFFF;
		background: rgba(196, 8, 8, 0.8);
	}

	.tilte-container ul li:hover {
		border-radius: 36px;
		border: 0;
		color: #FFFFFF;
		background: rgba(196, 8, 8, 0.8);
	}

	/*=========================product box  ================*/
	.product-box-1 {
		display: flex;
		gap: 10px;
		/* padding: 20px; */
	}

	.product-item {
		float: left;
		width: 298.8px;
		height: 457.2px;
		background-color: #fff;
		transition: all 1s ease;
		padding: 15px;
		box-sizing: border-box;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	/* 第一个产品默认展开 */
	.product-item:first-child {
		width: 612px;
		background-image: var(--product-bg-image);
	}

	/* 默认展开时使用悬停样式 */
	.product-item:first-child .product-container-1,
	.product-item:first-child .product-container-3 {
		color: rgba(255, 255, 255, 1);
	}

	.product-item:first-child .product-container-2 {
		color: rgba(255, 255, 255, 0.8);
	}

	/* 缩小后恢复默认颜色 */
	.product-box-1:hover .product-item:first-child:not(:hover) .product-container-1 {
		color: rgba(50, 50, 50, 1);
	}

	.product-box-1:hover .product-item:first-child:not(:hover) .product-container-2 {
		color: rgba(39, 39, 39, 0.8);
	}

	.product-box-1:hover .product-item:first-child:not(:hover) .product-container-3 {
		color: rgba(50, 50, 50, 1);
	}

	/* 悬停时所有产品缩小并移除背景 */
	.product-box-1:hover .product-item {
		width: 298.8px;
		background-image: none;
	}

	/* 被悬停的产品单独放大并显示背景 */
	.product-box-1:hover .product-item:hover {
		width: 612px;
		background-image: var(--product-bg-image);
	}

	/* 展开时字体为白色 */
	.product-box-1:hover .product-item:hover .product-container-1,
	.product-box-1:hover .product-item:hover .product-container-3 {
		color: rgba(255, 255, 255, 1);
	}

	.product-box-1:hover .product-item:hover .product-container-2 {
		color: rgba(255, 255, 255, 0.8);
	}

	/* 产品内容样式 */
	.product-container-1,
	.product-container-2,
	.product-container-3 {
		transition: color 0.3s ease;
	}

	.product-container-1 {
		margin-top: 15px;
		color: rgba(50, 50, 50, 1);
		font-family: Roboto;
		font-size: 22px;
		font-weight: 400;
		line-height: 25px;
		letter-spacing: 0%;
		text-align: left;
		padding-bottom: 12px;
	}

	.product-container-2 {
		/* 15.6" Tablet PC for Endoscopy | EN-150 */
		color: rgba(39, 39, 39, 0.8);
		font-family: Roboto;
		font-size: 15px;
		font-weight: 200;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
		padding-bottom: 12px;
	}

	.product-container-3 {
		/* Learn More */
		color: rgba(255, 255, 255, 1);
		font-family: Roboto;
		font-size: 14px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
		position: relative;
	}

	.product-container-img {
		margin: 0 auto;
		width: 297.6px;
		height: 304.8px;
		transition: transform 0.3s ease;
		/* 添加过渡动画 */
	}

	.product-item:first-child .product-container-img {
		transform: translateY(35px);
	}

	.product-box-1:hover .product-item:first-child:not(:hover) .product-container-img {
		transform: translateY(0px);
	}

	.product-item:hover:not(:first-child) .product-container-img {
		transform: translateY(35px);
	}

	.product-container-img img {
		margin: 0 auto;
		width: 297.6px;
		height: 304.8px;
	}

	.product-container-3 img {
		/* fluent:arrow-right-24-filled */
		width: 12px;
		position: absolute;
		top: 2px;
		margin-left: 5px;
	}

	footer {
		margin: 0 auto;
		/* height: 686px; */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 10;
		background: radial-gradient(115.76% 50.16% at 14.000000000000002% 26%, rgba(2.558015823364258, 69.88864135742188, 149.46121215820312, 1) 10%, rgba(0, 29, 87, 1) 52%, rgba(0, 6, 42, 1) 76%);
	}

	.footer-header {
		/* Frame 870 */
		margin: 0 auto;
		width: 1272px;
		height: 85px;
		/* 自动布局 */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		padding-top: 88px;
		padding-bottom: 40px;
	}

	.footer-logo {
		float: left;
	}

	.footer-subscribe {
		float: right;
		width: 329px;
		height: 85px;
		/* 自动布局 */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 10;
	}

	.subscribe-title {
		/* Subscribe to Estone's Newsletter */
		width: 329px;
		height: 16px;
		color: rgba(255, 255, 255, 1);
		font-family: Roboto;
		font-size: 14px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
		padding-bottom: 10px;
	}

	.subscribe-placeholder {
		/* Enter your email address */
		width: 132px;
		height: 14px;
		color: rgba(255, 255, 255, 0.5);
		font-family: Roboto;
		font-size: 12px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
		/* padding-bottom: 5px; */
	}

	.subscribe-input input::placeholder {
		color: rgba(255, 255, 255, 0.5);
	}

	.subscribe-input {
		/* border-bottom: 1px solid rgba(255, 255, 255, 0.5); */
		padding-bottom: 5px;
		padding-right: 15px;
		position: relative;
	}

	.subscribe-input input {
		background: transparent;
		border: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
		outline: none;
		color: inherit;
		caret-color: transparent;
		width: 320px;
		padding: 5px 0;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 原始状态图标 */
	.input-icon {
		position: absolute;
		right: 16px;
		transform: translateY(-50%);
		width: 10px;
		height: 10px;
		background-image: url(./img/section-icon-1.png);
		background-size: contain;
		pointer-events: none;
	}

	.subscribe-note {
		/* By registering, you agree to receive emails from Estone and its trusted partners. View our Terms and Privacy Policy. */
		width: 329px;
		height: 24px;
		font-family: Roboto;
		font-size: 10px;
		font-weight: 400;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: left;
		color: rgba(255, 255, 255, 0.5);
		padding-bottom: 5px;
		line-height: 14px;
	}

	.subscribe-note a {
		color: rgba(255, 255, 255, 1) !important;
	}