a{
	text-decoration: none;
	color: #000;
}
h1, h2, h3, h4, h5{
	margin: 1.5rem 0;
	color: #333;
	letter-spacing: 1px;
}
br{
	display: block;
}
#PartnerUpHub {
    opacity: 0;
    transition: opacity 1s ease;
}
.PartnerUpHub{
	font-family: "Poppins","Noto Sans TC","微軟正黑體修正","Microsoft JhengHei","微軟正黑體",sans-serif;
}
.PartnerUpHub h1{
	font-size: 3.4rem;
	font-weight: 400;
	letter-spacing: 2px;
}
.PartnerUpHub p{
	overflow-wrap: break-word;
	font-size: 1.28rem;
    font-weight: 300;
    line-height: 2.2;
    letter-spacing: 1.2px;
	color: #555555;
}
.PartnerUpHub img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.PartnerUpHub section{
	padding: 3.6rem 0 6rem;
}
.PartnerUpHub body{
	overflow-x: hidden;
	box-sizing: content-box;
}
.top-without-brand {
	background: radial-gradient(circle, #ededed 1px, transparent 2px); /* 创建 2px 的灰色小圆圈背景 */
	background-size: 10px 10px; /* 调整圆圈的间距 */
	background-color: #f8f8f8;
}
.PartnerUpHub .header{
	position: relative;
}
.PartnerUpHub .header .container{
	margin-top: 5rem;
	width: 100%;
	display: flex;
	align-items: center;
	flex-flow: column;
}
.PartnerUpHub .header .headerTitle{
	margin-left: 4.5rem;
	width: fit-content;
}
.PartnerUpHub .header ul{
	height: 100%;
	width: auto;
	display: flex;
	justify-content: center;
}
.PartnerUpHub .header ul li{
	list-style: none;
	white-space:nowrap;
	font-size: 1.4rem;
	font-weight: 300;
	letter-spacing: 1px;
	color: #fff;
	transition: 0.5s; /* 添加動畫效果 */
}
.PartnerUpHub .header ul li a{
	padding: 0.5rem 1.5vw;
	color: #000;
}
.PartnerUpHub .header ul li:nth-child(n+1):nth-child(-n+2){
	border-right: 1px solid #ccc;
}
.PartnerUpHub .header ul li a.active{
	border: none;
	color: #fff;
	background: #000;
	margin-right: -1px;
	margin-left: -1px;
}
.desktop{
	display: block;
}
.mobile{
	display: none;
}
.langBtn{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 30px;
	top: 30px;
	width: 20px;
	height: 20px;
	padding: 1rem;
	color: #fff;
	border: 1px solid #fff;
	transition: background-color 0.3s ease-in-out;
}
.langBtn span{
	font-weight: 300;
	font-size: 1rem;
	letter-spacing: 0.5px;
}
.langBtn:hover{
	background-color: #fff;
	color: #333;
	cursor: pointer;
}
.langBtn::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
}
.PartnerUpHub .container{
	position: relative;
    display: block;
    width: 100%;
    z-index: 1;
	padding: 0;
    background: inherit;
	translate: inherit;
	height: inherit;
	margin: inherit;
	text-align: inherit;
}
.PartnerUpHub .content{
	width: 1280px;
	margin: auto;
	padding: 2rem 0 8rem;
}
.about{
	grid-area: about;
}
.about p{
	text-align: center;
}

.data-display {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr); /* 将网格划分为两行 */
	margin: 4rem 0 0;
  }
  
  .data-cell {
	text-align: center;
	display: grid;
	justify-items: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	grid-template-rows: 1fr 1fr;
	padding: 2rem 1vw;
  }

  .data-cell:nth-child(n+2):nth-child(-n+4), .data-cell:nth-child(n+6) {
	border-left: 1px solid #d5d5d5; /* 在相邻格子之间添加左边框 */
  }

  .data-cell:nth-child(n+5) {
  	border-top: 1px solid #d5d5d5; 
  }

  .data-value {
	font-size: 3.8rem;
	font-weight: 300;
	letter-spacing: -3px;
	padding: 0.5rem;
  }
  .data-value span {
	font-weight: 400;
	font-size: 2.6rem;
	position: relative;
	top: -0.15rem;
	left: 0.2rem;
  }
  
  .data-describe p{
	font-size: 1.2rem;
	line-height: 1.5;
  }


	/* 品牌沿革 */

  .brand-history {
  	padding-top: 3rem;
    background: #f2f2f2;
  }

  .brand-title {
    text-align: center;
    grid-column: 1 / -1;
  }

	.sub-title {
	  text-transform: uppercase;
	  text-align: center;
	  font-size: 0.9rem;
	  font-weight: 400;
	  letter-spacing: 1.2px;
	  color: #d3ad82; /* 设置颜色 */
	}

  .brand-description {
  	text-align: center;
    margin: 3rem 0 1.5rem;
    grid-column: 1 / -1;
  }

  .brand-image {
    width: 100%;
    margin: 2rem auto;
    height: auto;
    grid-column: 1 / -1;
  }

  .CA-display {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 4rem 0 0;
  }
  
  .CA-cell {
	text-align: center;
	display: grid;
	justify-items: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	gap: 0.25rem;
	grid-template-rows: 1fr 1fr;
	background-color: #eaeaea;
	padding: 2rem 1rem;
	box-sizing: content-box;
	margin: 0.75rem;
	border-radius: 0.25rem;
  }

  .CA-value {
	font-size: 3.2rem;
	font-weight: 300;
	letter-spacing: -3px;
	padding: 0.5rem;
  }

  .CA-describe p{
	font-size: 1.2rem;
	line-height: 1.5;
  }
  
  .CA-icon {
	/*color: #d4bba0;*/
	color: #7a1f1f;
  }

  .text-block {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 20px;
  }

  .text-block h2{
	font-weight: 400;
  	font-size: 1.8rem;
	letter-spacing: 1px;
  }

  .text-block p{
  	font-size: 1rem;
  	line-height: 1.9rem;
	letter-spacing: 1.5px;
  }

  .text-block > div {
    padding: 1rem 4.5rem;
    box-sizing: border-box;
  }

  .vertical-line {
    border-left: 1px solid #ccc;
  }

  /* 社群影響力 */

  .social-influence {
  	padding-top: 3rem;
    display: grid;
    gap: 20px;
  }

  .social-title {
    text-align: center;
    font-size: 2.75rem;
    font-weight: bold;
    grid-column: 1 / -1;
  }

  .social-description {
  	text-align: center;
    margin: 3rem 0 1.5rem;
    grid-column: 1 / -1;
  }

  .social-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .social-mv, .social-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .social-mv i, .social-images i{
	font-size: 4.5rem;
	color: #fff;
  }

  .social-mv img, .social-images img {
    width: 100%;
    height: auto;
  }

  .social-data-display {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr); /* 将网格划分为两行 */
	margin: 3rem 0;
  }
  
  .social-data-cell {
	text-align: center;
	display: grid;
	justify-items: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	grid-template-rows: 1fr 1fr;
	padding: 1.5vw 1vw 1vw;
  }

  .social-data-cell:nth-child(n+2):nth-child(-n+3), .social-data-cell:nth-child(n+5):nth-child(-n+8) {
	border-left: 1px solid #d5d5d5;
  }

  .social-data-cell:nth-child(n+4):nth-child(-n+7) {
	border-top: 1px solid #d5d5d5; 
  }

  .social-data-value {
	font-size: 3rem;
	letter-spacing: -2px;
	padding: 0.75rem;
  }
  
  .social-data-describe p{
	font-size: 1rem;
	line-height: 1.5;
  }

  .social-icons::after {
	content: 'Follow us.';
	letter-spacing: 3px;
	color: #aaa;
	margin: 0;
	display: grid;
    grid-column: span 4; /* 让元素跨越四列 */
	justify-content: center;
  }

  .social-icons {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 1.8rem;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
  }

  .social-icon {
    color: #777;
    font-size: 2.4rem;
  }

  /*.social-icon:hover {
    color: #555;
  }*/

  .fa-youtube:hover {
	color: #E62117;
  }
  
  .fa-instagram:hover {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;	
  }
  
  .fa-facebook:hover {
	color: #1877f2;
  }
  
  .fa-line:hover {
	color: #00b900;
  }

  /* ebx */

  .ebx-image{
  	margin: 4.5rem auto;
  }

  .ebxDNA {
    display: grid;
    grid-template-columns: auto 2fr;
    gap: 2.5rem;
  }

    .ebx-title {
		text-align: center;
		font-size: 2.75rem;
		font-weight: bold;
		grid-column: 1 / -1;
    }

	.ebxDNA {
	  margin: 3rem 0 1.5rem;
	}

    .ebxDNA p {
        text-align: left;
    }

    .slogan-block {
        grid-column: 1 / 2;
    }

    .main-block {
        grid-column: 3 / 3;
        display: grid;
        grid-template-rows: 1fr;
        gap: 2rem;
    }

	.main-block img {
		width: 100%;
		height: auto;
    }

	.main-block img.barcode {
		width: fit-content;
	}

	.success-cases .title {
	  margin-top: 0;
	  font-size: 2rem;
	  letter-spacing: 1px;
	  font-weight: 400;
	  text-align: left;
	  color: #333;
	}

	.cases-grid {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 20px;
	}

	.cases-grid img {
		cursor: pointer;
	  width: 100%;
	  object-fit: cover;
	}

	.cases-grid img:hover {
	  opacity: 0.8;
	}

    .overlay-text {
        color: white;
        font-size: 1.1rem;
		font-weight: 300;
		letter-spacing: 0.5px;
        line-height: 1.5;
    }

	.cases-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	  }
  
	  .image-container {
		  position: relative; /* 设置为相对定位 */
		  overflow: hidden; /* 隐藏溢出部分 */
		  text-align: center;
		  display: flex;
		  justify-content: center;
		}
		
		.image-container::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 30%;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
		  }

		.image-container p {
			color: #fff;
			z-index: 1;
			position: absolute;
			bottom: 1rem;
			padding: 0 1rem;
			font-size: 1.15rem;
			letter-spacing: 0;
			line-height: 1.5;
			transform: scaleX(1);
		}
		
		.image-container img {
		  display: block;
		  width: 100%; /* 图片宽度填满容器 */
		  height: auto; /* 自动根据图片比例调整高度 */
		  transition: transform 0.3s ease; /* 添加过渡效果 */
		}
		
		.image-container:hover img {
		  transform: scale(1.2); /* 鼠标移入时放大图片 */
		}

		.image-container:hover.image-container::after{
			background: none;
		}
		
		.image-overlay {
		  position: absolute;
		  z-index: 1;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  cursor: pointer;
		}
		
		.overlay-icon {
		  width: 4vw;
		  height: 4vw;
		  background-color: black;
		  opacity: 0.8;
		  border-radius: 50%;
		  display: none;
		  position: relative;
		  transition: transform 0.3s ease; /* 设置 transform 属性过渡动画，持续0.5秒，并使用 ease 动画函数 */
		}
		
		.overlay-icon::before {
		  content: "+";
		  color: white;
		  font-size: 2vw;
		  font-weight: lighter;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		}
		
		.overlay-icon {
		  display: flex; /* 显示overlay icon */
		  align-items: center;
		  justify-content: center;
		}

		.image-container:hover .overlay-icon {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8);
			transform: scale(1.5); /* 鼠标移入时放大图片 */
		}



@media (max-width: 1320px) {
	.PartnerUpHub .content{
		width: 80%;
	}
	.PartnerUpHub .header .headerTitle{
		margin-left: 0;
	}
	.PartnerUpHub .header ul{
		width: 30vw;
	}
	.PartnerUpHub .header a{
		font-size: 1.5vw;
	}
	br{
		display: none;
	}
	.about p, .brand-history p, .social-description{
		text-align: left;
	}
	.data-value {
		font-size: 3.6vw;
		letter-spacing: 0;
		padding: 0.25rem;
	}
	.data-value span{
		font-size: 3vw;
	}
	.data-describe p{
		text-align: center;
		font-size: 1.2vw;
		line-height: 1.2;
	}
	.CA-cell {
		text-align: center;
		display: grid;
		justify-items: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		gap: 0.25rem;
		grid-template-rows: 1fr 1fr;
		background-color: #eaeaea;
		padding: 2vw 1vw;
		box-sizing: content-box;
		margin: 1vw;
		border-radius: 1rem;
	}
	.CA-value {
		font-size: 3.6vw;
		letter-spacing: 0;
		padding: 0.25rem;
	}
	.CA-value span{
		font-size: 3vw;
	}
	.CA-describe p{
		text-align: center;
		font-size: 1.2vw;
		line-height: 1.2;
	}
	.text-block {
	    gap: 0;
	 }
	 .cases-grid {
	  grid-template-columns: repeat(2, 1fr);
	}
	.image-container p {
		bottom: 1rem;
		font-size: 1.2rem;
		line-height: 1.2;
	}
}

@media (max-width: 1024px) {
	.PartnerUpHub .content{
		width: 95%;
	}
	.text-block > div {
		padding: 0 2rem;
	}
	.image-container::after {
		height: 50%;
	}
}

@media (max-width: 768px) {
	.top-without-brand {
		background: radial-gradient(circle, #ededed 1px, transparent 1px); /* 创建 2px 的灰色小圆圈背景 */
		background-size: 5px 5px; /* 调整圆圈的间距 */
		background-color: #f8f8f8;
	}
	.PartnerUpHub .content{
		width: 85%;
		padding: 1rem 0 3rem;
	}
	.PartnerUpHub section{
		padding: 1.5rem 0 1rem;
	}
	.PartnerUpHub h1{
		font-size: 2rem;
		letter-spacing: 0.5px;
	}
	.PartnerUpHub p{
        font-size: 1rem;
		letter-spacing: 0.5px;
		color: #555555;
		margin: 0;
	}
	.desktop{
		display: none;
	}
	.mobile{
		display: block;
	}
	.langBtn{
		right: 3vw;
		top: 3vw;
		background-color: transparent;
	}
	.langBtn span{
		font-size: 0.9rem;
	}
	.langBtn:hover{
		background-color: transparent;
	}
	.PartnerUpHub .header .container{
		margin-top: 3rem;
	}
	.PartnerUpHub .header a{
		font-size: 1rem;
	}
	.PartnerUpHub .header a:hover{
		color: #fff;
	}
	.PartnerUpHub .header .headerTitle{
		width: 40vw;
	}
	.PartnerUpHub .header ul li{
		font-size: 0.4rem;
	}
	.PartnerUpHub .header ul li a{
		font-size: 0.8rem;
		padding: 5px 10px;
		letter-spacing: 0.01rem;
	}
	.PartnerUpHub .header ul li a:hover{
		color: #000;
	}
	.brand-description {
	  	margin: 0.75rem 0;
	}
	.data-display {
		margin: 0.75rem 0;
		grid-template-columns: repeat(2, 1fr); /* 将网格布局改为2列 */
		grid-template-rows: repeat(4, 1fr); /* 将网格布局改为4行 */
	}
	.data-cell {
		padding: 1.5rem 3vw 1.5rem;
	}
	.data-cell:nth-child(n+2):nth-child(-n+4), .data-cell:nth-child(n+6) {
		border-left: none;
	}
	.data-cell:nth-child(n+5) {
		border-top: none;
	}
	.data-cell:nth-child(n+1):nth-child(-n+6) {
		border-bottom: 1px solid #ddd; 
	}
	.data-cell:nth-child(odd) {
		border-right: 1px solid #ddd; 
	}
	.data-value {
	  font-size: 8vw;
	  letter-spacing: -1px;
	  padding: 0rem;
	}
	.data-value span {
		font-size: 7vw;
		top: -0.05rem;
		left: 0;
	}
	.data-describe p{
	  font-size: 3.6vw;
	  line-height: 1.5;
	}
	.CA-display {
		margin: 0.75rem 0;
		grid-template-columns: repeat(2, 1fr); /* 将网格布局改为2列 */
		grid-template-rows: repeat(2, 1fr); /* 将网格布局改为2行 */
	}
	.CA-cell {
		padding: 1.5rem 3vw 1.5rem;
	}
	.CA-value {
	  font-size: 8vw;
	  letter-spacing: -1px;
	  padding: 0rem;
	}
	.CA-value span {
		font-size: 7vw;
		top: -0.05rem;
		left: 0;
	}
	.CA-describe p{
	  font-size: 3.6vw;
	  line-height: 1.5;
	}
	.text-block{
	    display: grid;
	    grid-template-columns: 1fr;
	    gap: 0.75rem;
	}
	.text-block > div {
		padding: 0;
	}
	.text-block h2{
		text-align: left;
		font-size: 1.45rem;
		margin: 1rem 0;
		letter-spacing: 0.5px;
	}
	.vertical-line {
		display: none;
	 }

	  .social-content {
	    grid-template-columns: 1fr;
	  }
	  .social-icon {
		font-size: 9vw;
	  }
	  .social-mv {
		gap: 1vw;
	    grid-template-columns: repeat(1, 1fr);
	  }
	  .social-images {
		gap: 1vw;
	    grid-template-columns: repeat(2, 1fr);
	  }
	  .social-data-display {
		margin: 1rem 0;
		grid-template-columns: repeat(2, 1fr); /* 将网格布局改为2列 */
		grid-template-rows: repeat(3, 1fr); /* 将网格布局改为4行 */
	}
	.social-data-cell {
		padding: 1.5rem 3vw 1.5rem;
	}
	.social-data-cell:nth-child(n+2):nth-child(-n+3), .social-data-cell:nth-child(n+5):nth-child(-n+8) {
		border-left: none;
	}
	.social-data-cell:nth-child(n+4):nth-child(-n+7) {
		border-top: none; 
	}
	.social-data-cell:nth-child(n+1):nth-child(-n+4) {
		border-bottom: 1px solid #ddd; 
	  }
	.social-data-cell:nth-child(odd) {
		border-right: 1px solid #ddd; 
	}
	.social-data-value {
	  font-size: 8vw;
	  letter-spacing: -1px;
	  padding: 0rem;
	}
	.social-data-describe p{
	  font-size: 3.6vw;
	  line-height: 1.5;
	}
	.ebx-image{
		margin: 2rem auto;
	}
	.cases-grid {
	  grid-template-columns: repeat(1, 1fr);
	}
	.ebxDNA .title {
	    margin: 0;
	    font-size: 7.5vw;
    }
    .slogan-block {
        grid-column: 1 / 3;
    }
    .slogan-block img {
    	max-width: fit-content;
		width: 85%;
		margin: 0 7.5%;
    }
    .main-block {
        grid-column: 1 / 3;
    }
	.main-block img {
		width: 100%;
		height: auto;
    }
	.main-block img.barcode {
		width: 100%;
	}
	.success-cases .title {
		font-size: 1.45rem;
		letter-spacing: 0.5px;
	}
	.overlay-icon::before {
		font-size: 10vw;
	}
	.overlay-icon {
		width: 18vw;
		height: 18vw;
		opacity: 0.6;
		border-radius: 50%;
	}
	.image-container p {
		font-size: 1rem;
		line-height: 1.2;
		color: #fff;
		bottom: 1.2rem;
		padding: 0 1rem;
	}
	.overlay-text {
        color: white;
        font-size: 4vw;
        line-height: 1.2;
    }
}