@charset "utf-8";


/* Pretendard Font Family 정의 */
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Token variables : 디자인 토큰 */
	/* 색상 토큰 */
	--black: #000;
	--black-rgb: 0,0,0;
	--white: #fff;
	--white-rgb: 255,255,255;	
	
	--blue-500: #0d6efd;
	--blue-500-rgb: 13,110,253;
	--red-500: #D93B30;
	--red-500-rgb: 217,59,48;
	--green-500: #4B830D;
	--green-500-rgb: 75,131,13;
	--yellow-100: #FFFBF1;
	--yellow-100-rgb: 255, 251, 241;
	--yellow-200: #FBF1D4;
	--yellow-200-rgb: 251, 241, 212;
	--yellow-500: #FFB546;
	--yellow-500-rgb: 255,181,70;
	--violet-50: #F7F6FF; /*연보라색*/
	--violet-50-rgb: 247,246,255;
	--violet-500: #5A4FCF; /* f */ 
	--violet-500-rgb: 90,79,207;
	
	/* grayScale */
	--gray-100: #F8F8F8; /* f */ 
	--gray-100-rgb: 248,248,248;
	--gray-200: #e9ecef;
	--gray-200-rgb: 233,236,239;
	--gray-300: #d9d9d9; /* f */ 
	--gray-300-rgb: 217,217,217;
	--gray-400: #c3c3c5; /* f */ 
	--gray-400-rgb: 195,195,197;
	--gray-500: #adb5bd;
	--gray-500-rgb: 173,181,189;
	--gray-600: #666666; /* f */ 
	--gray-600-rgb: 102,102,102;
	--gray-700: #4B506A;
	--gray-700-rgb: 75,80,106;
	--gray-800: #333333; /* f */ 
	--gray-800-rgb: 51,51,51;
	--gray-900: #222222; /* f */ 
	--gray-900-rgb: 34,34,34;
	
	
	/* 폰트 토큰 */ 
	--font-base: 'Pretendard', 'Apple SD Gothic Neo', 'Segoe UI', system-ui, -apple-system, sans-serif;

	/* Semantic variables : UI */
	--color-primary: var(--violet-500);
	--color-primary-rgb: var(--violet-500-rgb);
	--color-secondary: var(--gray-700);
	--color-secondary-rgb: var(--gray-700-rgb);

	/* background */
	--bg-base: var(--white);
	--bg-base-rgb: var(--white-rgb);
	--bg-tint: var(--violet-50); /*연보라색*/
	--bg-tint-rgb: var(--violet-50-rgb);
	--bg-alt: var(--gray-100);
	--bg-alt-rgb: var(--gray-100-rgb);
	--bg-yellow: var(--yellow-100); /*연노란색*/
	--bg-yellow-rgb: var(--yellow-100-rgb);

	/* font */
	--text-base: var(--gray-800);
	--text-base-rgb: var(--gray-800-rgb);
	--text-light: var(--gray-600);
	--text-light-rgb: var(--gray-600-rgb);
	--text-inverse: var(--white);
	--text-inverse-rgb: var(--white-rgb);

	/* border --border- */
	/* shadow --shadow- */
	--shadow-base: 0 0.5rem 1rem rgba(var(--black-rgb), 0.15);

/* 효과 */
	/* radius --border-radius- */
	--border-radius-sm: 4px;
	--border-radius-lg: 12px;	

/* 컴포넌트 */
	/* body  */	
	--body-font-family: var(--font-base);
	--body-font-size: 0.7500rem;
	--body-font-weight: 400;
	--body-line-height: 1.5;
	--body-font-color: var(--text-base);
	--body-font-color-rgb: var(--text-base-rgb);
}
/* reboot ------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
*, *::before, *::after {
	box-sizing: border-box;
}
:focus {
	outline-width:medium;
}
a {
	text-decoration: none;
	color: inherit;
}
img, svg {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}
button, input, optgroup, select, textarea {
	margin: 0;
	font: inherit;
	color: inherit;
}
button {
	text-transform: none;
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* common ------------------------------------------------------- */
body {
	margin: 0;
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	color: var(--body-font-color);
	background-color: var(--color-bg);
	-webkit-text-size-adjust: 100%;
}
body.no-scroll {
  overflow: hidden;
}
img {
	display: block;
}
/* hidden */
.hidden, .hide {
	display: none!important;
}
.visually-hidden {
	position: absolute!important;
	width: 0!important;
	height: 0!important;
	padding: 0!important;
	margin: -1px!important;
	overflow: hidden!important;
	clip: rect(0, 0, 0, 0)!important;
	white-space: nowrap!important;
	border: 0!important;
	color: transparent!important;
	font-size: 0!important;
	opacity: 0!important;
}
/* pc, mo change 용 */
.pc-only {
	display: block;
}
.mo-only {
	display: none;
}
/* padding */
.p-0 {
	padding: 0 !important;
}
.px-0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* background */
.bg-tint {
	background-color: var(--bg-tint);
}
.bg-alt {
	background-color: var(--bg-alt);
}
.bg-yellow {
	background-color: var(--bg-yellow);
}
.bg-grad-wy {
	background: -webkit-linear-gradient(top, var(--white), var(--yellow-200));
	background: -moz-linear-gradient(top, var(--white), var(--yellow-200));
	background: linear-gradient(to bottom, var(--white), var(--yellow-200));
}
.bg-grad-yy {
	background: -webkit-linear-gradient(top, var(--yellow-200), var(--yellow-100));
	background: -moz-linear-gradient(top, var(--yellow-200), var(--yellow-100));
	background: linear-gradient(to bottom, var(--yellow-200), var(--yellow-100));
}
.bg-grad-yg {
	background: -webkit-linear-gradient(top, var(--yellow-100), var(--gray-100));
	background: -moz-linear-gradient(top, var(--yellow-100), var(--gray-100));
	background: linear-gradient(to bottom, var(--yellow-100), var(--gray-100));
}
.bg-grad-gy {
	background: -webkit-linear-gradient(top, var(--gray-100), var(--yellow-100));
	background: -moz-linear-gradient(top, var(--gray-100), var(--yellow-100));
	background: linear-gradient(to bottom, var(--gray-100), var(--yellow-100));
}

/* row: 열 */
.row { 
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: 16px;
}
/* col: row 안 아이템 균등비율 필요 시*/
.col { 
	flex: 1;
}
.row-reverse {
	flex-direction: row-reverse;
}

/* 세로정렬 flex */
.column { 
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 36px;
}
.column-start {
	align-items: flex-start;
	text-align: left;
}
.column-end {
	align-items: flex-end;
	text-align: right;
}
/* .section-block 공통 */
.section-block {
	width: 100%;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px 54px;
}
.section__title {
	font-size: 2.1875rem; /* f */
	font-size: clamp(1rem, 3.5vw, 2rem); /* f */
	font-weight: 700;
	color: var(--text-base);
}
.section__title--lg {
	font-size: 2.1875rem; /* f */
	font-size: clamp(1rem, 3.5vw, 2rem); /* f */
}
.section__text {
	font-size: 1.1250rem; /* f */
	font-size: clamp(0.7500rem, 1.5vw, 1.1250rem); /* f */
	font-weight: 500;
	color: var(--text-base);
}
.section__text--lg {
	font-size: 1.1250rem; /* f */
	font-size: clamp(0.7500rem, 1.5vw, 1.1250rem); /* f */
	font-weight: 600;
}
.text--primary {
	color: var(--color-primary);
}
.text--gray {
	color: var(--text-light);
}
.text-wrap.column {
	gap: 16px;
}

/* tag */
.tag {
	display: inline-block;
	text-align: center;
	border-radius: 0.5rem;
	background-color: var(--color-primary);
	padding: 0.5rem 1rem;
}
.tag__text {
	display: inline-block;
	font-size: 1.2500rem; /* f */
	font-size: clamp(0.9375rem, 1.5vw, 1.2500rem); /* f */
	font-weight: 600;
	color: var(--text-inverse);
}
.tag--ghost {
	background-color: transparent;
}
.tag--ghost .tag__text {
	color: var(--color-primary);
}

/* button */
.btn {
	min-width: 320px;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	color: var(--text-inverse);
	background-color: #514EA0;
	border-radius: 0.5rem;
	padding: 1rem 2rem;
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
	/* row, column 정렬 변경 */
	.row {
		flex-direction: column;
		align-items: center;
		text-align: center;
}
	.column {
		gap: 16px;
	}
	.column-end, .column-start {
		align-items: center;
		text-align: center;
}
	.section-block {
		padding: 42px 26px;
	}
	/* section 텍스트 크기 */
	.section__title {
		font-size: 20px;
}
	.section__title--lg {
		font-size: 20px;
	}  
	.section__text {
		font-size: 12px;
	}
	.section__text--lg {
		font-size: 20px;
	}
	.bg-tint .section__title {
		font-size: 14px;
	}
	.text-wrap.column {
		gap: 8px;
}

	/* tag 텍스트 크기*/
	.tag {
		padding: 0.5rem 1rem;
}
	.tag__text {
		font-size: 12px;
}
}

/* swiper */
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	position: relative;
	text-align: center;
	font-size: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 23.1250rem;
	object-fit: cover;
	/* margin: auto 8rem; */
}
.swiper-slide .text-wrap {
	position: absolute;
	left: 25%;
	transform: translateX(-15%);
	gap: 0.5rem;
}
.swiper-slide .text-wrap > * {
	color: var(--white);
}
.swiper-slide .section__title {
	font-size: 1rem; /* f */
	font-size: clamp(0.675rem, 3vw, 1.8rem); /* f */
	font-weight: 600;
}
.swiper-slide .nav-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem; /* f */
	font-size: clamp(0.45rem, 3vw, 1rem); /* f */
	font-weight: 400;
}
.swiper-slide .nav-link:hover {
	color: var(--white);
}
.swiper-slide .nav-link::after {
	display: inline-block;
	content: "";
	width: 1rem;
	height: 1rem;
	background-image: url(../images/icon-link.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}
.swiper-button-next,.swiper-button-prev {
	--swiper-navigation-size: 1.75vw;
	--swiper-theme-color: var(--white);
	top: var(--swiper-navigation-top-offset,50%);
	width: calc(var(--swiper-navigation-size)/ 44 * 80);
}
.swiper-pagination-bullet {
	--swiper-pagination-color: var(--white);
	--swiper-pagination-bullet-inactive-color: var(--white);
}
/* layout ------------------------------------------------------- */
/* 헤더 */
.ic-btn {
	padding: 1em;
}
.header {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5rem;
	margin: auto;
	/* position: sticky; */
	/* top: 0; */
	z-index: 1020;
}
.header__inner {
	width: 100%;
	max-width: 87.5000rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 1em;
	row-gap: 1em;
	padding: 0 1.1250rem;
}
.navbar-toggler {
	display: none;
}
.header__content {
	display: flex;
	align-items: center;
	margin-left: auto;
}
.brand-img {
	width: 5.6250rem;
}
.offcanvas-body {
	width: 100%;
	display: flex;
	align-items: center;
}
.navbar-nav {
	display: flex;
	align-items: center;
	column-gap: 5.8333em;
}
.nav-item {
	flex: 1 auto;
	display: flex;
	flex-direction: column;
}
.nav-link {
	flex: 1 auto;
	width: 100%;
	display: flex;
	align-items: center;
	cursor: pointer;
	
	font-size: 1.2500rem;
	font-weight: 600;
	color: var(--gray-400);	
	padding: 0.3750rem 0;
}
.nav-link:hover {
	color: var(--gray-800);
	font-weight: 600;
}


/* dropdown */
.dropdown {
	position: relative;
}
.dropdown-menu {
	display: none;
	min-width: 16.3333em;
	position: absolute;
	top: 100%;
	left: 0;
	border: 1px solid var(--gray-300);
	background-color: var(--white);
	padding: 1rem 1.1250rem;
	border-radius: 0.3750rem;
	/* white-space: nowrap; */
	box-shadow: var(--shadow-base);

	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease;
}
.dropdown-menu .nav-link {
	font-size: 0.8750rem;
	font-weight: 500;
	color: var(--gray-800);
}
.dropdown-menu .nav-link:hover {
	font-weight: 600;
}

/* PC hover & JS toggle 공통 */
.dropdown-menu.is-open {
	display: flex;
	flex-direction: column;
	row-gap: 0.500rem;
}

/* dropdown-menu : Mobile toggle*/
.dropdown-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) { 
	.header {
		min-height: 3.3125rem;
	}
	.header__inner {
		padding: 0 0.5625rem 0 1.2500rem;
	}
	.brand-img {
		width: 4.5000rem;
	}
	.navbar-toggler {
		display: block;
		width: 2.7500rem;
	}
	.navbar-nav {
		width: 100%;
		flex-direction: column;
	}
	.offcanvas {
		visibility: hidden;
		width: 100%;
		max-width: 100%;
		/* height: 100%; */
		position: fixed;
		top: 3.3125rem;
		right: 0;
		bottom: 0;
		transform: translateX(100%);
		
		background-color: var(--white);
		border-top: 1px solid rgba(var(--black-rgb), 1);
		padding: 0 1.0000rem;
		display: flex;
		flex-direction: column;		
		transition: transform .2s ease-in-out;	
	}
	.offcanvas.is-show {
		visibility: visible;
		transform: none;
		overflow: auto;
	}
	.navbar-nav > .nav-item {
		width: 100%;
		border-top: 1px solid rgba(var(--black-rgb), 0.15);
	}
	.navbar-nav > .nav-item:first-child {
		border-top: 0 solid rgba(var(--black-rgb), 0.15);
	}
	
	.navbar-nav > .nav-item > .nav-link {
		color: var(--gray-800);
		padding: 1.5rem 0;
	}
	.dropdown-menu {
		position: static;
		min-width: unset;
		border: none;
		background-color: var(--gray-100);
		padding: 1.3750rem 0.6875rem;
		box-shadow: none ;
		margin: 0 1rem 1rem;
	}
	.dropdown-menu .nav-link {
		font-size: 1.0625rem;
		font-weight: 500;
		color: var(--gray-800);
	}
	.navbar-nav > .dropdown > .nav-link:after {
		display: inline-block;
		width: 0.5em;
		height: 0.5em;
		content: " ";
		border-style: solid;
		border-width: 0.1em 0.1em 0 0;
		margin-top: -0.25rem;
		margin-left: auto;
		margin-right: 0.6250rem;
		transform: rotate(135deg);
		transition: transform 0.25s;
	}
	.navbar-nav > .dropdown > .nav-link.is-active:after {
		transform: rotate(-45deg); 
	}
	.swiper-slide img {
		min-height: 18rem;
	}
	.swiper-slide .section__title {
		font-size: 1.5rem; /* f */
	}
	.swiper-slide .nav-link {
		font-size: 1rem; /* f */
	}
	.swiper-slide .column-start {
		align-items: center;
		text-align: left;
	}
	.swiper-button-next,.swiper-button-prev {
		--swiper-navigation-size: 1.5em;
		--swiper-theme-color: var(--white);
		width: calc(var(--swiper-navigation-size)/ 22 * 30);
	}
	
}
/* Footer */
.footer {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--gray-100);
	color: var(--gray-600);
	font-weight: 400;
	border-top: 1px solid var(--gray-300);
	padding: 2.75rem 3.5rem;
}
.footer__inner {
	width: 100%;
	max-width: 87.5000rem;
	padding: 0 1vw;
}
.footer__content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.75rem;
}
.footer__company {
	font-size: 1rem; /* f */
	font-size: clamp(0.875rem, 1vw, 1rem); /* f */
	font-weight: 700;
}
.footer__addr {
	font-size: 0.9375rem; /* f */
	font-size: clamp(0.875rem, 1vw, 0.9375rem); /* f */
}
.footer__addr b { 
	font-weight: 600; 
}
.footer__line {
	display: block; 
}
.footer__copy {
	font-size: 0.75rem;
}

/* 작은 화면 대응 */
@media (max-width: 480px) {
  .site-footer { padding: 22px 0 32px; }
  .site-footer__company { font-size: 18px; }
  .site-footer__addr { font-size: 16px; line-height: 1.65; }
  .site-footer__copy { font-size: 14px; }
}




/* page ------------------------------------------------------- */
/* page : index */
/* index 내 slide를 제외한 제일 첫 section */
.intro-section .section-block { 
	padding-bottom: 0;
}
.intro-section .logo {
	width: 400px;
}
.intro-section .section-block > .section-block {
	background: -webkit-linear-gradient(top, var(--white), var(--yellow-200));
	background: -moz-linear-gradient(top, var(--white), var(--yellow-200));
	background: linear-gradient(to bottom, var(--white), var(--yellow-200));
}
/* page : culture, about */
.bg-img {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 460px;
	/* max-height: 480px; */
	background-size: cover;
	background-position: center, center;
	background-repeat: no-repeat;
}
.bg-img.about {
	background-image: url(../images/about_background.png);
}
.bg-img.culture {
	background-image: url(../images/culture_background.png);
}
.bg-img .section__text,
.bg-img .section__title {
	color: var(--text-inverse);
}
/* page : about */
/* history : 연혁 */
.history-year {
	font-size: 32px;
	font-weight: 700;
	}
.history-list {
	font-size: 26px;
	font-weight: 500;
	}  
.history-list .month {
	font-weight: 700;
	margin-right: 14px;
}
/* 양 옆 가려지는 이미지 */
.image-wrap--overflow {
	position: relative;
	width: 100%;
	overflow: hidden;
	}
.image-wrap--overflow::before,
.image-wrap--overflow::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100px;       /* 그라데이션의 폭 조정 가능 */
	pointer-events: none;
	z-index: 1;
	}
.image-wrap--overflow::before {
	left: 0;
	background: linear-gradient(to right, var(--white), transparent);
}
.image-wrap--overflow::after {
	right: 0;
	background: linear-gradient(to left, var(--white), transparent);
	}
.image-wrap--overflow img {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	min-width: 100%;
	max-width: none;
	height: auto;
	}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
	/* pc, mo change 용 */
	.pc-only {
		display: none;
	}
	.mo-only {
		display: block;
	}
	/* img bi 공통 */
	.img.bi {
		width: 188px;
	}
	/* page : index */
	/* index 내 slide를 제외한 제일 첫 section */
	.intro-section { 
		background: -webkit-linear-gradient(top, var(--white), var(--yellow-200));
		background: -moz-linear-gradient(top, var(--white), var(--yellow-200));
		background: linear-gradient(to bottom, var(--white), var(--yellow-200));
	}
	.intro-section .section-block > .section-block {
		background: unset;
}
	/* page : culture, about */
	.bg-img {
		height: 360px;
		min-height: 360px;
		max-height: 500px;
	}

	.bg-img .section__text--lg {
		font-size: 14px;
	}
	/* page : about */
	/* history : 연혁 */
	.history.column-start {
		align-items: start;
		text-align: left;
	}
	.history-year {
		font-size: 16px;
		font-weight: 700;
	}
	.history-list {
		font-size: 12px;
		font-weight: 500;
	}
	.history-list .month {
		font-weight: 700;
		margin-right: 14px;
	}
	/* map */
	.map {
		height: 360px;
	}
}


/* -- 중단점 : PC first ----------- */
/* X-Small devices mobile 480px and up */
@media (max-width: 480px) { }

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) { }

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) { }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { }