@charset "utf-8";
:root {
    --text-body: #817E7A;
    --text-dark: #4A4948;
    --text-darkest: #1C1B1B;
    --text-light: #C2BEB8;
    --text-lighter: #DEDDCF;
    --text-highlight: #D03042;
    --text-esg: #176446;
	--primary-font: 'Pretendard';
	--static-01: 0.1px;
	--static--01: -0.1px;
	--static-05: 0.5px;
	--static--05: -0.5px;
	--static-10: 1px;
	--static--10: -1px;
	--static-15: 1.5px;
	--static--15: 1.5px;
	--static-20: 2px;
	--static--20: 2px;
	--text-indent: -99999999999px;
}

@keyframes ImgMotion_clipRevealDown {
    0% {
        -webkit-clip-path: polygon(0 0,100% 0,100% 0,0 0);
        clip-path: polygon(0 0,100% 0,100% 0,0 0);
    }

    to {
        -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
        clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    }
}

* { box-sizing: border-box; padding: 0; margin: 0; list-style: none; }
*::before,
*::after { box-sizing: border-box; }
html.show-layer { overflow: hidden; }
body { line-height: 1; }
a { color: #000; text-decoration: none; }
hr { margin: 0; border: 0; }
/* img { pointer-events: none; } */
input { outline: none; font-family: var(--primary-font); background: #fff; }
select { border: 0; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: var(--primary-font); background: #fff; cursor: pointer; }
textarea {outline: none;  font-family: var(--primary-font); background: #fff; }
button { background: none; margin: 0; padding: 0; border: 0; }
pre { font-family: var(--primary-font); }
html, body { font-family: var(--primary-font); color: #000; }
picture { display: block; }
picture > img { width: 100%; }

.w-100 { width: 100% !important; }
.d-flex { display: flex !important; }
.flex-center { justify-content: center !important; align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-ac { align-items: center !important; }
.flex-as { align-items: flex-start !important; }
.flex-ae { align-items: flex-end !important; }
.flex-js { justify-content: flex-start !important; }
.flex-je { justify-content: flex-end !important; }
.flex-jc { justify-content: center !important; }
.flex-jsb { justify-content: space-between !important; }
.flex-col { flex-direction: column !important; }
.flex-0-0-auto { flex: 0 0 auto !important; }
.flex-1-1-auto { flex: 1 1 auto !important; }
.flex-0-1-auto { flex: 0 1 auto !important; }
.flex-1-0-auto { flex: 1 0 auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.ellipsis-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
.ellipsis-2 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.ellipsis-3 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.ellipsis-4 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.ellipsis-5 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.ellipsis-6 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 6; -webkit-box-orient: vertical; text-overflow: ellipsis; }

.pre { white-space: pre; }
.pre-wrap { white-space: pre-wrap; }
.keep-all { word-break: keep-all; }
.menu-bg { display: none; position: fixed; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.2); z-index: 98; backdrop-filter: blur(12px); }
.highlight { color: var(--text-highlight) !important; }

.img-fit-cover > video,
.img-fit-cover > picture > img,
.img-fit-cover > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/*
.img-animate { overflow: hidden; position: relative; }
.img-animate::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; transition: height 1.2s cubic-bezier(.165,.84,.44,1) 0.4s; }
.img-animate > picture > img,
.img-animate > img { transform: scale(1.5); transition: transform 1.5s cubic-bezier(.165,.84,.44,1) 0.4s; }
.aos-animate .img-animate::after { height: 0; }
.aos-animate .img-animate > picture > img,
.aos-animate .img-animate > img { transform: scale(1); }
*/
.img-animate-2 { overflow: hidden; }
.img-animate-2 > picture > img,
.img-animate-2 > img { transform: scale(2); transition: transform 1.5s cubic-bezier(.165,.84,.44,1); -webkit-clip-path: polygon(0 0,100% 0,100% 0,0 0); clip-path: polygon(0 0,100% 0,100% 0,0 0); }
.aos-animate .img-animate-2 > picture > img,
.aos-animate .img-animate-2 > img {
	transform: scale(1);
	animation-name: ImgMotion_clipRevealDown;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
	animation-direction: normal;
	animation-fill-mode: forwards;
}


.title-load { overflow: hidden; }
.title-load > span { display: block; transform: translateY(100%); transition: transform .6s cubic-bezier(.165,.84,.44,1) 0.2s; }
.title-load.aos-animate > span { transform: translateY(0); }

#map .marker { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='23' fill='black' stroke='%23D03042' stroke-width='2'/%3E%3Ccircle cx='24' cy='24' r='10' fill='%23D03042'/%3E%3C/svg%3E") center/cover no-repeat; }

/*스크롤*/
.scroll { overflow: overlay; }
.scroll::-webkit-scrollbar { width: 15px; }
.scroll::-webkit-scrollbar-track { background-color: #f7f8fb; border-left: 1px solid #dbe0ed; border-right: 1px solid #dbe0ed; border-bottom: 1px solid #dbe0ed; }
.scroll::-webkit-scrollbar-thumb { border: 4px solid transparent; background-color: #aab7ce; border-radius: 10px; background-clip: content-box; }

.scroll2 { overflow: overlay; }
.scroll2::-webkit-scrollbar { width: 2px; }
.scroll2::-webkit-scrollbar-track { background-color: #e2e2e2; border-left: 0px solid #dbe0ed; border-right: 0px solid #dbe0ed; border-bottom: 0px solid #dbe0ed; }
.scroll2::-webkit-scrollbar-thumb { border: 0px solid transparent; background-color: #686868; border-radius: 0px; background-clip: content-box; }

.scroll3 { overflow: overlay; }
.scroll3::-webkit-scrollbar { width: 2px; }
.scroll3::-webkit-scrollbar-track { background-color: #e2e2e2; border-left: 0px solid #dbe0ed; border-right: 0px solid #dbe0ed; border-bottom: 0px solid #dbe0ed; }
.scroll3::-webkit-scrollbar-thumb { border: 0px solid transparent; background-color: #686868; border-radius: 0px; background-clip: content-box; }

[data-bus-line='지선'] { color: #108036; }
[data-bus-line='직행'] { color: #D03042; }
[data-bus-line='마을'] { color: #03C75A; }
[data-bus-line='간선'] { color: #005BED; }
[data-bus-line='공항'] { color: #000; }

[data-pseudo-color="D03042"]::before { background-color: #D03042; }
[data-pseudo-color="4A1420"]::before { background-color: #4A1420; }
[data-pseudo-color="7E4124"]::before { background-color: #7E4124; }
[data-pseudo-color="DD9F26"]::before { background-color: #DD9F26; }
[data-pseudo-color="FFCD1A"]::before { background-color: #FFCD1A; }
[data-pseudo-color="FF6C5A"]::before { background-color: #FF6C5A; }
[data-pseudo-color="7EAADB"]::before { background-color: #7EAADB; }
[data-pseudo-color="134095"]::before { background-color: #134095; }
[data-pseudo-color="081E4F"]::before { background-color: #081E4F; }
[data-pseudo-color="9C9E9D"]::before { background-color: #9C9E9D; }


.scroll-element {
	opacity: 0;
	transform: translateY(50px);
/* 	overflow: hidden; */
}
.scroll-element.visible {
	opacity: 1;
	transform: translateY(0);
}

.scroll-element:not(.no-animate):has(> picture),
.scroll-element:not(.no-animate):has(> img) {
	opacity: 1;
	transform: translateY(0);
}

.scroll-element .img-animate > img,
.scroll-element:not(.no-animate) > picture > img,
.scroll-element:not(.no-animate) > img {
	transform: scale(2);
	transition: transform 1.5s cubic-bezier(.165,.84,.44,1);
	-webkit-clip-path: polygon(0 0,100% 0,100% 0,0 0);
	clip-path: polygon(0 0,100% 0,100% 0,0 0);
}

.scroll-element.animated .img-animate > img,
.scroll-element.animated:not(.no-animate) > picture > img,
.scroll-element.animated:not(.no-animate) > img {
	transform: scale(1);
	animation-name: ImgMotion_clipRevealDown;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
	animation-direction: normal;
	animation-fill-mode: forwards;
}

.scroll-element.animated .img-animate > img{
	animation-delay: 0.2s;
}

/* 텍스트 마스킹 효과를 위한 CSS */
.scroll-mask-text {
  overflow: hidden;
}

.scroll-mask-text .text-inner {
  transform: translateY(100%);
}

.scroll-mask-text.animated .text-inner {
  transform: translateY(0);
  transition: transform 0.8s ease-out; /* JavaScript의 duration과 일치시킵니다. */
}

/* 스크롤 리빌(Reveal) 효과를 위한 CSS */
.scroll-reveal {
  opacity: 0;
}

.scroll-reveal.active {
  opacity: 1;
  transition: opacity 0.8s ease-out; /* JavaScript의 duration과 일치시킵니다. */
}