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

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


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

/*     1487235 : BLANK 컨텐츠      */
.blank__1487235__ {.blank__1487235__ { 
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 100%;
  height: 450px; /* 기존 400px → 450px로 변경 */
}
}
.blank__1487235__.build_edit_mode {min-height:10px;border:1px dashed red;background:rgba(255,255,255,.1);}
.blank__1487235__.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__1487235__ {height:450px;}
}



/*     1487245 : 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);}
}




/*     1487275 : HTML 편집기      */
  ul, li{list-style: none; padding:0;}
    /* 전체 높이 확보 */
    .scroll-wrap {
      height: 120vh; /* 세 구간: 진입 / 고정 / 다음 */
      position: relative;
    }
    /* 이미지 비주얼 */
    .imgVisual {
      top: 0;
      height: 120vh;
    }
  
    .visual_sect {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: url('../../img/bg2.webp') center center / cover no-repeat;
      transform-origin: center center;
      will-change: transform;
    }
    .line {
  position: relative;
  width: 2px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;    margin: auto;
}

/* 빛(별똥별) 애니메이션 */
.line::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,1), transparent);
  animation: shooting 1.5s linear infinite;
}

/* 애니메이션 키프레임 */
@keyframes shooting {
  0% {
    top: -30%;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.titlesection{background: #fff;width: 100%;height: 200px;}
.container{width:1440px; margin:130px auto 0;}
.title {font-size:45px; color:#222; text-align: center;}
.contentsBox{width:1280px; margin:0 auto; margin-top:130px;}
.Boxlist{display: flex; width: 100%; justify-content: space-between; margin: 0 auto; flex-wrap: wrap; padding-bottom: 120px;}

.Box  {
    position: relative;
    background: rgba(255, 255, 255, 0.2); /* 반투명 배경 */
    color: #fff;
    padding: 40px 30px;
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
    width:44%; background: rgba(255,255,255,0.2);padding:50px 30px; 
    margin-bottom: 30px;
  }
  
  /* 반짝이는 테두리 효과 */
  .Box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px; /* 테두리 두께 */
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0.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;
  }
  
  @keyframes glowBorder {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 200% 50%;
    }
  }

.Box h3{font-size:24px; margin-bottom:30px;}
.Box p{font-size: 20px; }
.scroll-text{display: block; margin:0 auto; text-align: center; color:#fff;}
.titleBox .title h2{font-size: 48px; color:#fff; text-align: left;}
.line2 {
    position: relative;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;    margin: auto;
  }
  .line2::after {
    content: "";
    position: absolute;
    top: 0;
    left: -20%;
    width: 40%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
    animation: shooting2 2s linear infinite;
    opacity: 0;
  }
  
  @keyframes shooting2 {
    0% {
      left: -40%;
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    50% {
      left: 60%;
      opacity: 0.8;
    }
    100% {
      left: 120%;
      opacity: 0;
    }
  }

  .titleBox{margin-bottom:55px}
  * ==== Scroll scale section base ==== */
  .scroll-wrap{
    position: relative;
    /* 자바스크립트로 동적으로 높이를 계산해 넣지만,
       JS가 늦게 로드될 때를 대비한 최소 높이 */
  }
  
  .imgVisual{
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  
  .visual_sect{
    width: 100%;
    height: 100%;  
    transform-origin: center center;
    will-change: transform;
  }
  
  .visual_sect .content{
    opacity: 1;                   /* 초기 숨김 */
    transition: opacity .4s ease;
  }
  
  .visual_sect .content.show{
    opacity: 1;
  }
  
  .contentsBox .titleBox .title.motion h2 {animation-name: slide-up2; animation-duration: 0.8s}
  .contentsBox .Boxlist.motion .Box {animation-name: slide-up2; animation-duration: 1.2s}

/*     1487305 : HTML 편집기      */
.titleWrap {width:1280px; margin:0 auto; }
.titleWrap .title.motion {animation-name: slide-up2; animation-duration: 0.8s}

/*     1487295 : 맞춤게시판 - 목록형      */
.pm-myboard_list__1487295__ * {box-sizing:border-box}
.pm-myboard_list__1487295__ a {display:block;color:#fff}
.pm-myboard_list__1487295__ ul {margin:0;padding:0;list-style:none; width:1280px; margin:0 auto;}
.pm-myboard_list__1487295__ .empty {width:100% !important;padding:10px;font-size:13px;color:rgba(255,255,255,0.8);text-align:center}
.pm-myboard_list__1487295__ ul .Box.motion {animation-name: slide-up2; animation-duration: 1s}
.pm-myboard_list__1487295__ ul .Box:nth-child(2).motion  {animation-name: slide-up2; animation-duration: 1.2s}
.pm-myboard_list__1487295__ ul .Box:nth-child(3).motion  {animation-name: slide-up2; animation-duration: 1.4s}

.pm-myboard_list__1487295__ ul .Box {position:relative; height:120px;background:rgba(255,255,255,0.2); margin-bottom:20px;padding: 0 50px;border-radius:10px; width:100%;}
  /* 반짝이는 테두리 효과 */
  .pm-myboard_list__1487295__ ul .Box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px; /* 테두리 두께 */
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0.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;
  }
.pm-myboard_list__1487295__ ul li:first-child {}
.pm-myboard_list__1487295__ ul li > a,
.pm-myboard_list__1487295__ ul li > div {display:table;width:100%;padding:10px;table-layout:fixed}

.pm-myboard_list__1487295__ .figure {
	display:table-cell;width:100px;padding-right:15px;
	box-sizing:content-box;
}
.pm-myboard_list__1487295__ .figure > div {padding:1px}
.pm-myboard_list__1487295__ .figure img {display:block;margin:0 auto}

.pm-myboard_list__1487295__ dl {display:table-cell;position:relative;margin:0;padding:0;font-size:13px;line-height:2em;vertical-align:middle}
.pm-myboard_list__1487295__ dl:after {content:'';display:block;clear:both}
.pm-myboard_list__1487295__ dl dt {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height: 100px;}
.pm-myboard_list__1487295__ dl dd {display:none;position:absolute;top:0;right:0;bottom:0;height:20px;margin:auto;font-size:12px;font-family:Arial;color:#888;vertical-align:middle}
.pm-myboard_list__1487295__ dl .subject {font-size:20px;color:#fff}
.pm-myboard_list__1487295__ dl .date {font-size:16px;color:rgba(255,255,255,0.8)}

.pm-myboard_list__1487295__.date_show dl {padding-right:80px}
.pm-myboard_list__1487295__.date_show dl dd {display:block}

/*     1487315 : BLANK 컨텐츠      */
.blank__1487315__ {box-sizing:border-box;display:block;position:relative;width:100%;height:180px}
.blank__1487315__.build_edit_mode {min-height:10px;border:1px dashed red;background:rgba(255,255,255,.1);}
.blank__1487315__.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__1487315__ {height:30px}
}

/*     1487325 : 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:100px 0 60px; 
  overflow: hidden;
}

.reveal-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to right, #000 0%, #101010 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) {
  .contentsBox,
  .titleWrap,
  .pm-myboard_list__1487295__ ul {
    width: auto !important; min-width: 0 !important; max-width: min(100%, 1280px) !important; box-sizing: border-box;
  }
  .container {
    width: auto !important; min-width: 0 !important; max-width: min(100%, 1440px) !important; box-sizing: border-box;
  }
}