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

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


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

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



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




/*     1491475 : HTML 편집기      */
ul, li {list-style:none; padding:0; margin:0;}
.scroll-wrap {
  position: relative;
  height: 80vh;padding-top: 50px;
}
.content{width:1280px; margin:0 auto;}
.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;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* 인물+설명 박스 */
.director-box {
  display: flex;
  justify-content: space-between;;
  width: 100%;
  max-width: 1100px;
  color: #fff; 
margin: 0 auto;
}

/* 사진 */
.director-box .photo img {
  width: 350px;
  height: auto;
  border-radius: 5px;
  object-fit: cover;
}

/* 설명박스에 반짝이는 효과 적용 */
.Box2 {
  position: relative;
  background: rgba(255,255,255,0.2);
  padding: 75px 40px;
  border-radius: 5px;
  overflow: hidden;
  width: 60%;
  z-index: 1;
height: 400px;
box-sizing: border-box;
}

.Box2::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;
}
.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%;}
}

.Box2 h3 {font-size: 24px; margin-bottom: 20px;}
.Box2 p {font-size: 18px; line-height: 1.5;}
.Box2 .highlight { font-weight: 600; margin-bottom: 15px;color:#39FEA9; font-size:20px}
.Box2 .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 25px;
  border: 1px solid #fff;
  background: rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #fff;
  transition: all .3s;
  cursor: pointer;
}
.Box2 .btn:hover {
  background: rgba(255,255,255,0.35);
}

/* 스크롤 텍스트 & 라인 */
.scroll-text {
  text-align: center;
  color: #fff;
  margin-top: 50px;
  font-size: 18px;
}

/* 별똥별 세로라인 */
.line {
  position: relative;
  width: 2px;
  height: 60px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
  margin: 50px auto 20px;
}
.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;}
}
.director-section .photo,
.director-section .info.Box2 {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease;
}

/* motion 클래스가 붙었을 때 부드럽게 등장 */
.director-section .content.motion .photo {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s; /* 살짝 늦게 등장 */
}

.director-section .content.motion .info.Box2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; /* 이미지보다 조금 더 늦게 등장 */
}


/*     1491535 : HTML 편집기      */
* {box-sizing: border-box;}
body {margin: 0; font-family: 'Noto Sans KR', sans-serif; }
ul, li {list-style:none; padding:0; margin:0;}
h3, p {padding:0; margin:0;}

.scroll-wrap2 {position: relative; min-height: 100vh; padding: 50px 20px;}
.visual_sect2 {
  width:100%; 
  display:flex; 
  flex-direction:column; 
  align-items:center;
  color:#fff;
}
p#modalQuote {
    line-height: 1.8;
}
.contentsBox {width:100%; max-width:1280px; margin:0 auto;}
.titleBox {margin-bottom:40px;}
.titleBox .title h2 {font-size:45px; color:#fff; text-align:left;}
.line2 {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  margin: 20px 0;
}
.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;}
}

.Boxlist { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; width:1280px }

.Box {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 420px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 10px;
  text-align: center;
  padding: 20px 15px 30px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s;
}
.Box:hover {transform: translateY(-8px);}

.Box img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

.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: 8px;} 
.Box p {font-size:18px; color:#ddd; line-height: 1.4;}

/* 모달 */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
}
.modal-content {
  background: #fff;
  padding: 40px;
  border-radius: 16px;
  max-width: 700px;
  width: 100%;
  position: relative;
  animation: fadeUp 0.4s ease;
  margin: auto;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
  color: #666;
  transition: color 0.3s;
}
.modal-close:hover {color: #000;}

.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}
.profile-header img {
  width: 140px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}
.profile-info h3 {
  font-size: 1.8em;
  margin-bottom: 8px;
  color: #333;
}
.profile-info .position {
  font-size: 1.1em;
  color: #37926B;
  font-weight: 600;
  margin-bottom: 8px;
}
.profile-info .desc {
  font-size: 0.95em;
  color: #666;
  line-height: 1.6;
}

.profile-body p {
  margin-bottom: 15px; font-size:16px;
  line-height: 1.7;
  color: #444;
}
.profile-body p strong {
  color: #222;
  font-weight: 600; font-size:18px;font-family:'IBM Plex Sans KR';
}
.profile-body p:last-child {
  margin-bottom: 0;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1200px) {
  .Boxlist {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 768px) {
  .Boxlist {grid-template-columns: repeat(2, 1fr); gap: 15px;}
  .titleBox .title h2 {font-size: 32px;}
  .Box {height: 380px;}
  .profile-header {flex-direction: column; align-items: center; text-align: center;}
}
@media (max-width: 480px) {
  .Boxlist {grid-template-columns: 1fr;}
}

/*     1491555 : 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) {
  .content,
  .Boxlist {
    width: auto !important; min-width: 0 !important; max-width: min(100%, 1280px) !important; box-sizing: border-box;
  }
}