:root {
	--app-height: 100%;
}
html,
body {
	height: var(--app-height);
}
.body-hidden {
	overflow: hidden;
}
.album-warp {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	background-color: #f1f1f1;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -99;
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.2s ease-out;
}
.album-warp--open {
	opacity: 1;
	transform: scale(1);
	z-index: 99;
}
.album-close {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	color: #bdbdbd;
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 27px;
	cursor: pointer;
	z-index: 6;
}

.album-box {
	width: calc(100% - 350px);
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: relative;
}
.album-slider {
	width: 100%;
	max-width: 50%;
	margin: auto;
	position: relative;
}
.album-slider .prev,
.album-slider .next {
	width: 36px;
	height: 36px;
	margin: auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: #f1f1f1;
	position: absolute;
	z-index: 20;
	top: 0;
	bottom: 0;
	cursor: pointer;
	font-size: 25px;
	color: #bdbdbd;
}
.album-slider .prev {
	left: -66px;
}
.album-slider .next {
	right: -66px;
}
.album-list {
	width: 100%;
	height: 100%;
	margin: auto;
}
.album-hid {
	width: 100%;
	padding: 0 0 100% 0;
	background-color: #fff;
	overflow: hidden;
	position: relative;
	background-color: #e1e1e1;
}
.album-img {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	touch-action: none;
	/*background-color: #e1e1e1;*/
	background-color: #fff;
}
.album-img img {
	width: 100%;
	height: 100%;
	display: block;
	aspect-ratio: 1/1;
	object-fit: contain;
	/*pointer-events: none;*/
	user-select: none;
	/*background-color: #e1e1e1;*/
}
.zoom-box {
	width: 150px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.zoom-in,
.zoom-out {
	width: 33px;
	height: 33px;
	margin: auto;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	border: 1px solid #a8a8a8;
	cursor: pointer;
	user-select: none;
}
.zoom-text {
	width: 100%;
	padding: 10px 0;
	text-align: center;
}
.album-nav-box {
	width: 200px;
	padding: 70px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.album-nav {
	width: 80px;
	max-height: 580px;
	height: 100%;
	position: relative;
	line-height: 0;
}
.album-nav .slick-slide {
	line-height: 0;
	border-width: 0;
}
.album-nav .prev,
.album-nav .next {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #a8a8a8;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
.album-nav .prev:hover,
.album-nav .next:hover {
	background-color: #a8a8a8;
	color: #fff;
}
.album-nav__list {
	width: 100%;
	padding: 10px 0;
	cursor: pointer;
	opacity: 0.4;
	transition: all 0.3s ease-in-out;
}
.album-nav__list.slick-current,
.album-nav__list:hover {
	opacity: 1;
}
.album-nav__list img {
	width: 100%;
	display: block;
	aspect-ratio: 1/1;
	object-fit: contain;
	/*background-color: #e1e1e1;*/
	background-color: #fff;
}
@media screen and (max-width: 1280px) {
	.album-slider {
		max-width: 600px;
	}
}
@media screen and (max-width: 1200px) {
	.album-slider .prev {
		left: -46px;
	}
	.album-slider .next {
		right: -46px;
	}
}
@media screen and (max-width: 768px) {
	.zoom-box {
		width: 100%;
		padding-bottom: 20px;
		display: none;
		position: absolute;
		top: 0;
		z-index: 99;
	}
	.zoom-text {
		width: 70px;
	}
	.zoom-in,
	.zoom-out {
		margin: 0 10px;
	}
	.album-box {
		width: 100%;
		height: auto;
	}
	.album-close {
		border-radius: 9999px;
		color: rgba(0, 0, 0, 0.4);
		font-size: 20px;
		background-color: #fff;
	}
	.album-slider {
		max-width: 100%;
		height: 100vh;
	}
	.album-slider .slick-list,
	.album-slider .slick-track {
		height: 100%;
	}
	.album-hid {
		height: 100%;
		padding: 0;
	}
	.album-img img {
		aspect-ratio: auto;
	}
	.album-nav-box {
		position: fixed;
		right: -100%;
	}
	.album-slider .prev,
	.album-slider .next {
		width: 40px;
		height: 40px;
		border-radius: 9999px;
		background-color: #fff;
		top: auto;
		bottom: calc(50% - 65vw);
		z-index: 5;
	}
	.album-slider .prev i,
	.album-slider .next i {
		font-size: 18px;
		color: rgba(0, 0, 0, 0.4);
	}
	.album-slider .prev {
		left: calc(50% - 111px);
	}
	.album-slider .next {
		right: calc(50% - 111px);
	}
	.album__dots {
		width: 100%;
		padding-bottom: 5px;
		text-align: center;
		justify-content: center;
		align-content: center;
		align-items: center;
		position: absolute;
		bottom: calc(50% - 65vw);
		left: 0;
		z-index: 2;
	}
	.album__dots li {
		margin: 0 7px;
		display: inline-block;
		cursor: pointer;
	}
	.album__dots li.slick-active span {
		background-color: #ff3427;
		border-color: #ff3427;
	}
	.album__dots li span {
		width: 10px;
		height: 10px;
		background-color: #fff;
		border-radius: 99px;
		border: 1px solid rgba(0, 0, 0, 0.4);
		display: block;
	}
}