@charset "utf-8";

@media screen and (min-width: 961px) {
  .wrapper {
    overflow: revert;
  }
}

/* intro
---------------------------------------------- */
.intro {
  padding-block: clamp(80px, 3.79rem + 5.18vw, 160px) clamp(70px, 2.71rem + 7.12vw, 180px);
  position: relative;
  z-index: 0;
}

.intro__copy {
  text-align: center;
}
.intro__text {
  font-size: clamp(16px, 0.92rem + 0.17vw, 18px);
  letter-spacing: 0.05em;
  line-height: 2.5;
  margin-top: 2.5em;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .intro__copy {
    margin-inline: -10%;
  }

  .intro__text {
    line-height: 2.375;
    text-align: left;
  }
}


/* course
---------------------------------------------- */
.course {
	position: relative;
	/* height: 100vh; */
	padding-bottom: 100vh;
	z-index: 1;
}

.courseBox__inner {
	display: flex;
	justify-content: space-between;
	/* width: 85%; */
	/* max-width: 1560px; */
	/* height: 100%; */
}

.courseHead {
	position: relative;
	width: calc(740 / 1560 * 100%);
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

.courseHead__img {
	position: relative;
	z-index: 0;
}

.courseContents {
	width: calc(670 / 1560 * 100%);
}

.courseItem {
  display: grid;
  align-items: center;
  height: 100%;
  padding-right: 20px;
  position: relative;
  z-index: 0;
}

.courseItem__num {
	font-size: clamp(60px, 0.41rem + 6.95vw, 140px);
  position: absolute;
  top: 5%;
  right: 0;
  z-index: 0;
}
.courseBox[data-item="1"] .courseItem__num,
.courseBox[data-item="3"] .courseItem__num {
  color: #fff9bd;
}
.courseBox[data-item="2"] .courseItem__num,
.courseBox[data-item="4"] .courseItem__num {
  color: #ffeed2;
}

.courseMerit {
	position: relative;
	z-index: 0;
}

.courseMerit__copy {
  font-weight: 500;
}
.courseMerit__copy .text {
  position: relative;
  z-index: 0;
}
.courseMerit__copy .text .figure {
  position: absolute;
  z-index: -1;
}

.courseMerit__text {
  margin-top: 2em;
  position: relative;
  z-index: 1;
}

.courseNav {
	display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
	position: absolute;
	top: 0;
	right: 0;
	gap: 35px;
	opacity: 0;
	visibility: hidden;
	transition: .4s ease-out;
	z-index: 1;
}
.courseNav.is-active {
	opacity: 1;
	visibility: visible;
}

.courseNav__btn {
	display: block;
	position: relative;
	width: 16px;
	aspect-ratio: 1;
	background-color: #f2f2f2;
	border-radius: 50%;
	transition: .3s linear;
	z-index: 0;
}
.courseNav__btn.is-active {
	background-color: #ff964c;
}

.courseSpacer {
	height: 100vh;
}

.course .swiper-pagination {
	display: none;
}


@media screen and (min-width: 961px) {
  .courseWrap {
    width: 90%;
    max-width: 1560px;
    margin-inline: auto;
    position: sticky;
    top: 0;
  }

  .courseBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin-inline: auto;
    padding-block: clamp(50px, 1.76rem + 5.83vw, 140px);
    opacity: 0;
    visibility: hidden;
    transition: .3s linear;
    z-index: 1;
  }
  .courseBox.is-active {
    opacity: 1;
    visibility: visible;
  }

  .courseBox[data-item="1"] .courseMerit__copy .text .figure {
    width: 140px;
    top: -35%;
    left: 127%;
  }
  .courseBox[data-item="2"] .courseMerit__copy .text .figure {
    width: 110px;
    top: -74%;
    left: -14%;
  }
  .courseBox[data-item="3"] .courseMerit__copy .text .figure {
    width: 140px;
    top: -48%;
    left: 48%;
  }
  .courseBox[data-item="4"] .courseMerit__copy .text .figure {
    width: 100px;
    top: -90%;
    left: -10%;
  }
}

/* @media (min-aspect-ratio: 1920/1000) {
	.courseBox__inner {
		width: 150vh;
	}

	.courseMerit,
	.courseItem__img {
		margin-top: 5vh;
	}
} */

@media screen and (max-width: 960px) {
	.course {
    padding-bottom: 0;
		overflow: hidden;
	}

	.courseWrap {
		position: relative;
    z-index: 0;
	}

	.courseBox__inner {
		flex-direction: column;
		width: 100%;
	}

	.courseHead {
		width: 100%;
		height: auto;
	}

	.courseContents {
		width: calc(320 / 375 * 100%);
		margin-top: 40px;
    margin-inline: auto;
	}

  .courseItem {
    display: block;
    height: auto;
    padding-right: 0;
    padding-bottom: 30px;
  }

  .courseItem__num {
    top: 0;
  }

  .courseMerit__copy .text {
    position: static;
  }
  .courseMerit__copy .text .figure {
    top: -45%;
    right: 10%;
  }

  .courseMerit__text {
    margin-top: 1.5em;
  }

	.course .swiper-pagination {
		display: flex;
		align-items: center;
		justify-content: center;
    gap: 24px;
		position: static;
	}
	.course .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
		background-color: #f2f2f2;
    margin: 0 !important;
    opacity: 1;
	}
	.course .swiper-pagination-bullet-active {
		background-color: #ff964c;
	}

  .courseBox[data-item="1"] .courseMerit__copy .text .figure {
    width: 84px;
  }
  .courseBox[data-item="2"] .courseMerit__copy .text .figure {
    width: 66px;
  }
  .courseBox[data-item="3"] .courseMerit__copy .text .figure {
    width: 84px;
  }
  .courseBox[data-item="4"] .courseMerit__copy .text .figure {
    width: 59px;
  }
}

/* membershipPdf
---------------------------------------------- */
.membershipPdf {
  max-width: 1560px;
  padding-top: 100px;
}
.membershipPdf__text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.5;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .membershipPdf__text {
    font-size: 12px;
  }
}