body {
   font-family: Noto Sans CJK KR;
 }



 /* ===== SLIDE FRAME (둥근 마스크 담당) ===== */
 .hero-slide {
   position: absolute;
   inset: 0;

   border-radius: 40px 40px 0 0;
   /* ✅ 상단만 둥글게 */
   overflow: hidden;
 }

 /* ===== IMAGE ===== */
 .hero-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: scale(1);
 }

 .hero-slide.is-active img {
   animation: heroZoomIn 6s linear forwards;
 }

 @keyframes heroZoomIn {
   from {
     transform: scale(1);
   }

   to {
     transform: scale(1.12);
   }
 }



 /* ===== HERO BG ===== */


 .main-hero {
   height: 100vh;
   background: url(/1x/s1/main_0.png) center / cover no-repeat fixed;
   display: flex;
   align-items: flex-end;
   justify-content: center;
 }

 /* ===== SLIDE WRAP ===== */
 .hero-slide-wrap {
   position: relative;
   width: min(1750px, 94%);
   height: 778px;
   margin-bottom: 0;
 }

 /* ===== SLIDE ===== */
 .hero-slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity .9s ease;
 }

 .hero-slide.is-active {
   opacity: 1;
   z-index: 2;
 }

 /* ===== IMAGE (NO RADIUS / NO EFFECT) ===== */
 .hero-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 0;
   box-shadow: none;
   filter: none;
 }

 /* ===== TEXT (SOFT FADE ONLY) ===== */
 .hero-text {
   position: absolute;
   left: 9%;
   bottom: 25%;
   color: #fff;
   opacity: 0;
   transform: translateY(40px);
   transition: opacity 1.1s ease, transform 1.1s ease;
 }

 .hero-slide.is-active .hero-text {
   opacity: 1;
   transform: translateY(0);
   transition-delay: .22s;
 }

 .hero-text h2 {
   font-size: 50px;
   font-weight: 700;
 }

 .hero-text p {
   margin-top: 14px;
   font-size: 20px;
 }

 /* ===== CTA BUTTON ===== */
 .hero-btn {
   display: inline-block;
   margin-top: 24px;
   padding: 10px 22px;
   border: 1px solid rgba(255, 255, 255, .6);
   color: #fff;
   font-size: 14px;
   background: none;
 }

 /* ===== NAV (LEFT / RIGHT) ===== */
 .hero-nav {
   position: absolute;
   top: 50%;
   background: none;
   border: none;
   color: #fff;
   font-size: 16px;
   letter-spacing: 2px;
   cursor: pointer;
   z-index: 10;
   pointer-events: auto;
   border-bottom: 1px solid;
 }

 .hero-prev {
   left: 24px;
   transform: translateY(-50%) rotate(-90deg);
 }

 .hero-next {
   right: 24px;
   transform: translateY(-50%) rotate(90deg);
 }

 /* ================================================================= */
 /* ===== HERO CONTROLS VISIBILITY FIX (버튼만) — 요청한 부분만 적용 ===== */
 /* ================================================================= */

 .hero-controls {
   position: absolute !important;
   bottom: 26px !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   z-index: 9999 !important;
   pointer-events: auto !important;
   display: flex !important;
   align-items: center !important;
   gap: 12px !important;
 }

 /* DOT 4개 */
 .hero-dots {
   display: flex !important;
   gap: 10px !important;
 }

 .hero-dots .dot {
   all: unset !important;
   width: 11px !important;
   height: 11px !important;
   border-radius: 50% !important;
   background: rgba(255, 255, 255, .6) !important;
   display: block !important;
 }

 .hero-dots .dot.is-active {
   background: #fff !important;
 }

 /* PLAY / PAUSE */
 .hero-play {
   all: unset !important;
   width: 16px !important;
   height: 16px !important;
   position: relative !important;
   cursor: pointer !important;
   z-index: 9999 !important;
 }

 /* ▶ */
 .hero-play.is-play::before {
   content: "" !important;
   position: absolute !important;
   left: 3px !important;
   top: 1px !important;
   border-style: solid !important;
   border-width: 7px 0 7px 10px !important;
   border-color: transparent transparent transparent #fff !important;
 }

 /* || */
 .hero-play.is-pause::before,
 .hero-play.is-pause::after {
   content: "" !important;
   position: absolute !important;
   top: 1px !important;
   width: 3px !important;
   height: 14px !important;
   background: #fff !important;
 }

 .hero-play.is-pause::before {
   left: 3px !important;
 }

 .hero-play.is-pause::after {
   right: 3px !important;
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 768px) {
   .hero-slide-wrap {
     height: 60vh;
   }

   .main-hero {
     height: 74vh;
     background: url(/1x/s1/main_0.png) center / cover no-repeat fixed;
     display: flex;
     align-items: flex-end;
     justify-content: center;
   }

   .hero-text {
     left: 24px;
     bottom: 80px;
   }

   .hero-text p {
     margin-top: 14px;
     font-size: 17px;
   }

   .hero-prev {
     left: 24px;
     transform: translateY(-50%) rotate(-90deg);
     display: none;
   }

   .hero-next {
     right: 24px;
     transform: translateY(-50%) rotate(90deg);
     display: none;
   }

   .hero-text h2 {
     font-size: 21px;
   }
 }

 /* ===== FIRST LOAD TEXT FADE IN (ADD ONLY) ===== */
 body:not(.is-loaded) .hero-slide.is-active .hero-text {
   opacity: 0;
 }

 body.is-loaded .hero-slide.is-active .hero-text {
   opacity: 1;
 }






 .se2__media {
   position: relative;
 }

 /* 영상 */
 .se2__video {
   width: 100%;
   display: block;
 }

 /* ✅ 영상 안 흰색 사각 테두리 */
 .se2__media::after {
   content: "";
   position: absolute;

   /* 시안 기준 위치 / 크기 (조절 가능) */
   top: 24px;
   left: 24px;
   right: 24px;
   bottom: 24px;

   border: 4px solid rgba(255, 255, 255, 0.9);
   /* 흰색 선 */
   pointer-events: none;
   box-sizing: border-box;
   z-index: 2;
 }

 .se2__overlay {
   border: 6px solid #fff;
   box-sizing: border-box;
 }

 /* =========================
   SE2 SECTION
========================= */
 .se2 {
   position: relative;
   padding: 160px 0 180px;
   background: url(/1x/s1/se2_bg.png) calc(0px) 206px no-repeat;
   background-size: auto;
   overflow: hidden;
 }

 /* 상단 텍스트 */
 .se2__head {
   text-align: center;
   margin-bottom: 60px;
 }

 .se2__title {
   font-size: 38px;
   font-weight: 600;
   line-height: 1.4;
   margin-bottom: 18px;
   color: #34445b;
 }

 .se2__desc {
   font-size: 16px;
   line-height: 1.8;
   color: #000000;
   font-weight: 500;
 }

 /* 미디어 영역 */
 .se2__media {
   position: relative;
   width: min(1400px, 92%);
   margin: 0 auto 80px;
 }

 /* 영상 */
 .se2__video {
   width: 100%;
   height: 60vh;
   /* ← 기존이 100vh 느낌이었다면 반토막 */
   object-fit: cover;
   display: block;
 }

 /* 겹쳐진 이미지 (효과 없음) */
 .se2__overlay {
   position: absolute;
   right: -4%;
   bottom: -18%;
   width: 42%;
   max-width: 580px;
   height: auto;
   pointer-events: none;
   z-index: 5;
 }

 /* 하단 텍스트 */
 .se2__foot {
   width: min(900px, 92%);
   /* margin: -9px auto; */
   margin-left: 14%;
   margin-top: -3%
 }

 .se2__list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0px;
 }

 .se2__tit {
   display: flex;
   align-items: center;
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 14px;
   color: #34445b;
 }

 .se2__dot {
   width: 8px;
   height: 8px;
   background: #34445b;
   border-radius: 50%;
   margin-right: 10px;
   flex-shrink: 0;
 }

 .se2__list p {
   font-size: 15px;
   line-height: 1.8;
   color: #000000;
   font-weight: 500;
 }

 /* =========================
   RESPONSIVE
========================= */
 @media (max-width: 1024px) {
   .se2 {
     padding: 120px 0 140px;
   }

   .se2__overlay {
     right: -6%;
     bottom: -12%;
     width: 48%;
   }

   .se2__list {
     gap: 40px;
   }
 }

 @media (max-width: 768px) {
   .se2__title {
     font-size: 26px;
   }

   .se2__desc {
     font-size: 14px;
   }

   .se2__media {
     margin-bottom: 60px;
   }

   .se2__video {
     width: 100%;
     height: 38vh;
     object-fit: cover;
     display: block;
   }

   .se2__overlay {
     position: relative;
     right: auto;
     bottom: auto;
     width: 70%;
     max-width: none;
     margin: 30px auto 0;
     display: none;
   }

   .se2__list {
     grid-template-columns: repeat(3, 1fr);
     gap: 15px;
     text-align: center;
   }

   .se2__tit {
     justify-content: center;
   }

   .se2__foot {
     margin-top: -9%;
     width: 100%;
     margin-left: 0;
   }

   .se2__tit {
     display: flex;
     align-items: center;
     font-size: 11px;
     font-weight: 600;
     margin-bottom: 14px;
     color: #34445b;
   }

   .se2__list p {
     font-size: 10px;
     line-height: 1.8;
     color: #000000;
     font-weight: 500;
   }

   .se2__dot {
     width: 8px;
     height: 8px;
     background: #34445b;
     border-radius: 50%;
     margin-right: 10px;
     flex-shrink: 0;
     display: none;
   }
 }


 .s3-media img {
   transform: scale(1);
   transition: transform 1s ease;
 }

 .s3-card:hover .s3-media img {
   transform: scale(1.2);
 }


 /* ==================================================
   S3 SECTION
================================================== */
 .s3 {
   background: url(/1x/s1/se3_bg.png) center no-repeat;
   background-size: auto;
   background-position: center 20px;
   padding: 140px 0;
   margin-top: -7%;
 }

 /* ==================================================
   HEADER TEXT
================================================== */
 .s3-head {
   text-align: center;
   margin-bottom: 90px;
 }

 .s3-eyebrow {
   display: block;
   font-size: 21px;
   letter-spacing: .2em;
   color: #34445b;
   margin-bottom: 8px;
   font-weight: 500;
 }

 .s3-title {
   font-size: 36px;
   font-weight: 700;
   color: #34445b;
   margin-bottom: 12px;
 }

 .s3-desc {
   font-size: 18px;
   line-height: 1.8;
   color: #000000;
   padding-bottom: 7px;
 }

 /* ==================================================
   CARD LAYOUT
================================================== */
 .s3-inner {
   width: min(1400px, 92%);
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 80px;
 }

 /* ==================================================
   CARD (바는 이미지 밖, 미디어는 안쪽)
================================================== */
 .s3-card {
   position: relative;
   display: block;
   text-decoration: none;
 }


 .s3-card {
   padding-bottom: calc(var(--media-h-hover) - var(--media-h));
 }

 /* ==================================================
   ✅ IMAGE MEDIA (기존 핵심 유지: clip-path 55px)
   - 이미지 + 오버레이는 여기 안에서만 존재
================================================== */
 .s3-media {
   position: relative;
   display: block;

   /* ✅ 니가 쓰던 거 그대로 유지 */
   overflow: hidden;
   clip-path: inset(0 round 55px);
   /* 🔥 절대 안 뺌 */
 }

 .s3-media img {
   width: 100%;
   display: block;
 }

 /* ==================================================
   ✅ TOP BAR (이미지 밖)
   - 이미지 안으로 절대 안 들어감
   - 위에서 내려와 “덮는 느낌”
   - 모양은 ∩ (U 뒤집은 느낌)
================================================== */
 .s3-cap {
   position: absolute;
   left: 0;
   right: 0;
   top: -63px;
   height: 141px;
   background: #34445b;
   color: #fff;
   display: flex;
   /* align-items: center; */
   padding: 17px 19px;
   font-size: 20px;
   font-weight: 500;
   text-align: center;
   letter-spacing: .02em;
   /* z-index: 5; */
   border-radius: 37px;
   transform: translateY(0);
   /* z-index: 1; */
   /* flex-direction: row; */
   justify-content: center;
 }

 /* ==================================================
   HOVER OVERLAY (이미지 안에서만)
================================================== */
 .s3-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
   opacity: 0;
   transition: opacity .35s ease;

   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
   padding: 44px;

   z-index: 2;
 }

 .s3-card:hover .s3-overlay {
   opacity: 1;
 }

 .s3-overlay {
   display: flex;
   align-items: center;
   /* 세로 가운데 */
   justify-content: center;
   /* 가로 가운데 */
 }

 .s3-more {
   color: #fff;
   font-size: 25px;
   white-space: nowrap;
 }

 /* ==================================================
   RESPONSIVE
================================================== */
 @media (max-width: 1024px) {
   .s3-inner {
     gap: 60px;
   }
 }

 @media (max-width: 768px) {
   .s3-inner {
     grid-template-columns: 1fr;
     gap: 48px;
   }

   .s3 {

     padding: 0px 0;
   }

   .s3-title {
     font-size: 26px;
   }

   .s3-desc {
     font-size: 16px;
   }

   /* 모바일에서 텍스트바가 너무 크면 살짝 줄임 */
   .s3-cap {
     top: -22px;
     height: 68px;
     padding: 0 24px;
     font-size: 16px;
   }

   .s3-overlay {
     padding: 26px;
   }

   .s3-more {
     font-size: 15px;
   }

   .s3-descbox {
     margin-top: 18px;
     font-size: 15px !important;
     line-height: 1.7;
     color: #333;
     margin-bottom: 10%;
   }

   .s3-cap {
     position: absolute;
     left: 0;
     right: 0;
     top: -63px;
     height: 141px;
     background: #34445b;
     color: #fff;
     display: flex;
     /* align-items: center; */
     padding: 17px 19px;
     font-size: 18px;
     font-weight: 500;
     text-align: center;
     letter-spacing: .02em;
     /* z-index: 5; */
     border-radius: 37px;
     transform: translateY(0);
     /* z-index: 1; */
     /* flex-direction: row; */
     justify-content: center;
   }
 }

 /* 카드 하단 설명 */
 .s3-descbox {
   margin-top: 18px;
   font-size: 16px;
   color: #4a4a4a;
   font-weight: 400;
 }









 /* ===============================
       SECTION BASE
    =============================== */
 .s4 {
   background: url(/1x/s1/se4_bg.png) center no-repeat;
   background-size: auto;
   padding: 140px 0;
   position: relative;
   margin-top: -78px;
   z-index: 999;
 }

 .s4-head {
   width: min(1400px, 92%);
   margin: 0 auto 120px;
   text-align: center;
   color: #fff;
 }

 .s4-kicker {
   display: inline-block;
   font-size: 21px;
   margin-bottom: 10px;
   letter-spacing: .04em;
 }

 .s4-title {
   font-size: 36px;
   font-weight: 600;
   line-height: 1.35;
   margin: 0;
   letter-spacing: .02em;
 }

 .s4-wrap {
   position: relative;
   width: min(1500px, 92%);
   margin: 0 auto;
 }

 /* ===============================
       CAP (흰박스 밖에 떠있는 바)
       - user provided style 그대로 참고
    =============================== */
 .s4-cap {
   position: absolute;
   left: 0;
   right: 0;
   top: -96px;
   height: 192px;
   background: #e6e6e6;
   border-radius: 37px;
   z-index: 5;
   overflow: hidden;
 }



 .s4-cap-active {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 58%;
   /* ← 시안에 맞게 조절 */
   background: #2f3f56;
   /* 왼쪽 진한 색 */

   border-radius: 37px;
   /* 완전 둥글게 */
   z-index: 2;

   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* 오른쪽 기본 영역 */
 .s4-cap-base {
   position: relative;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding-right: 80px;
   z-index: 1;
 }

 /* 로고 공통 */
 .s4-cap img {
   max-height: 42px;
   pointer-events: none;
 }

 .s4-cap-inner {
   position: relative;
   display: flex;
   height: 100%;
   overflow: hidden;
   border-radius: 37px;
 }

 /* 버튼 = 영역 */
 .s4-logo-btn {
   flex: 1;
   border: 0;
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;

 }

 /* 왼쪽 / 오른쪽 색 */
 .s4-logo-btn {
   background: #e5e5e5;
 }

 /* 활성 */
 .s4-logo-btn.is-active {
   background: #2f3f56;
 }

 .s4-logo-btn.is-active {
   opacity: 1;
 }

 .s4-logo-btn img {
   max-height: 42px;
   pointer-events: none;
   margin-top: -12%;
 }

 /* ===============================
       WHITE BOX
    =============================== */
 .s4-box {
   position: relative;
   background: #fff;
   border-radius: 40px;
   padding: 120px 70px 50px;
   overflow: hidden;
   /* 파도는 내부에 깔림 */
   z-index: 6;
 }

 /* ===============================
       COPY (좌측 설명)
    =============================== */
 .s4-copy {
   position: absolute;
   left: 70px;
   top: 65px;
   width: min(520px, 42%);
   z-index: 2;
 }

 .s4-desc {
   margin: 0;
   font-size: 18px;
   line-height: 1.65;
   color: #111;
   white-space: pre-line;
 }

 /* ===============================
       SLIDER LAYOUT
    =============================== */
 .s4-slider {
   display: grid;
   grid-template-columns: 70px 1fr 70px;
   align-items: center;
   gap: 22px;
 }

 .s4-stage {
   position: relative;
   padding-top: 0px;
 }

 .s4-track {
   position: relative;
   width: 100%;
   min-height: 350px;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   gap: 0px;
   z-index: 1;
 }

 /* 이미지 3장: 이전/현재/다음 */
 .s4-img {
   width: 380px;
   max-width: 42vw;
   height: auto;
   display: block;
   transition: transform .55s ease, opacity .55s ease;
   transform-origin: center bottom;
   user-select: none;
   -webkit-user-drag: none;
 }

 /* ✅ 대기(좌/우) 투명도 */
 .s4-img.is-prev,
 .s4-img.is-next {
   opacity: .35;
   transform: scale(.86);
 }

 /* ✅ 현재: 축소→확대 느낌 */
 .s4-img.is-active {
   opacity: 1;
   transform: scale(1);
 }

 /* ===============================
       ARROWS
    =============================== */
 .s4-arrow {
   width: 62px;
   height: 62px;
   border-radius: 50%;
   border: 0;
   cursor: pointer;
   display: grid;
   place-items: center;
   transition: transform .2s ease, opacity .2s ease;
 }

 .s4-arrow:active {
   transform: scale(.96);
 }

 .s4-arrow--left {
   background: #34445b;
 }

 .s4-arrow--right {
   background: #34445b;
 }

 .s4-arrow::before {
   content: "";
   width: 14px;
   height: 14px;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   display: block;
 }

 .s4-arrow--left::before {
   transform: rotate(-135deg);
 }

 .s4-arrow--right::before {
   transform: rotate(45deg);
 }

 /* ===============================
       BOTTOM TITLE + BUTTON
    =============================== */
 .s4-bottom {
   text-align: center;
   margin-top: 5px;
   position: relative;
   z-index: 3;
 }

 .s4-name {
   margin: 0 0 10px;
   font-size: 26px;
   font-weight: 700;
   color: #34445b;
 }

 .s4-more {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 110px;
   height: 36px;
   padding: 0 18px;
   border: 1px solid #bfc8d6;
   border-radius: 8px;
   color: #253040;
   text-decoration: none;
   font-size: 14px;
   background: #fff;
 }

 /* ===============================
       WAVE BG (inside box)
    =============================== */
 .s4-wave {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 220px;
   background: url(/1x/s1/se4_bg2.png) repeat-x bottom left;
   background-size: auto 100%;
   pointer-events: none;
   z-index: 0;
 }



 /* ===============================
       RESPONSIVE
    =============================== */
 @media (max-width: 1024px) {
   .s4-title {
     font-size: 30px;
   }

   .s4-box {
     padding: 120px 26px 140px;
   }

   .s4-copy {
     left: 26px;
     width: min(520px, 55%);
   }

   .s4-track {
     gap: 36px;
     min-height: 360px;
   }

   .s4-img {
     width: 340px;
   }
 }

 @media (max-width: 768px) {
   .s4 {
     padding: 110px 0;
     display: none;
   }

   .s4-head {
     margin-bottom: 46px;
   }

   .s4-title {
     font-size: 24px;
   }

   .s4-cap {
     top: -52px;
     height: 122px;
     border-radius: 30px;
     padding: 14px 14px;
   }

   .s4-logo-btn {
     width: 160px;
     height: 60px;
     border-radius: 20px;
   }

   .s4-copy {
     position: static;
     width: 100%;
     margin: 0 0 18px;
     text-align: left;
   }

   .s4-slider {
     grid-template-columns: 52px 1fr 52px;
     gap: 12px;
   }

   .s4-track {
     min-height: 320px;
     gap: 18px;
     align-items: center;
   }

   .s4-img {
     width: 260px;
     max-width: 70vw;
   }

   .s4-name {
     font-size: 22px;
   }
 }

 @media (max-width: 480px) {
   .s4-slider {
     grid-template-columns: 44px 1fr 44px;
   }

   .s4-arrow {
     width: 50px;
     height: 50px;
   }

   .s4-img.is-prev,
   .s4-img.is-next {
     display: none;
   }

   /* 모바일은 중앙만 깔끔하게 */
   .s4-track {
     min-height: 280px;
   }
 }


















 /* ===== S5 SECTION ===== */
 .s5 {
   background: url(/1x/s1/se5_bg.png) center no-repeat;
   background-size: cover;
   padding: 120px 0;
   margin-top: -3%;
 }

 .s5-inner {
   width: min(1400px, 92%);
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px;
 }

 /* ===== CARD ===== */
 .s5-card {
   height: 360px;
   border: 1px solid rgba(255, 255, 255, .6);
   border-radius: 22px;
   color: #fff;
   text-decoration: none;

   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 14px;

   background: transparent;
   transition: background-color .35s ease, border-color .35s ease;
 }

 /* 기본 텍스트 */
 .s5-card strong {
   font-size: 30px;
   font-weight: 600;
 }

 .s5-card span {
   font-size: 15px;
   opacity: .85;
   letter-spacing: .04em;
 }

 .s5-card em {
   margin-top: 20px;
   font-size: 14px;
   font-style: normal;
   opacity: .9;
 }

 /* ✅ 호버 효과 (시안 핵심) */
 .s5-card:hover {
   background-color: #3b4c63;
   border-color: #3b4c63;
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 1024px) {
   .s5-inner {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 560px) {
   .s5 {
     padding: 80px 0;
   }

   .s5-inner {
     grid-template-columns: 1fr;
   }

   .s5-card {
     height: 280px;
   }
 }