#outer-div {
  width: 500px;
  height: 500px;
  overflow: hidden;
  /* margin: auto; */
  position:relative;
}

#outer-div div {
  line-height: 0;
  transition-duration: 0.3s;
}

#outer-div img {
  width: 500px;
  height: 500px;
  transition-duration: 0.3s;
  transition-property: transform;/* just for candy: */
}

.detail_imgs {
	/* max-width:500px; */
	margin-top:8px;
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:8px;
}
.detail_imgs div {cursor:pointer;}
.detail_imgs img {
	width:100%;
	object-fit:cover;
}

#manual_text {
  position:absolute;
  color:#f1f1f1;
  bottom:11px;
  left:2px;
  font-family:sans-serif;
  font-size:0.9em;
}

/* »ö»ó¹Ù·Î°¡±â */
.detail_colors.active {
    opacity: 1;
    transform: translateY(-62%);
	display:block;
}
.detail_colors {
	position:fixed;
	top:50%;
	left:50px;
	transform: translateY(-50%);
	opacity:0;
	display:none;
	z-index:30;
}
.detail_colors article {
	transition:0.3s;
	cursor:pointer;
}
.detail_colors article:hover {
	background:#ddd;
}
.detail_colors strong {
	font-size:17px;
	display:block;
	margin-bottom:4px;
}
.detail_colors strong,
.detail_colors .grid_items p {text-align:center;}
.detail_colors .grid_items {
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:12px;
}
.detail_colors .grid_items div {
	width:80px;
	height:80px;
}
.detail_colors .grid_items p {
	font-size:14px;
	font-weight:500;
	margin-top:5px;
}
.detail_colors .grid_items div img {
	width:100%;
	height:100%;
	object-fit:cover;
}


@media screen and (max-width:1800px) {
	.detail_colors.active,
	.detail_colors {display:none;}
}