@charset "utf-8";
/* ===========================================
 * MAIN
 * ======================================== */
.container {
  background-color: #F6BEC8;
}
/* ===========================================
 * KV
 * ======================================== */
.kv__wrap {
  margin-inline: auto;
}
.kv__inner {
  margin-inline: auto;
}
.kv__img {
  width: 100%;
  display: block;
}
/* ===========================================
 * APP
 * ======================================== */
.app__box__btn__welpark {
  width: min(100%, 275px);
  padding-block: 17px;
  margin-inline: auto;
  margin-bottom: 10px;
  font: 600 normal 16px / 1.3 var(--font-fm-main);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 9999px;
  background-color: #C4007C;
  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.10), 0 1px 4px 0 rgba(12, 12, 13, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: auto;
  text-align: center;
}
.app__box__txt__welpark {
  text-align: center;
  font: 600 normal 18px / 1.5 var(--font-fm-main);
  letter-spacing: 0.36px;
  margin-bottom: 8px;
}
.app__box__txt02__welpark {
  text-align: center;
  font: 600 normal 14px / 1.5 var(--font-fm-main);
  letter-spacing: 0.28px;
}
.app__box__link__container__welpark {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  place-items: center; 
}

.app__box__link__welpark {
  width: min(100%, 64px);
  height: min(100%, 64px);
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 6px;
  overflow: hidden;
}

/* ===========================================
 * MODAL
 * ======================================== */
.modalArea {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	display: none;
}
.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(30, 30, 30, 0.9);
}
.modalWrapper {
	width: min(calc(100% - 60px), 315px);
	height: min(calc(100% - 60px), 500px);
	padding: 20px;
	border-radius: 10px;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.closeModal {
	width: 40px;
	height: 40px;
	font-size: 20px;
	border-radius: 9999px;
	background-color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -20px;
	right: -20px;
	cursor: pointer;
	&::before,
	&::after {
		content: "";
		background: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2px;
		height: 50%;
	}
	&::before {
		transform: translate(-50%,-50%) rotate(45deg);
	}
	&::after {
		transform: translate(-50%,-50%) rotate(-45deg);
	}
}
.modalThumbnail {
	width: 128px;
	margin: 0 auto 30px;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
}

.modalList {
	width: fit-content;
	margin: auto;
	display: grid;
	grid-template-columns: 109px 135px;
	grid-template-rows: auto;
	gap: 10px;
}