@charset "utf-8";

:root {
	--step-start-end-bd: #171c5c;
	--step-start-end-bg: #e3edf8;
	--step-bd: #96bde6;
	--step-museum-arrow: url(../img/contents/ico_step_arrow_history.svg);
}

/* greeting */
.greeting.history .txt-area::before {
	height: 49.1rem;
	background-image: url(../img/contents/greeting_history.png);
}

@media (max-width: 1023px) {
	.greeting.history .txt-area::before {
		height: 44.7rem;
	}
}

@media (max-width: 479px) {
	.greeting.history .txt-area::before {
		height: 37.3rem;
	}
}

/* facilitieis, facilities2 */
.facilities .floor-layout {
	margin-left: 3.2rem;
	padding: 3rem;
	text-align: center;
	background-color: #fafafa;
}

.facilities .floor-photo {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 2.5rem;
	margin-left: 3.2rem;
}
.facilities .floor-photo li {
	width: calc((100% - 5rem) / 3);
	padding: 2.6rem 1rem;
	border: 0.1rem solid #dddddd;
	border-radius: 0.6rem;
}
.facilities .floor-photo li .img {
	max-width: 23.6rem;
	margin: 0 auto;
	border-radius: 0.4rem;
	overflow: hidden;
}
.facilities .floor-photo li .txt {
	margin-top: 2rem;
	font-size: 1.8rem;
	font-weight: 600;
	text-align: center;
}
.facilities .floor-photo li .txt span {
	display: inline-block;
	position: relative;
	top: -0.1rem;
	margin-right: 1rem;
	padding: 0 1rem;
	color: #fff;
	font-size: 1.6rem;
	border-radius: 10rem;
	background-color: #16727f;
}

.facilities.floor2 .floor-photo li .txt span {
	background-color: #d24814;
}

@media (max-width: 767px) {
	.facilities .floor-photo {
		gap: 1rem;
	}
	.facilities .floor-photo li {
		width: calc((100% - 1rem) / 2);
	}
}

@media (max-width: 374px) {
	.facilities .floor-photo {
		flex-direction: column;
	}
	.facilities .floor-photo li {
		width: 100%;
	}
}

/* information */
.information {
	margin-left: 3.2rem;
}
.information .top {
	margin-bottom: 3.2rem;
	padding: 3rem;
	border: 0.1rem solid #dddddd;
	border-radius: 1rem;
	background-color: #fff;
}
.information .top .img {
	max-width: 85.3rem;
	margin: 0 auto;
}
.information .mv-path {
	counter-reset: pathNum;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: -0.8rem;
}
.information .mv-path li {
	counter-increment: pathNum;
}
.information .mv-path li:not(:last-of-type)::after {
	content: '';
	display: inline-block;
	width: 1.9rem;
	height: 1.7rem;
	margin: 0 0.8rem;
	background: url(../img/contents/information_arrow.svg) no-repeat;
	background-size: contain;
}
.information .mv-path li span {
	display: inline-block;
	margin: 0.8rem;
	padding: 0.6rem 1rem;
	border-radius: 0.4rem;
	background-color: #eff3f5;
}
.information .mv-path li span::before {
	content: counter(pathNum);
	display: inline-block;
	width: 2.4rem;
	height: 2.4rem;
	margin-right: 0.7rem;
	padding: 0.1rem;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 600;
	text-align: center;
	border-radius: 10rem;
	background-color: #2981dc;
}

/* exhibition */
.exhi-tab p {
	position: relative;
	margin-bottom: 1rem;
	padding-left: 1.3rem;
	color: var(var(--krds-color-light-gray-70));
	font-size: 1.6rem;
}
.exhi-tab p::before {
	content: '*';
	position: absolute;
	z-index: 1;
	top: 0.3rem;
	left: 0;
}
.exhi-tab ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}
.exhi-tab ul li {
	flex: 1 1 calc(25% - 0.8rem);
	display: flex;
	align-items: center;
	position: relative;
	max-width: 27.4rem;
	padding: 1rem 2.5rem 1rem 1rem;
	font-size: 1.8rem;
	font-weight: 600;
	border: 0.1rem dashed #969696;
	border-radius: 0.6rem;
	cursor: pointer;
	background-color: #fff;
	transition: all 0.2s ease;
}
.exhi-tab ul li::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	width: 1rem;
	height: 1rem;
	background-image: url(../img/contents/exhibition_tab_arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
}
.exhi-tab ul li span {
	flex-shrink: 0;
	display: inline-block;
	margin-right: 1rem;
	padding: 0.2rem 1.4rem;
	color: #fff;
	font-size: 1.5rem;
	border-radius: 10rem;
}

/* tab active 공통 */
.exhi-tab ul li.active {
	color: #fff;
}
.exhi-tab ul li.active::after {
	background-image: url(../img/contents/exhibition_tab_arrow_active.svg);
}
.exhi-tab ul li.active span {
	background-color: #fff;
}

/* tab lobby 1 active */
.exhi-tab .lb-z1.active {
	border: 0.1rem dashed #ee7084;
	background-color: #ee7084;
}
.exhi-tab .lb-z1 span {
	background-color: #ee7084;
}
.exhi-tab .lb-z1.active span {
	color: #ee7084;
}

/* tab lobby 2 active */
.exhi-tab .lb-z2.active {
	border: 0.1rem dashed #135bc1;
	background-color: #135bc1;
}
.exhi-tab .lb-z2 span {
	background-color: #135bc1;
}
.exhi-tab .lb-z2.active span {
	color: #135bc1;
}

/* tab first/second floor active 공통*/
.exhi-tab .z1.active {
	border: 0.1rem dashed #d6890f;
	background-color: #d6890f;
}
.exhi-tab .z1 span {
	background-color: #d6890f;
}
.exhi-tab .z1.active span {
	color: #d6890f;
}

.exhi-tab .z2.active {
	border: 0.1rem dashed #888a8c;
	background-color: #888a8c;
}
.exhi-tab .z2 span {
	background-color: #888a8c;
}
.exhi-tab .z2.active span {
	color: #888a8c;
}

.exhi-tab .z3.active {
	border: 0.1rem dashed #28b195;
	background-color: #28b195;
}
.exhi-tab .z3 span {
	background-color: #28b195;
}
.exhi-tab .z3.active span {
	color: #28b195;
}

.exhi-tab .z4.active {
	border: 0.1rem dashed #135bc1;
	background-color: #135bc1;
}
.exhi-tab .z4 span {
	background-color: #135bc1;
}
.exhi-tab .z4.active span {
	color: #135bc1;
}

.exhi-con .con {
	margin-top: 1rem;
}
.exhi-con .con .intro-area {
	counter-reset: exhiIntroNum;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	padding: 1.6rem 1.3rem;
	border: 0.1rem solid #dddddd;
	border-radius: 0.8rem;
}
.exhi-con .con .intro-area li {
	counter-increment: exhiIntroNum;
	position: relative;
	margin: 1rem 1.3rem;
	padding-left: 3.4rem;
}
.exhi-con .con .intro-area li::before {
	content: counter(exhiIntroNum);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	color: #fff;
	width: 2.4rem;
	height: 2.4rem;
	font-size: 1.5rem;
	font-weight: 600;
	border-radius: 10rem;
}
.exhi-con .con .intro-area.lb-z1 li::before {
	background-color: #ee7084;
}
.exhi-con .con .intro-area.z1 li::before {
	background-color: #d6890f;
}
.exhi-con .con .intro-area.z2 li::before {
	background-color: #888a8c;
}
.exhi-con .con .intro-area.z3 li::before {
	background-color: #28b195;
}
.exhi-con .con .intro-area.z4 li::before {
	background-color: #135bc1;
}
.exhi-con .con .img-area {
	padding: 3rem;
	border: 0.1rem solid #dddddd;
	border-radius: 0.8rem;
}
.exhi-con .con .img-area .img {
	max-width: 85.2rem;
	margin: 0 auto;
	border-radius: 0.8rem;
	overflow: hidden;
}
.exhi-con .con .img-area .img + .img {
	margin-top: 1rem;
}

@media (max-width: 639px) {
	.exhi-tab ul li {
		flex: 0 1 calc(50% - 0.8rem);
		max-width: 50%;
	}
}
@media (max-width: 479px) {
	.exhi-tab ul li {
		flex: 0 1 100%;
		max-width: 100%;
	}

	.exhi-con .con .intro-area {
		padding: 1rem;
	}
	.exhi-con .con .img-area {
		padding: 2rem;
	}
}