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

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


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

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

/*     1486395 : HTML 편집기      */
 .mission {
            text-align: center;
            padding: 100px 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);}
}




/*     1486405 : HTML 편집기      */
  
/* ===== 커튼 애니메이션 (배경 유지 버전) ===== */
.reveal-box {
  position: relative;
  background: url('../../img/history.webp');
            background-size: cover;
            background-position: center;height:350px;
  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);
}
.scroll-text {
  font-size: 16px;
  color: white;
  letter-spacing: 1px;
  margin-bottom: 10px;
  opacity: 0.8;   
 text-align: center;
    display: block;
}

/* 세로 작대기 */
.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;
  }
}


/*     1487215 : HTML 편집기      */
li, ul {list-style:none;margin:0; padding:0;}
.history {width:1280px; margin:0 auto;position:relative;}
.history .inner ul .historyList{display:flex;width:100%;align-items: center; padding: 40px 50px; border-bottom:1px solid #ddd;}
.history .inner ul .historyList .dot{width:15px; height:15px; border-radius:50px; background:#37926B;margin-right:35px;}
.history .inner ul .historyList .year {font-size:55px;width:280px;color:#222;}
.history .inner ul .historyList .historyText {font-size:22px;color:#444; line-height:1.9}
.history .inner ul .historyList:last-child{ border-bottom:none; margin-bottom:120px;}

 @keyframes slide-up {
    0%{opacity : 0;}
    70%{opacity : 0; transform: translateY(40px);}
}
.history .inner ul .historyList.motion {animation-name: slide-up; animation-duration: 0.5s;}

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