/* reset */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: #464646;
    word-break: keep-all;
}
  
*::before, *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
  

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    
    font-size: 10px;
}

:root {
    --fs12: 1.6em;
    --fs14: 1.6rem;
    --fs16: 1.8rem;
    --fs18: 2rem;
    --fs20: 2.2rem;
    --fs24: 2.4rem;
    --fs30: 3.4rem;
    --fs36: 3.6rem;
    --fs64: 6.4rem;
    --fs200: 15rem;
    --sz30: 3rem;
    --sz40: 4rem;
    --sz50: 5rem;
    --sz60: 6rem;
    --sz80: 8rem;

    --red: #E62E2E;
    --orange: #FF6633;
    --yellow: #FFCB33;
    --green: #29CC39;
    --blue: #33BFFF;
    --d-blue: #3361FF;
    --purple: #8833FF;
    --primary: #18352F;

    --red-bg: #E62E2E1A;
    --orange-bg: #FF66331A;
    --yellow-bg: #FFCB331A;
    --green-bg: #29CC391A;
    --blue-bg: #33BFFF1A;
    --d-blue-bg: #3361FF1A;
    --purple-bg: #8833FF1A;
}

/* @media screen and (max-width: 640px) {
    body, html {font-size: 6px;}
    :root {
        --fs200: 10rem;
    }
} */

.red {color: var(--red);}
.orange {color: var(--orange) !important;}
.yellow {color: var(--yellow);}
.green {color: var(--green);}
.blue {color: var(--blue);}
.d-blue {color: var(--d-blue);}
.purple {color: var(--purple);}
.primary {color: var(--primary);}

.color-circle .red {background: var(--red-bg);}
.color-circle .orange {background: var(--orange-bg);}
.color-circle .yellow {background: var(--yellow-bg);}
.color-circle .green {background: var(--green-bg);}
.color-circle .blue {background: var(--blue-bg);}
.color-circle .d-blue {background: var(--d-blue-bg);}
.color-circle .purple {background: var(--purple-bg);}




li {list-style: none;}
a {text-decoration: none; display: block;}
table {border-spacing: 0;}

#wrap {
    
    height: 100%;
    position: relative;
}
.container {
    background: #F7F8FA;
    display: flex;
    flex-direction: column;
    transition: transform 1s ease; /* 부드러운 이동을 위한 트랜지션 */
    position: relative;
}
header {
    height: 50px;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: all .3s;
}
header.scrolled {
    background-color: var(--primary); /* 스크롤 시 백그라운드 색상 변경 예시 */
    top: 0; /* 스크롤 시 헤더를 상단에 고정 예시 */
    padding: 14px 0;
    height: 78px;
}

section {
    width: 100%; /* 각 섹션이 화면 너비를 채우도록 */
    height: auto; /* 각 섹션이 화면 높이를 채우도록 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    padding-top: 12.5rem;
}
section#main {height: 100vh; position: relative;}
section#main:after {content: ""; height: 2px; width: 100%; display: block; background: #F7F8FA; position: absolute; bottom: 0;}

.inner {max-width: 1110px; margin: 0 auto; position: relative;}
@media screen and (max-width: 1110px) {
    .inner {max-width: 100%; padding: 0 10px;}
    section {width: 1110px;}
    header {width: 1110px;}
}
header .inner {display: flex; justify-content: space-between; align-items: center; height: 100%;}
header h1 a {display: flex; align-items: center;}
header .gnb {display: flex; gap: var(--sz60); height: 100%;}
header .gnb ul {display: flex; font-size: var(--fs16); gap: 20px}
header .gnb div {display: flex; gap: 10px;}
header .gnb a {height: 100%; display: flex; align-items: center; font-weight: 500; font-size: var(--fs16); color: #fff;}
header .gnb div > a { background-color: white; color: var(--primary); padding: 0 var(--sz40); border-radius: var(--sz80);}
header .gnb div > a:first-child {background: #F0B643; color: var(--primary);}

#main {background: var(--primary) url(/public/resource/images/introduce-bg.svg) center bottom no-repeat; background-size: contain; position: relative;}
#main .inner {display: flex; flex-direction: column; gap: var(--sz50);}
#main h1 {color: #F0B643; font-size: var(--fs64); text-align: center;}
#main p {font-size: var(--fs30); text-align: center; color: #fff;}
#main span {font-size: var(--fs24); text-align: center; font-weight: 500; color: #fff;}
#main .more {position: absolute; bottom: 10px; left: 0; right: 0; width: fit-content; height: var(--sz60); background: white; display: flex; justify-content: center; align-items: center; padding: 0 var(--sz40); font-size: var(--fs14); font-weight: 700; border-radius: var(--sz40); margin: 0 auto; box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.03);}

.badge {font-size: 20px; padding: 0 15px; width: fit-content; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 30px; font-weight: 600;}
.badge.green {background: rgba(41, 204, 57, 0.1); color: #29CC39;}
.badge.orange {background: rgba(255, 102, 51, 0.1); color: #FF6633;}
.badge.violet {background: rgba(51, 97, 255, 0.1); color: #3361FF;}
.badge.purple {background: rgba(136, 51, 255, 0.2); color: #8833FF;}
.badge.yellow {background: rgba(255, 203, 51, 0.1); color: #FFCB33;}
   


.title {position: relative; width: 100%;}
.title div.badge {position: absolute; left: 0; right: 0; margin: 0 auto; top: var(--sz30);}
.title h5 {position: absolute; font-size: var(--fs36); left: 0; right: 0; margin: 0 auto; text-align: center; top: 50%; transform: translateY(-50%); color: #4D5E80;}
.title h6 {font-size: var(--fs200); opacity: .03; text-align: center;}
.title + p {font-size: var(--fs18); text-align: center; color: #7D8FB3;}
.title.small h6 {font-size: 12rem; text-align: left;}
.title.small h5 {font-size: var(--fs24); text-align: left; padding-left: 4rem;}

#introduce .inner {display: flex; flex-direction: column; gap: var(--sz60);}
.introduce-box {background: white; box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.03); border-radius: 15px; padding: var(--sz80); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; position: relative; }
.introduce-box * {color: #4D5E80; font-weight: 500;}
.introduce-box h4 {position: absolute;}
.introduce-box h5 {font-size: var(--fs30);}
.introduce-box h6 {font-size: var(--fs16);}


.swiper {width: 100%; height: 100%;}


.swiper-pagination {top: 84px !important; bottom: unset !important;}
.swiper-pagination span {display: block; font-size: var(--fs36);}

.swiper-button-next, .swiper-button-prev {width: 70px !important; height: 56px !important; border-radius: 32px; background: var(--reading-primary); z-index: 11 !important; cursor: pointer;}
.swiper-button-next:after, .swiper-button-prev:after {display: none;}

#history .inner {width: 100%;}
#history .title {background: url(/public/resource/images/history-bg.png) no-repeat center; height: 400px; display: flex; justify-content: center; align-items: center;}
#history .title h6 {color: #fff; opacity: .2;}
#history .title h5 {color: #fff;}
#history .timeline {padding-top: 30px; position: relative;}
.timeline .center-line {position: absolute; z-index: 1; width: 1px; height: 100%; background: #000; left: 50%;}
.timeline ul {position: relative; z-index: 2;}
.timeline li {position: relative; width: 50%; left: 0; padding-top: 60px; display: flex; flex-direction: column; gap: 20px;}
.timeline h1 {color: #F0B643; font-size: 50px; position: relative;}
.timeline h1::after {content: ""; width: 10px; height: 10px; display: block; background: #F0B643; border-radius: 10px; position: absolute; right: -5px; top: 34px;}
.timeline h1::before {width: 70%; height: 2px; background: #F0B643; content: ""; display: block; position: absolute; top: 38px; right: 0;}
.timeline .long1::before {width: 43%;}
.timeline .long2::before {width: 23%;}
.timeline dl {display: flex; gap: 20px;}
.timeline dl dt {width: 82px; color: #F0B643; font-size: var(--fs18); font-weight: 600; width: 107px;}
.timeline dl dd {font-size: var(--fs18); font-weight: 500; color: #6B7A99; width: -webkit-fill-available;}
.timeline li:nth-child(even) {left: 50%;}
.timeline li:nth-child(even) h1 {padding-left: 120px;}
.timeline li:nth-child(even) dl {padding-left: 120px;}
.timeline li:nth-child(even) h1::after {left: -5px; right: unset;}
.timeline li:nth-child(even) h1::before {width: 16%; left: 0; right: unset;}





#system .system-box {display: flex; background: white; margin-top: var(--sz60); position: relative;}
#system .system-box .swiper-slide {display: flex; height: auto;}
#system .system-box .swiper-slide > img {flex-shrink: 0; width: 50%;}
#system .system-box .swiper-slide > div {flex-grow: 1; padding: 3%;}
.system-box-assets {position: absolute; z-index: 10; width: 50%; bottom: 0;}
.swiper-system-button-next {position: absolute; bottom: 4rem; right: 4rem; cursor: pointer; z-index: 9;}
.swiper-system-button-prev {position: absolute; bottom: 4rem; left: 4rem; cursor: pointer; z-index: 9;}
.swiper-system-pagination {position: absolute; bottom: 6.8rem !important; display: flex; justify-content: center; z-index: 8;}
.swiper-system-pagination .swiper-pagination-bullet {width: 6rem !important; height: .3rem; border-radius: 0; background-color: white;}
.system-box h2 {font-size: var(--fs20); padding-bottom: 4.5rem; color: #4D5E80; font-weight: 600;}
.system-box .swiper-slide > div > div {display: flex; flex-direction: column; gap: 1rem; padding-bottom: 2rem;}
.system-box h6 {font-size: var(--fs14); color: #ADB8CC; font-weight: 600;}
.system-box h3 {font-size: var(--fs16); color: #4D5E80; font-weight: 600;}
.system-box h4 {font-size: var(--fs14); color: #4D5E80; font-weight: 600;}
.system-many-box {display: flex; flex-wrap: wrap; gap: 2rem; padding-top: 1rem;}
.system-many-box > div {flex: 1 1 40%;}

.curri-box {position: relative;}
.curri-box-assets {position: relative;}
.curri-box-assets div {position: absolute; top: 0; }
.curri-box-assets .swiper-curri-button-next {right: 0;cursor: pointer; z-index: 10;}
.curri-box-assets .swiper-curri-button-prev {left: 0;cursor: pointer; z-index: 10;}
.curri-box-assets .swiper-curri-pagination {display: flex; position: relative; justify-content: center; gap: 6rem; font-size: var(--fs14); z-index: 9;}
.curri-box-assets .swiper-curri-pagination span {color: #7D8FB3;padding-bottom: 1.6rem; display: block;}
.swiper-curri-pagination span.swiper-pagination-current {color: var(--primary); font-weight: 600; border-bottom: 2px solid var(--primary); }

.curri-slide .swiper-wrapper {overflow: hidden !important;}
.curri-slide .curri-title {display: flex; justify-content: space-between; padding: 4rem 0;}
.curri-slide .curri-title h3 {font-size: var(--fs24);}
.curri-slide .curri-title button {background-color: var(--primary); color: #fff; font-size: var(--fs16); border: 0; height: 5rem; border-radius: 5rem; padding: 0 3rem; cursor: pointer;}
.curri-slide .curri-title.banner {flex-direction: column;}
.curri-slide .curri-title.banner span {display: block; background: var(--primary); color: var(--yellow); text-align: center; width: auto; padding: 10px 100px; margin: 30px auto 0; font-size: var(--fs18); font-weight: 600; border-radius: 6px;}
.curri-slide .curri-title.banner span u {color: #fff;}

.curri-slide h2 {text-align: center; padding-top: var(--sz60); font-size: var(--fs36);}
.curri-slide h4 {font-size: var(--fs16); color: var(--primary); padding-bottom: 2rem;}
.curri-slide table {width: 100%; margin-bottom: 4rem;}
.curri-slide table th {background-color: #EFEEEE; border-top: 1px solid var(--primary); border-bottom: 1px solid var(--primary); border-right: 1px solid var(--primary); font-size: var(--fs14); padding: .6rem;}
.curri-slide table th:last-child {border-right: 0;}
.curri-slide table td { border-bottom: 1px solid var(--primary); border-right: 1px solid var(--primary); font-size: var(--fs16); padding: .6rem; text-align: center;}
.curri-slide table td:last-child {border-right: 0;}
.curri-slide table td.border {border-right: 1px solid var(--primary); }
.curri-slide p {font-size: var(--fs12); padding-bottom: 2rem; margin-top: -2rem;}
.curri-slide .curri-two-table {display: flex; justify-content: space-between; gap: 2rem;}


.join-gallery {display: flex; gap: 3rem; flex-wrap: wrap;}
.join-gallery > div {background: white; border-radius: 1rem; display: flex; flex: 1 1 40%;}
.join-gallery > div > div {padding: 30px 20px; width: 65%}
.join-gallery > div > img {width: 35%; display: block;}
.join-gallery h4 {font-size: var(--fs18); padding-bottom: 4rem;}
.join-gallery p {color: #7D8FB3; font-size: var(--fs16); }
.join-gallery h5 {padding-top: 3rem; font-size: var(--fs16);  font-weight: 500}
.join-gallery h5.last {color: #7D8FB3; }

#review {margin: 12.5rem auto 0; position: relative;}
#review > div {position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; text-align: center; display: flex; flex-direction: column; gap: 4rem;}
#review div * {color: #fff;}
#review div div {display: flex; flex-direction: column; gap: 2rem;}
#review div h5 {font-size: 4rem;}
#review div h6 {font-size: 5rem; display: flex; align-items: center; gap: 2rem;}
#review div h6 img {padding-bottom: 6px;}
#review div a {display: block; background: #fff; color: var(--primary); width: fit-content; font-size: var(--fs16); margin: 0 auto; padding: 1.5rem 3.5rem; font-weight: 800; border-radius: 5rem;}

.join-faq {bordeR: 2px solid #EDEFF2; border-radius: 1.5rem; padding: 9.5rem;}
.join-box h2 {padding: 12.5rem 0 6rem; font-size: var(--fs36); color: #4D5E80; text-align: center;}
.join-faq ul {display: flex; gap: 1rem; flex-direction: column;}
.join-faq li {background: white; border-radius: .5rem; }
.join-faq li div.join-faq-h {padding: 1.5rem; display: flex; justify-content: space-between; align-items: center;}
.join-faq li div.join-faq-c {display: none; padding: 1.5rem; }
.join-faq li.active div.join-faq-c {display: block;color: #7D8FB3; font-size: var(--fs16);}
.join-faq li h3 {color: #7D8FB3; font-size: var(--fs16); font-weight: 500;}
.join-faq li.active img {transform: rotate(180deg);}


footer {border-top: 2px solid #EDEFF2;}
footer .inner {text-align: right; font-size: var(--fs14); padding: 6rem 0; color: #7D8FB3;}


.login_content .container {width: 480px; margin: 0 auto; }
.login_content .container .login {background: white; border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); padding: 40px; display: flex; gap: 12px; flex-direction: column; position: relative;}
.login_content .container .login a {position: absolute; right: 40px; }
.login img {width: 150px; margin: 0 auto; padding-bottom: 40px;}
.login h2 {font-size: 24px; padding-bottom: 24px; font-weight: 600; color: #333;}
.login div {font-size: 15px; display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px;}
.login div input {height: 44px; padding: 20px; border: 0; background: #F1F2F5; border-radius: 2px;}
.login button {margin-top: 20px; display: block; border: 0; background: #0A4A82; color: white; width: 100%; text-align: center; border-radius: 6px; height: 44px; font-size: 15px;}

/* ===== Gallery (사진첩) — 통합본 ===== */
#gallery { 
  background: #F7F8FA; 
  padding-bottom: var(--sz80);
}
#gallery .title.small { 
  margin-bottom: 2rem; 
}

/* 필터 컨트롤 */
.gallery-controls { 
  display: flex; 
  gap: .8rem; 
  margin: 2rem 0 3rem; 
  flex-wrap: wrap; 
}
.gallery-controls button {
  border: 1px solid #EDEFF2; 
  background: #fff; 
  padding: .8rem 1.6rem; 
  border-radius: 999px; 
  font-size: var(--fs14); 
  cursor: pointer;
}
.gallery-controls button.active, 
.gallery-controls button:focus {
  outline: none; 
  border-color: var(--primary);
  background: var(--primary); 
  color: #fff;
}

/* 기본(모바일) 2열 */
.gallery-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem; 
  width: 100%;
}
.gallery-item figure { 
  background: #fff; 
  border-radius: .8rem; 
  overflow: hidden; 
  box-shadow: 0px 2px 5px rgba(38,51,77,0.06); 
}
.gallery-item img { 
  width: 100%; 
  height: auto; 
  display: block; 
  aspect-ratio: 3 / 2; 
  object-fit: cover; 
}
.gallery-item figcaption { 
  padding: .8rem 1rem 1rem; 
  font-size: var(--fs14); 
  color: #4D5E80; 
}

/* 태블릿: 3열 */
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 큰 화면: 4열 */
@media (min-width: 1280px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Lightbox */
.lightbox-modal[hidden] { display: none !important; }
.lightbox-modal {
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,.9); 
  display: grid; 
  place-items: center;
  z-index: 9999; 
  padding: 2rem;
}
.lightbox-image { 
  max-width: 90vw; 
  max-height: 70vh; 
}
.lightbox-caption { 
  color: #fff; 
  margin-top: 1rem; 
  text-align: center; 
  font-size: var(--fs16); 
}
.lightbox-close, 
.lightbox-prev, 
.lightbox-next {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  border: 0; 
  background: transparent;
  color: #fff; 
  font-size: 3rem; 
  line-height: 1; 
  cursor: pointer; 
  padding: .5rem 1rem;
}
.lightbox-close { 
  top: 2rem; 
  right: 2rem; 
  transform: none; 
  font-size: 4rem; 
}
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

/* 아주 작은 화면 보완 */
@media (max-width: 640px) {
  .lightbox-image { max-width: 95vw; max-height: 60vh; }
}