@charset "utf-8";

.section-hero { position: relative; width: 100%;
	.swiper-slide { height: auto; isolation: isolate; contain: content; }
	.player { position: absolute; top: 50%; left: 50%; z-index: -1; display: block; aspect-ratio: 1920 / 1080; object-fit: cover; border: 0; translate: -50% -50%; pointer-events: none;
		@media (width >= 768px) { width: 100vmax; height: auto; }
		@media (width < 768px) { width: auto; height: 100%; }
	}
	.video-title { position: absolute; inset: 0; object-fit: contain; margin: auto; translate: 0 -3.5%;
		@media (width >= 768px) { width: min(946rem, 49%); height: min(608rem, 81%); }
		@media (width < 768px) { width: 100%; }
	}
	.slide-image { display: block; width: 100%; height: auto; }
	.control-block { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
	.btn, .pagination { pointer-events: auto; }
	.btn { display: grid; place-items: center; width: clamp(45rem, calc(80 / var(--container) * 100vw), 80rem); aspect-ratio: 1; background: hsla(0, 0%, 100%, 0.1); border-radius: 50%; }
	.btn::before { display: block; width: clamp(8rem, calc(12 / var(--container) * 100vw), 12rem); aspect-ratio: 12 / 21; background: url("/assets/images/home/hero-arrow.svg") no-repeat 50% / contain; opacity: 0.5; content: ""; }
	.btn--next::before { rotate: 180deg; }
	.pagination { position: absolute; inset: auto 0 6.7%; display: flex; justify-content: center; gap: 10rem; }
	#page-top & .swiper-pagination-bullet { margin: 0; }
	.swiper-pagination-bullet { all: unset; display: block; flex-shrink: 0; width: 10rem; aspect-ratio: 1; background: #fff; border-radius: 50%; }
	.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { opacity: 0.3; }
	@media (prefers-reduced-motion: no-preference) {
		.btn, .btn::before, .swiper-pagination-bullet { transition: 0.3s; }
	}
	@media (any-hover) {
		.btn:hover { background: var(--black); }
		.btn:hover::before { opacity: 1; }
	}
}

.section-nav { padding-block: 50rem;
	.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(100rem, 1fr)); gap: clamp(10rem, calc(40 / var(--container) * 100vw), 40rem); max-width: 1102rem; }
	.link { display: grid; grid-template-rows: 80fr 66fr; aspect-ratio: 1; text-align: center; border: 2px solid #eee; border-radius: 50%; }
	.icon { display: block; place-self: end center; width: 2.70588235em; aspect-ratio: 1; background: no-repeat 50%; }
	.icon-1 { background-image: url("/assets/images/ui/nav-icon-1.svg"); background-size: 91.30434783%; }
	.icon-2 { background-image: url("/assets/images/ui/nav-icon-2.svg"); background-size: 80.43478261%; }
	.icon-3 { background-image: url("/assets/images/ui/nav-icon-3.svg"); background-size: 84.7826087%; }
	.icon-4 { background-image: url("/assets/images/ui/nav-icon-4.svg"); background-size: 78.26086957%; }
	.icon-5 { background-image: url("/assets/images/ui/nav-icon-5.svg"); background-size: 86.95652174%; }
	.icon-6 { background-image: url("/assets/images/ui/nav-icon-6.svg"); background-size: 97.82608696%; }
	.label { margin: 10rem auto 0; font: 600 var(--font-size-17-to-14) var(--font-sans); }
	@media (prefers-reduced-motion: no-preference) {
		.link { transition: 0.3s; }
	}
	@media (any-hover) {
		.link:hover { border-color: var(--primary); box-shadow: 0 20rem 30rem rgb(from var(--primary) r g b / 0.2); }
	}
}

.home {
	.section-heading-block { display: flex; align-items: center; justify-content: space-between; }
	.section-heading { display: flex; align-items: center; gap: 0.57142857em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.025em; }
	.section-heading--en { font-size: var(--font-size-16-to-12); letter-spacing: 0; color: var(--primary); text-transform: uppercase; }
	.section-more { display: inline-flex; align-items: center; gap: 1.13333333em; font: 700 var(--font-size-15) var(--font-sans); letter-spacing: -0.025em; color: var(--black); }
	.section-cross { position: relative; display: inline-block; width: 14rem; aspect-ratio: 1; }
	.section-cross::before, .section-cross::after { position: absolute; inset: 0; margin: auto; background: currentColor; content: ""; }
	.section-cross::before { width: 2rem; }
	.section-cross::after { height: 2rem; }
	@media (prefers-reduced-motion: no-preference) {
		.section-more { transition: 0.3s; }
	}
	@media (any-hover) {
		.section-more:not(:hover) { color: #abaaa9; }
	}
}

.section-event { padding-block: 47rem 51rem;
	.list { --gap: clamp(10rem, calc(30 / var(--container) * 100vw), 30rem); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330rem, calc(50% - (var(--gap) / 2))), 1fr)); gap: calc(var(--gap) * 2) var(--gap); margin-top: 27rem; }
	.thumbnail { display: block; width: 100%; aspect-ratio: 800 / 512; }
	.title { margin-top: 0.75em; font: 600 var(--font-size-20-to-14) var(--font-sans); letter-spacing: -0.025em; text-align: center; color: #222; }
}

.section-promotion-banner { margin-block: 50rem;
	.link { display: block; padding: 60rem 1ch 52rem; text-align: center; color: #fff; background: var(--black) url("/assets/images/home/promotion-banner-bg.webp") no-repeat 50% / cover; }
	.title { display: block; font: 700 var(--font-size-22) var(--font-sans); letter-spacing: clamp(0px, calc(16.28 / var(--container) * 100vw), 16.28rem); text-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.8); }
	.subtitle { display: block; margin-block: 15rem -1rem; font: 500 var(--font-size-40) / 1.5 var(--font-kbo); letter-spacing: 0.022em; }
	.catchphrase { display: block; font: 500 var(--font-size-45) var(--font-kbo); letter-spacing: 0.022em; color: var(--primary); }
}

.section-curriculum { padding-block: 46rem 50rem;
	.list { --gap-column: clamp(10rem, calc(29 / var(--container) * 100vw), 29rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(clamp(170rem, calc(330 / var(--container) * 100vw), 330rem), calc(50% - var(--gap-column))), 1fr)); gap: clamp(10rem, calc(30 / var(--container) * 100vw), 30rem) var(--gap-column); margin-top: 36rem; }
	.link { position: relative; display: block; align-content: end; aspect-ratio: 447 / 400; padding: 5% 5% 8.27740492% 7.38255034%; font: 700 clamp(14rem, calc(25 / var(--container) * 100vw), 25rem) var(--font-sans); color: #fff; isolation: isolate; }
	.link::before { position: absolute; top: 11.8%; left: 7.4%; z-index: -2; font: 700 var(--font-size-15) var(--font-sans); color: hsla(0, 0%, 100%, 0.3); text-transform: uppercase; content: "curriculum"; user-select: none; }
	.bg { position: absolute; inset: 0; z-index: -3; background: linear-gradient(35deg, rgba(0, 0, 0, 0.5), #0000 75%), var(--black) var(--bg-url) no-repeat 50% / cover; }
	.bg-1 { --bg-url: url("/assets/images/home/curriculum-bg-1.webp"); }
	.bg-2 { --bg-url: url("/assets/images/home/curriculum-bg-2.webp"); }
	.bg-3 { --bg-url: url("/assets/images/home/curriculum-bg-3.webp"); }
	.bg-4 { --bg-url: url("/assets/images/home/curriculum-bg-4.webp"); }
	.bg-5 { --bg-url: url("/assets/images/home/curriculum-bg-5.webp"); }
	.bg-6 { --bg-url: url("/assets/images/home/curriculum-bg-6.webp"); }
	@media (prefers-reduced-motion: no-preference) {
		.link::after { transition: 0.3s; }
	}
	@media (any-hover) {
		.link::after { position: absolute; inset: 0; z-index: -1; align-content: center; padding-bottom: 2.8%; font: 700 var(--font-size-15) var(--font-sans); text-align: center; color: inherit; text-transform: uppercase; background: rgb(from var(--primary) r g b / 0.8); content: "detail view"; user-select: none; }
		.link:not(:hover)::after { visibility: hidden; opacity: 0; }
		.link:hover .bg { filter: saturate(0.3); }
	}
}

.section-split { display: grid; gap: 50rem clamp(8rem, calc(102 / var(--container) * 100vw), 102rem); padding-block: 44rem clamp(50rem, calc(99 / var(--container) * 100vw), 99rem);
	@media (width >= 1280px) { grid-template-columns: repeat(2, 1fr); }
}

.section-interview {
	.list, .empty { margin-top: 27rem; }
	.list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10rem; }
	.link { position: relative; display: block; align-content: end; aspect-ratio: 32 / 36; padding: 0 2ch 9%; font: 600 var(--font-size-18) var(--font-sans); letter-spacing: -0.01em; text-align: center; color: #fff; isolation: isolate; }
	.link::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.48) 36%, #0000 75%); content: ""; }
}

@property --percentage { syntax: "<number>"; inherits: true; initial-value: 0; }

.section-review {
	.charts-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10rem, calc(48 / var(--container) * 100vw), 48rem); margin-top: 56rem; color: #222; }
	.chart-block { position: relative; width: 100%; max-width: 300rem; aspect-ratio: 1; container: chart / inline-size; container-type: inline-size; margin-inline: auto; }
	.chart-svg { display: block; width: 100%; height: auto; }
	.chart-track { --circumference: calc(2 * 3.14159265359 * 135); transform-origin: center; rotate: -90deg; stroke-dasharray: var(--circumference); stroke-dashoffset: calc(var(--circumference) - var(--circumference) * var(--percentage) / 100); }
	.student-ratings-track { stroke-dasharray: var(--circumference); stroke-dashoffset: calc(var(--circumference) - var(--circumference) * var(--percentage) * 20 / 100); }
	.info-block { position: absolute; inset: 0; padding-top: 25.8%; text-align: center; }
	.title { width: fit-content; margin-inline: auto; padding: 2.66666667cqw 10.66666667cqw; font: 700 5.33333333cqw var(--font-sans); letter-spacing: -0.01em; color: #fff; background: var(--black); border-radius: 5em; }
	.rating-score { margin-block: 0.3em 0.25em; font: 700 13.33333333cqw var(--font-sans); }
	.rating-total { font-size: 8.33333333cqw; color: rgb(from #222 r g b / 0.22); }
	.rating-star { max-width: 52cqw; aspect-ratio: 162 / 28; margin-inline: auto; background: linear-gradient(90deg, var(--primary) calc(var(--percentage) * 20%), #e2e2e2 calc(var(--percentage) * 20%)); mask: url("/assets/images/home/review-rating-star.svg") no-repeat 50% / contain; }
	.satisfaction-rate { margin-top: 0.8em; font: 700 13.33333333cqw var(--font-sans); }
	.percent { margin-top: -0.2em; font-size: 8.33333333cqw; color: rgb(from #222 r g b / 0.22); }
	@media (prefers-reduced-motion: no-preference) {
		.chart-track { transition: 1.4s; stroke-dashoffset: calc(var(--circumference) - var(--circumference) * 0 / 100);
			.se-visible & { stroke-dashoffset: calc(var(--circumference) - var(--circumference) * var(--percentage) / 100); }
		}
		.student-ratings-track { transition: 1.4s; stroke-dashoffset: calc(var(--circumference) - var(--circumference) * 0 * 20 / 100);
			.se-visible & { stroke-dashoffset: calc(var(--circumference) - var(--circumference) * var(--percentage) * 20 / 100); }
		}
	}
}

.section-slide {
	.section-control { display: inline-flex; gap: 5rem; }
	.section-action { display: grid; place-items: center; width: clamp(45rem, calc(50 / var(--container) * 100vw), 50rem); aspect-ratio: 1; color: #fff; border: 2rem solid #0000; border-radius: 50%; }
	.section-action--prev { background: var(--primary); }
	.section-action--next { background: var(--primary); }
	.section-action--link { background: var(--black); }
	.section-icon { display: block; width: auto; height: auto; }
	.section-icon-arrow { width: 15rem; }
	.section-icon-cross { width: 14rem; }
	@media (prefers-reduced-motion: no-preference) {
		.section-action { transition: 0.3s; }
	}
	@media (any-hover) {
		.section-action--prev:not(:hover) { color: #d3d3d3; background: 0; border-color: #d3d3d3; }
		.section-action--next:not(:hover) { color: #d3d3d3; background: 0; border-color: #d3d3d3; }
		.section-action--link:not(:hover) { background: #7d7b79; }
	}
}

.section-photo-story { contain: content; padding-block: clamp(50rem, calc(92 / var(--container) * 100vw), 92rem) clamp(50rem, calc(100 / var(--container) * 100vw), 100rem); background: #f5f5f5;
	.swiper, .empty { margin-top: 32rem; }
	.swiper { overflow: visible clip; }
	.link { position: relative; display: block; }
	.thumbnail { display: block; aspect-ratio: 447 / 320; }
	@media (prefers-reduced-motion: no-preference) {
		.link::before, .thumbnail { transition: 0.3s; }
	}
	@media (any-hover) {
		.link::before { position: absolute; inset: 0; z-index: 1; align-content: center; padding-top: 5.4%; font: 700 var(--font-size-15) var(--font-sans); text-align: center; color: #fff; text-transform: uppercase; background: rgb(from var(--primary) r g b / 0.8); content: "detail view"; pointer-events: none; user-select: none; }
		.link:not(:hover)::before { opacity: 0; }
		.link:hover .thumbnail { filter: saturate(0.3); }
	}
}

.section-facilities { padding-block: clamp(50rem, calc(91 / var(--container) * 100vw), 91rem) 45.5rem;
	.swiper { margin-top: 32rem; }
	.link { position: relative; display: block; }
	.thumbnail { display: block; aspect-ratio: 447 / 320; }
}

.section-features { padding-block: 48rem clamp(50rem, calc(150 / var(--container) * 100vw), 150rem);
	.list { display: grid; gap: 32rem clamp(8rem, calc(20 / var(--container) * 100vw), 20rem); margin-top: 37rem; text-align: center; text-wrap: balance;
		@media (width >= 768px) { grid-template-columns: repeat(4, 1fr); }
		@media (width < 768px) { grid-template-columns: repeat(2, 1fr); }
	}
	.visual { display: block; width: 100%; aspect-ratio: 1; background: #e5e5e5 no-repeat 50% / cover;
		&.visual--1 { background-image: url("/assets/images/home/features-1.webp"); }
		&.visual--2 { background-image: url("/assets/images/home/features-2.webp"); }
		&.visual--3 { background-image: url("/assets/images/home/features-3.webp"); }
		&.visual--4 { background-image: url("/assets/images/home/features-4.webp"); }
	}
	.title { margin-block: 0.95em 0.45em; font: 700 var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.025em; color: #222; }
	.desc { font: var(--font-size-16) / 1.5 var(--font-sans); letter-spacing: -0.025em; color: #777;
		@media (width < 1280px) {
			br { display: none; }
		}
	}
}

.section-instructor { padding-block: 45.5rem 48rem;
	.swiper { margin-top: 32rem; }
	.link { display: grid; }
	.thumbnail { display: block; grid-area: 1 / 1 / 2 / 2; aspect-ratio: 340 / 412; }
	.info { display: grid; grid-template: "role arrow" "name arrow"; grid-area: 1 / 1 / 2 / 2; place-self: end start; gap: 2rem 10rem; width: 80.8%; padding: 19rem 20rem 22rem 29rem; background: var(--black); }
	.info { display: grid; grid-template: "role arrow" "name arrow"; grid-area: 1 / 1 / 2 / 2; place-self: end start; gap: 2rem; width: 80.8%; padding: 5.29022777% 5.87803086% 6.46583395% 8.52314475%; background: var(--black); }
	.role { grid-area: role; font: 700 var(--font-size-14) var(--font-sans); color: #ffffff80; text-transform: capitalize; }
	.name { grid-area: name; font: 700 var(--font-size-18) var(--font-sans); color: #fff; }
	.arrow { display: block; grid-area: arrow; place-self: center end; width: 1.11111111em; aspect-ratio: 1; font-size: var(--font-size-18); background: url("/assets/images/home/instructor-arrow.svg") no-repeat 50% / contain; translate: 0 10%; }
	@media (prefers-reduced-motion: no-preference) {
		.info, .arrow { transition: 0.3s; }
	}
	@media (any-hover) {
		.info { backdrop-filter: blur(5px); }
		.link:not(:hover) .info { background: rgb(from var(--black) r g b / 0.2); }
		.link:not(:hover) .arrow { opacity: 0.5; }
	}
}

.section-cooperation { padding-block: 48rem clamp(50rem, calc(150 / var(--container) * 100vw), 150rem);
	.section-heading { margin-bottom: 34rem; }
	.sub-section { display: grid; grid-template: "heading heading heading" "prev swiper next" / auto 1fr auto; gap: 19rem 20rem; }
	.sub-section + .sub-section { margin-top: 28rem; }
	.sub-heading { grid-area: heading; font: 700 var(--font-size-20) var(--font-sans); letter-spacing: -0.01em; color: rgb(from var(--black) r g b / 0.5); }
	.section-action--prev { grid-area: prev; align-self: center; translate: 0 -8%; }
	.section-action--next { grid-area: next; align-self: center; translate: 0 -8%; }
	.swiper { grid-area: swiper; width: 100%; min-width: 0; overflow: clip; overflow-clip-margin: 1px; }
	.logo { display: block; width: 100%; height: auto; border: 1px solid #e0e0e0; }
}