@charset "utf-8";
[class*=swiper]:focus {
		outline: none;
}
.hdr_gallery_main {
		position: relative;
		max-width: 350px;
		margin: 0 auto
}
.hdr_gallery_main img {
		width: 100%;
		height: auto;
}
.hdr_gallery {
		position: relative;
		max-width: 840px;
		margin: 0 auto 60px;
}
.hdr_gallery .thumbnail_wrap {
		position: absolute;
		bottom: 0px;
		left: 580px;
		display: flex;
		justify-content: center;
		align-items: center;
		max-width: 250px;
}
.thumbnail {
		cursor: pointer;
		width: 60px;
		margin: 0 5px;
}
.thumbnail {
		position: relative;
}
.thumbnail::after {
		content: '';
		display: block;
		position: absolute;
		top: -25px;
		left: calc(50% - 7px);
		width: 0;
		height: 0;
		border-style: solid;
		border-right: 7px solid transparent;
		border-left: 7px solid transparent;
		border-top: 12px solid #b96e63;
		border-bottom: 0;
		pointer-events: none;
		transition: opacity 0.4s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
		opacity: 0;
		transform: translateY(-8px)
}
.thumbnail.isActive::after {
		opacity: 1;
		transform: translateY(0px)
}
@media(max-width: 767px) {
		.hdr_gallery {
				position: relative;
				margin: 0 auto 40px;
		}
		.hdr_gallery_main {
				max-width: 70%;
				margin: 0 auto 50px
		}
		.hdr_gallery_main img {
				width: 100%;
				height: auto;
		}
		.hdr_gallery .thumbnail_wrap {
				position: static;
		}
		.thumbnail_wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				max-width: 50%;
				margin: 0 auto;
		}
		.thumbnail {
				cursor: pointer;
				width: 60px;
				margin: 0 10px;
		}
}