/*     1488245 : 블록 설정      */
.block_option__1488245__ {display:table;width:100%}
.block_option__1488245__ p {display:table-cell;height:100px;margin:0;background:#fafafa;color:#c40000;text-align:center;vertical-align:middle}

@media (max-width:1023px){
	.row__1488245__ {}
}


@media (min-width:1024px){
	.row__1488245__ {    background-size: cover;  background-repeat: no-repeat;width:98%;   height: 450px;border-radius:10px}
}

/*     1488255 : BLANK 컨텐츠      */
.blank__1488255__ {box-sizing:border-box;display:block;position:relative;width:100%;height:450px}
.blank__1488255__.build_edit_mode {min-height:10px;border:1px dashed red;background:rgba(255,255,255,.1);}
.blank__1488255__.build_edit_mode:before {content:'Blank';display:block;position:absolute;top:50%;left:0;right:0;margin-top:-10px;padding:5px 0;font-size:13px;color:red;text-align:center;line-height:1}

@media all and (max-width:1023px){
	.blank__1488255__ {height:450px}
}

/*     1488265 : HTML 편집기      */
 .mission {
            text-align: center;
            padding: 130px 20px;
            background: white;
        }

        .mission h2 {
            font-size: 45px;
            margin-bottom: 20px;
            line-height: 1.5; color:#222;
        }

        .mission .highlight {
            color: #37926B;
        }

        .mission p {
            color: #444;
            line-height: 1.5;
            max-width: 1280px;
            margin: 0 auto; font-size:24px; letter-spacing:-0.035em;
        }
 @keyframes slide-up {
    0%{opacity : 0;}
    70%{opacity : 0; transform: translateY(40px);}
}

@keyframes opacity_ani {
    0%{opacity: 0;}
    70%{opacity: 0;}
}


@keyframes slide-up2 {
    0%{opacity : 0;}
    50%{opacity : 0; transform: translateY(60px);}
}




/*     1488295 : HTML 편집기      */
/* reset */
* {margin: 0;padding: 0;}
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, font, 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, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
div {
    background-size: cover;
    background-repeat: no-repeat;
}
li {list-style: none;}
address, em, i {font-style: normal;}
        body {
            font-family: 'IbmPlexSans', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            color: #333;background-size: cover;background-repeat: no-repeat;
        }
        .inner{
            width:1280px;
            margin:0 auto;
        }
.features .inner.motion p {
    animation-name: slide-up;
    animation-duration: 1s;
}

 @keyframes slide-up {
    0%{opacity : 0;}
    70%{opacity : 0; transform: translateY(40px);}
}

@keyframes opacity_ani {
    0%{opacity: 0;}
    70%{opacity: 0;}
}


@keyframes slide-up2 {
    0%{opacity : 0;}
    50%{opacity : 0; transform: translateY(60px);}
}

@keyframes dot{
    100%{opacity: 1; transform: scale(3.5); opacity: 0;}
}

.features .inner ul {width: 100%; margin: 10px auto 0; display: flex;}
.features .inner ul li {width: 33.3333%; font-size: 17px; font-weight: 100;color: #c5c5c5;text-align: center;}
.features .inner ul li h3 {font-size: 22px;font-weight: normal; color: #fff;}
.features .inner .line{width: 68%; margin: 30px auto 30px; position: relative;}
.features .inner .line span{display: block; width: 100%; height: 1px; background: rgba(255,255,255, 0.25);}
.features .inner .line li {width: 6px;height: 6px;border-radius: 50%; background: #fff; position: absolute;}
.features .inner .line li.a{left: 0; top: -2px;}
.features .inner .line li.b{left: 50%; top: -2px;}
.features .inner .line li.c{right: 0; top: -2px;}
.features .inner .line li:before {content: ''; width: 100%; height: 100%; border-radius: 50%;background: rgba(252,252,252,0.70); position: absolute; left: 50%; top: 50%; margin-top: -3px; margin-left: -3px; animation: dot 1.5s infinite;}
.features .inner.motion h2 {animation-name: slide-up; animation-duration: 0.8s;}
.features .inner.motion .line span {animation-name: opacity_ani; animation-duration: 0.8s}
.features .inner.motion .line li.a {animation-name: opacity_ani; animation-duration: 1.2s}
.features .inner.motion .line li.b {animation-name: opacity_ani; animation-duration: 1.6s}
.features .inner.motion .line li.c {animation-name: opacity_ani; animation-duration: 2s}
.features .inner.motion ul li {animation-name: slide-up2; animation-duration: 2.4s}
.features .inner.motion ul li:nth-child(2) {animation-duration: 2.8s}
.features .inner.motion ul li:nth-child(3) {animation-duration: 3.2s}

.features .inner .icon{width:100%; margin: 80px auto 0;}
.iconImg{
    width: 55px;
    height: 55px;
}
        .features {
            position: relative;
            height: 730px;
            width: 100%;
				max-width: 1280px;
             background-size: contain;
  				background-position: center center;
            padding: 130px 0px;
            display: flex;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
            box-sizing: border-box;margin:0 auto;
        }

          .feature-card {
            text-align: center;
            color: white;
            max-width: 300px;
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
 .features .inner .icon ul {
margin-top:80px;}
 .feature-card h3 {
            font-size: 20px;
            margin-bottom: 15px;
        }

        .feature-card p {
            font-size: 14px; font-family:'Pretendard' !important; letter-spacing:-0.035em
            line-height: 1.8;
            color: rgba(255,255,255,0.9);
        }

  
    

/* 상단 제목을 섹션 맨 위에 고정 */
.features .inner { 
  position: relative;          /* .top의 기준점 */
  padding-top: 150px;          /* .top이 겹치지 않도록 전체 위쪽 여백 확보 */
}

.features .top{
  position: absolute;
  top: 24px;                   /* 상단에서 떨어뜨릴 거리 (원하면 16~40px로 미세조정) */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 980px;            /* 중앙 정렬 및 가독성 폭 */
  text-align: center;
  color: #fff;
  z-index: 2;                  /* 배경/아이콘 위로 */
}

.features .top h2{
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 20px;   /* 배경 위 가독성 향상 */
}

.features .top p{
  font-size: 18px; 
  line-height: 1.5;
  opacity: .95;

}

/* 아이콘/설명 블록 간격 조정 (겹침 방지) */
.features .inner .icon{
  width: 100%;
  margin: 20px auto 0;         /* 기존 80px → 20px로 낮춤 (위에 padding-top으로 공간 확보했기 때문) */
}

/* 반응형 보정 */
@media (max-width: 768px){
  .features .inner{ padding-top: 120px; }
  .features .top h2{ font-size: 28px; }
  .features .top p{ font-size: 13px; }
}


/*     1488305 : 블록 설정      */
.block_option__1488305__ {display:table;width:100%}
.block_option__1488305__ p {display:table-cell;height:100px;margin:0;background:#fafafa;color:#c40000;text-align:center;vertical-align:middle}

@media (max-width:1023px){
	.row__1488305__ {}
}


@media (min-width:1024px){
	.row__1488305__ {    background-size: cover;  background-repeat: no-repeat;}
}

/*     1488315 : HTML 편집기      */
/* ========== Reset & Base ========== */
* { margin:0; padding:0; box-sizing:border-box; }
ul, li { list-style:none; }
img { vertical-align:middle; border:0; }
a { color:inherit; text-decoration:none; }
html, body { height:100%; }
body {
  font-family:'Pretendard','IbmPlexSans',-apple-system,BlinkMacSystemFont,sans-serif;
  color:#222;
}

/* ========== Scroll Section Shell ========== */
.scroll-wrap { position:relative; min-height:81vh; }
.imgVisual { position:relative; top:0; height:100%; overflow:visible; }
.visual_sect {
  position:absolute; inset:0;
  background:url('../../img/whitebg.png') center/cover no-repeat;
  transform-origin:center center; will-change:transform;
}
.visual_sect .content { width:100%; height:100%; }

/* ========== Title ========== */
.contentsBox { width:1280px; margin:130px auto 0; }
.titleBox { margin-bottom:80px; }
.titleBox .title h2 {
  font-size:48px; font-weight:800; letter-spacing:-0.035em;
  text-align:left; font-family:'Pretendard', sans-serif;
}
.Hightlight2 { color:#37926B; }

/* 본문 설명문 */
.titleBox p {
  font-family:'Pretendard', sans-serif;
  font-size:20px;
  line-height:1.5;
  color:#444;
  margin-top:16px;
}

/* 구분선 + 라이트 스윕 */
.line3 {
  position:relative; width:100%; height:2px;
  background:rgba(221,221,221,1);
  margin:14px 0 18px;
  overflow:hidden;
}
.line3::after{
  content:""; position:absolute; top:0; left:-20%; width:40%; height:100%;
  background:linear-gradient(to right, transparent 0%, rgba(255,255,255,.8) 50%, transparent 100%);
  animation:shooting2 2s linear infinite; opacity:0;
}

/* ========== 3-Box Layout ========== */
.Boxlist{
  display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-start;
  gap:20px;                          /* 박스 간격 20px */
  width:100%; max-width:1300px;      /* 405*3 + 20*2 */
  margin:0 auto 120px; padding:0;
}

.Box{
  position:relative; z-index:1;
  width:405px;
  background:#ECF5F1;
  padding:40px 30px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,0.03);
  font-family:'Pretendard', sans-serif;
}

.Box h3{
  font-family:'Pretendard', sans-serif!important;
  font-size:24px;
  font-weight:700;
  margin-bottom:14px;
  color:#222;
}
.Box p{
  font-family:'Pretendard', sans-serif;
  font-size:18px;
  line-height:1.5;
  color:#444;
}

/* 반짝이는 테두리 효과 */
.Box::before{
  content:""; position:absolute; inset:0; border-radius:12px; padding:1px;
  background:linear-gradient(120deg, rgba(255,255,255,1), rgba(255,255,255,.05), rgba(255,255,255,1));
  background-size:200% 200%; animation:glowBorder 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  z-index:-1;
}

/* ========== Animations ========== */
@keyframes glowBorder{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}
@keyframes shooting2{
  0%{ left:-40%; opacity:0; }
  20%{ opacity:1; }
  50%{ left:60%; opacity:.8; }
  100%{ left:120%; opacity:0; }
}
@keyframes slide-up2{
  0%{ opacity:0; transform:translateY(60px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* 등장 애니메이션 */
.contentsBox .titleBox .title.motion h2 { animation:slide-up2 .8s ease both; }
.contentsBox .Boxlist.motion .Box { animation:slide-up2 1.0s ease both; }
.contentsBox .Boxlist.motion .Box:nth-child(2){ animation-delay:.1s; }
.contentsBox .Boxlist.motion .Box:nth-child(3){ animation-delay:.2s; }

/* ========== Responsive ========== */
@media (max-width:1280px){
  .contentsBox{ width:94%; }
  .titleBox .title h2{ font-size:42px; }
}
@media (max-width:960px){
  .Box{ width:calc(50% - 10px); }
}
@media (max-width:640px){
  .titleBox .title h2{ font-size:32px; }
  .Box{ width:100%; }
}
.Title{color:#222;}

/*     1488325 : HTML 편집기      */
        .quote-section {
            text-align: center;
            color: white;
        }

        .quote-section h3 {
            font-size: 42px;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .quote-section p {
            font-size: 20px;
            opacity: 0.9;
        }

        .footer {
            background: #000;
            height: 200px;
        }

        @media (max-width: 768px) {
            .hero {
                padding: 0 30px;
                height: 300px;
            }

            .hero h1 {
                font-size: 32px;
            }

            .features {
                flex-direction: column;
                align-items: center;
            }

            .education-section {
                flex-direction: column;
                padding: 60px 30px;
                gap: 40px;
            }

            .mission h2 {
                font-size: 24px;
            }

            .education-content h2 {
                font-size: 28px;
            }
        }
/* ===== 커튼 애니메이션 (배경 유지 버전) ===== */
.reveal-box {
  position: relative;
  background: url('../../img/footer.webp');
            background-size: cover;
            background-position: center;padding:150px 0 130px; 
  overflow: hidden;
}

.reveal-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
  mix-blend-mode: lighten; /* 배경과 자연스럽게 섞이게 */
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 2;
  pointer-events: none;
}

.reveal-content {
  position: relative;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.2s ease 0.3s, transform 1.2s ease 0.3s;
  z-index: 1;
}

/* ==== 스크롤 시 on 클래스 붙을 때 ==== */
.animate-sect.on .reveal-box::before {
  transform: scaleX(0);
}

.animate-sect.on .reveal-content {
  opacity: 1;
  transform: scale(1);
}

/* jb:pc-fit */
@media all and (min-width:1024px) {
  .inner,
  .contentsBox {
    width: auto !important; min-width: 0 !important; max-width: min(100%, 1280px) !important; box-sizing: border-box;
  }
}