.top-banner {
	height:  0;
	padding-top:  calc(9 / 16 * 100%);
	position: relative;
}
.top-banner img {
	display: block;
	position: absolute;
	top:  0;
	left:  0;
	width:  100%;
	height:  100%;
	object-fit: cover;
	object-position: center;
}
.top-banner .info {
	position: absolute;
	bottom:  0;
	left:  0;
	width:  100%;
	height:  auto;
	padding:  1.0714rem 2.1429rem;
	display: block;
	background: rgba(0, 0, 0, 0.4);
}
.top-banner .info .tit {
	font-size:  1.7143rem;
	line-height:  1.1;
	margin-bottom:  1.0714rem;
	color: #fff;
}
.top-banner .info .p {
	font-size:  1rem;
	color: #fff;
	line-height:  1.5;
}
@media (max-width: 768px) {
	.top-banner .info {
		padding: 10px;
	}
	.top-banner .info .tit {
        font-size:  1.2857rem;
        margin-bottom:  0.7143rem;
	}
	.top-banner .info .p {
		font-size:  1rem;
	}
}
.gallery-wall {
	display: block;
	margin-top:  2.1429rem;
}
.masonry {
    display: block;
    height:  auto;
	column-count: 4;
	column-gap:  1.4286rem;
}
.gallery-item {
	display: inline-block;
	width:  100%;
	margin-bottom:  1.4286rem;
	position: relative;
	break-inside: avoid;
	border: 2px solid rgba(0, 0, 0, 0.6);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.2s ease;
}
.gallery-item img {
	display: block;
	width:  100%;
	height:  auto;
	object-fit: cover;
	vertical-align: middle;
}
.gallery-item:hover {
	transform:  translateY(-0.1429rem);
}
.zoom-icon {
	position: absolute;
	left:  50%;
	top:  50%;
	width:  3rem;
	height:  3rem;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	transform:  translate(-50%, -50%) scale(0.9);
	opacity: 0;
	transition: all 0.2s ease;
	pointer-events: none;
}
.zoom-icon::after {
	content: '';
	display: block;
	width:  1.5714rem;
	height:  1.5714rem;
	margin:  0.7143rem;
	background: url('/template/assets/img/search-white.svg') center center
		no-repeat;
	background-size: 22px 22px;
}
.gallery-item:hover .zoom-icon {
	opacity: 1;
	transform:  translate(-50%, -50%) scale(1);
}
.glightbox-thumbs {
	position: fixed;
	left:  0;
	right:  0;
	bottom:  0;
	padding:  0.5714rem 0.8571rem;
	display: flex;
	gap:  0.5714rem;
	overflow-x: auto;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	z-index: 999999;
}
.glightbox-thumbs .thumb {
	flex: 0 0 auto;
	width:  5.1429rem;
	height:  5.1429rem;
	border-radius: 6px;
	border: 2px solid transparent;
	background-size: cover;
	background-position: center;
	opacity: 0.8;
	transition: all 0.2s ease;
}
.glightbox-thumbs .thumb.active {
	border-color: #1a82ff;
	opacity: 1;
}
@media (max-width: 1200px) {
	.masonry {
		column-count: 3;
	}
}
@media (max-width: 992px) {
	.masonry {
		column-count: 2;
	}
}
@media (max-width: 576px) {
	.masonry {
		column-count: 1;
		column-gap: 12px;
	}
	.gallery-item {
		margin-bottom:  0.8571rem;
		border-radius: 6px;
	}
}