/* ===========================
   Section Full Width
   =========================== */
.section--1 .wrap {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

/* ===========================
   Slick Container (Full Width)
   =========================== */
.main__banner.banner__slider {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* slick 컨테이너 */
.banner__slider {
  min-height: 420px;       
  position: relative;
}

/* 초기화 전엔 첫 슬라이드만 보이게 → 세로 나열 방지 */
.banner__slider:not(.slick-initialized) .banner__item { display: none; }
.banner__slider:not(.slick-initialized) .banner__item:first-child { display: block; }

/* ===========================
   Slide Item
   =========================== */
.banner__slider .banner__item {
  position: relative;
  height: 703px;        /* ← 추가 */
  min-height: 703px;    /* ← clamp 제거 or 무력화 */
  --stage-right: max(24px, calc(50% - 600px));
  --asset-right: 64px;
  --asset-bottom: 72px;
  --asset-top: auto;
  --asset-width: 600px;
  --asset-y-start: 50px;
  background-image: var(--bg-desktop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}


/* 클릭 영역 */
.banner__slider .banner__item > a {
  position: absolute;
  inset: 0;
  display: block;
}

/* 배경 비디오 */
.banner__item .banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x, 70%) var(--focus-y, 50%);
  z-index: -2;
}



.banner_text {
  position: absolute;
  top: var(--text-top, 50%);
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 60px;
  width: 100%;
  max-width: 1200px;
  z-index: 2;
  color: var(--text-color, #fff);
}
/* ---------------------------
   텍스트 기본
--------------------------- */
.banner_inner_txt {
  margin: 0 0 20px;
  line-height: 1.4;
  font-weight: var(--pc-fw-body);
}

/* ---------------------------
   메인 타이틀 (기본)
--------------------------- */
.banner_inner_txt--lg {
  font-size: var(--pc-fz-hero);
  font-weight: var(--pc-fw-title);
  line-height: var(--pc-lh-display);
  letter-spacing: var(--pc-ls-title);
  text-shadow: var(--title-shadow, 0 4px 18px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.18));
}

.banner_inner_txt--lg.main {
  font-size: 56px;
}

/* ---------------------------
   서브 텍스트
--------------------------- */
.banner_inner_txt--sm {
  font-size: var(--pc-fz-card);
  line-height: var(--pc-lh-heading);
  letter-spacing: var(--pc-ls-title);
}

/* ---------------------------
   보조 텍스트 (작게)
--------------------------- */
.banner_inner_txt .txt-sub {
  font-size: 0.85em;
  opacity: 0.75;
}

.banner_inner_txt--lg .accent { color:#1fdf8c; }

/* ---------------------------
   slide5 
   --------------------------- */
.banner__item--02::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.34) 0%,   /* 시작: 과하지 않게 */
    rgba(0,0,0,.22) 32%,  /* 텍스트 중심대역 */
    rgba(0,0,0,.08) 52%,  /* 점점 투명 */
    rgba(0,0,0,0)  66%
  );
  z-index:-1;
  pointer-events:none;
}

/* 성능 힌트 */
.banner__slider .slick-track { will-change: transform; }

/* ===== slide2 ===== */
.banner__item--01{
  position:relative;
  overflow:hidden;
  /* 배경 컬러는 유지 (그라디언트) */
  background:linear-gradient(135deg,var(--color-primary) 0%, #B02090 100%);
}

.banner__item--01::after{
  content:"";
  position:absolute; inset:0;
  background:url('/assets/images/1st-bg4.png') center 78% / cover no-repeat;
 
  opacity:1;
  pointer-events:none;
  z-index:1;
}
/* 텍스트는 최상위 */
.banner__item--01 .banner_text{
  position:relative;
  z-index:5;
}
/* ===== slide2: 얼굴 마퀴 레이어 ===== */
.face-marquee{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:24px; /* 필요시 더 내리면 됨 */
  transform:translateX(-50%);
  width:100%;
  padding-block: 28px;
  overflow:visible;

  /* 좌우 페이드 범위 커스텀 */
  --fade-edge: 28%; 

  /* 좌우만 페이드: 마스크(webkit + 표준) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--fade-edge),
    #000 calc(100% - var(--fade-edge)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--fade-edge),
    #000 calc(100% - var(--fade-edge)),
    transparent 100%
  );


  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.face-marquee .track{
  display:flex;
  gap:32px;
  padding-inline:90px;
  animation:marquee-move 16s linear infinite;
  will-change: transform;
}

.face-marquee img{
  width:110px;
  height:110px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  box-shadow:0 0 0 2px #fff inset,0 12px 22px rgba(0,0,0,.22);
}

/* 무한 마퀴 */
@keyframes marquee-move{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .face-marquee .track{
    animation: none;
  }
}

/* 반응형 */
@media (max-width: 768px){
  .face-marquee{ bottom:36px; }
  .face-marquee img{ width:96px; height:96px; }
  .face-marquee .track{ animation-duration: 14s; }
}

/* ===== 선택: 마스크 미지원 브라우저(아주 드묾) 약한 시각적 폴백 ===== */
@supports not ((mask-image: linear-gradient(to right, #000, transparent))) {
  .face-marquee::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
   
    background: linear-gradient(to right,
      rgba(0,0,0,0.20) 0%,
      rgba(0,0,0,0.00) 18%,
      rgba(0,0,0,0.00) 82%,
      rgba(0,0,0,0.20) 100%
    );
  }
}/* ===========================
   Teacher Banner (Fixed-Crop Mode)
   =========================== */
/* 전체 배너 영역 */
.teacher-banner {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0;

}

/* wrap 확장 */
.teacher-banner .wrap {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 스테이지: 모든 레이어 올리는 영역 */
.teacher-banner__stage {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  --stage-x: 120px;
}

.teacher-banner__stage img{
  display:block;
}
/* 배경 */
.teacher-banner__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

.teacher-banner__bg[src*="1st-img-bg.png"]{
  left:50%;
  right:auto;
  width:100%;
  min-width:1923px;
  max-width:none;
  transform:translateX(-50%);
}

.teacher-banner__text {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  padding: 0 60px 0 120px;
  color: white;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.teacher-banner__text .t-sub {
  font-size: var(--pc-fz-lead);
  margin-bottom: 12px;
  opacity: 0.9;
}

.teacher-banner__text .t-title {
  font-size: var(--pc-fz-title);
  font-weight: var(--pc-fw-title);
  line-height: var(--pc-lh-display);
}


/* 3) 메인(숫자1 + 월계수) */
.teacher-banner__main{
  position:absolute;
  left:calc(50% + var(--stage-x));
  bottom:-18px;
  transform:translateX(-50%);
  width:460px;
  z-index:4;
  animation: mainDropSoft 1s ease-out 0.1s forwards;
}

.teacher-banner__main[src$="1st-img.png"]{
  width: 600px;
}
/* ===========================
   Animation
   =========================== */

@keyframes mainDropSoft {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-24px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.smartmatch-banner .teacher-banner__main{
  left: calc(50% + var(--stage-x));
  right: auto;
  transform: translateX(-50%);
  bottom: -10px;
  width: 270px;
  z-index: 4;
}


/* 미니 뒷배경 레이어 */
.teacher-banner__matrix{
  position:absolute;
  left:calc(50% + var(--stage-x));
  bottom:-26px;
  transform:translateX(-50%);
  width:290px;
  z-index:2;
  animation: mainDropSoft 1s ease-out 0.1s forwards;
}

.board:has(.links__view--02 .board__review) .teacher-banner__text,
.board:has(.links__view--02 .board__review) .teacher-banner__text *,
.board:has(.links__view--02 .board__review) .teacher-banner__stage img{
  animation: none;
  opacity: 1;
}

.board:has(.links__view--02 .board__review) .teacher-banner__text{
  transform: translate(-50%, -50%);
}

.board:has(.links__view--02 .board__review) .teacher-banner__text *{
  transform: none;
}

.board:has(.links__view--02 .board__review) .teacher-banner__main,
.board:has(.links__view--02 .board__review) .teacher-banner__matrix,
.board:has(.links__view--02 .board__review) .sevicecenter__main{
  transform: translateX(-50%);
}

/* 커리큘럼 전용 메인 오브젝트 */
.curriculum__main {
  width: 500px;
  bottom: 0;
  left: calc(59% + var(--stage-x) + 20px);
  position: absolute;
  z-index: 4;

  opacity: 0;
  animation: mainDropSoft 1s ease-out 0.1s forwards;

  transform: translateX(-50%);
}

.curriculum__main3 {
  width: 360px;
  bottom: -74px;
  left: calc(50% + var(--stage-x));
  position: absolute;
  z-index: 4;

  opacity: 0;
  animation: mainDropSoft 1s ease-out 0.1s forwards;

  transform: translateX(-50%); 
}


.sevicecenter__main{
  width: 410px;
  bottom: 10px;
  left: calc(50% + var(--stage-x));
  position: absolute;
  z-index: 4;

  opacity: 0;
  animation: mainDropSoft 1s ease-out 0.1s forwards;

  transform: translateX(-50%);
}

.notify-banner__stage{
  height:260px;
}

.notify-banner__stage .sevicecenter__main{
  width:280px;
  bottom:6px;
}

/* 미니 뒷배경 레이어 */
.mypage--02 > .sub-banner--mypage,
.sub-banner--mypage{
  display: block;
  margin-bottom: 40px;
}

.mypage--02:has(> .sub-banner--mypage){
  padding-top: 0;
}

.mypage--cbd:has(> .sub-banner--mypage){
  padding-top: 0;
}

.student-schedule-page:has(> .sub-banner--mypage){
  max-width: none;
}

.sub-banner--mypage .teacher-banner__stage{
  height: 260px;
}

.sub-banner--mypage .teacher-banner__text{
  color: var(--color-text-strong);
  text-shadow: none;
}

.sub-banner--mypage .teacher-banner__text .t-sub{
  margin: 0 0 10px;
}

.sub-banner--mypage .teacher-banner__text .t-title{
  margin: 0;
}

.sub-banner--mypage .mypage-banner__main{
  position: absolute;
  z-index: 4;
  width: 270px;
  bottom: 20px;
  left: calc(50% + var(--stage-x));
}

.sub-banner--mypage .teacher-banner__text,
.sub-banner--mypage .teacher-banner__stage img{
  animation: none;
  opacity: 1;
}

.sub-banner--mypage .teacher-banner__text{
  transform: translate(-50%, -50%);
}

.sub-banner--mypage .mypage-banner__main{
  transform: translateX(-50%);
}

.course-banner-icon{
  position:absolute;
  left:calc(50% + var(--stage-x));
  bottom:16px;
  transform:translateX(-50%);
  width:280px;
  z-index:2;
  animation: mainDropSoft 1s ease-out 0.1s forwards;
}

.teacher-banner__stage:has(> .course-banner-icon){
  height:260px;
}

.teacher-banner__stage:has(> .course-banner-icon),
.teacher-banner__stage:has(> .leveltest__main),
.notify-banner__stage,
.sub-banner--mypage .teacher-banner__stage{
  --stage-x: 220px;
}

.teacher-banner__stage:has(> .course-banner-icon) .teacher-banner__text,
.teacher-banner__stage:has(> .leveltest__main) .teacher-banner__text,
.notify-banner__stage .teacher-banner__text,
.sub-banner--mypage .teacher-banner__text{
  padding-left: 180px;
}

.teacher-banner__stage:has(> .course-banner-icon) .course-banner-icon{
  left:calc(50% + 165px);
  width:240px;
  bottom:-8px;
}

.leveltest__main {
  width: 500px;
  bottom: 10px;
  left: calc(50% + var(--stage-x));
  position: absolute;
  z-index: 4;

  opacity: 0;
  animation: mainDropSoft 1s ease-out 0.1s forwards;

  transform: translateX(-50%);
}

.teacher-banner__stage:has(> .leveltest__main){
  height:260px;
}

.teacher-banner__stage:has(> .leveltest__main) .leveltest__main{
  width:340px;
  bottom:6px;
}

.banner_floating_img {
  position: absolute;
  right: calc(var(--stage-right) + 200px);
  top: var(--floating-top, 45%);
  transform: translateY(-50%);
  
  width: 300px;
  height: auto;

  pointer-events: none; /* 클릭 방해 안함 */
  animation: float 3s ease-in-out infinite;
}


@keyframes float {
  0% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-12px); }
  100% { transform: translateY(-50%) translateY(0); }
}

.banner_badges {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  z-index: 999;
  pointer-events: none;
}

.banner_badges .badge {
  opacity: 0;
  transform: translateY(24px);
  width: 140px;
}

.banner_badges .badge.show {
  animation: badgeUp 0.6s ease forwards;
}

.banner_badges img {
  width: 300px;
  display: block;
}

.banner_badges_source {
  position: absolute;
  right: calc(50% - 534px);
  bottom: 10px;
  z-index: 999;
  margin: 0;
  color:rgb(229 187 95);
  font-size: var(--pc-fz-caption);
  font-weight: var(--pc-fw-emphasis);
  line-height: var(--pc-lh-caption);
  letter-spacing: 0;
  text-align: right;
  pointer-events: none;
}

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

.intro_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 54px;
    padding: 0 26px;

    font-size: 20px;
    font-weight: var(--pc-fw-title);
    color: var(--color-text);

    border: 1.5px solid #555;
    border-radius: var(--radius-full);

    background: transparent;
    text-decoration: none;

    transition: all 0.25s ease;
}

.fast-slide .intro_btn {
    color: #fff;
    border-color: #fff;
}

.banner__item.freedom-slide > a,
.book-slide a,
.video-slide a,
.animation-slide a,
.fast-slide a,
.trend-slide a{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.banner__item.freedom-slide .banner_text,
.book-slide .banner_text,
.video-slide .banner_text,
.animation-slide .banner_text,
.fast-slide .banner_text,
.trend-slide .banner_text{
  position: relative;
  z-index: 10;
}

.freedom_asset,
.book_asset,
.video_asset,
.animation_asset,
.fast_asset,
.trend_asset{
  position: absolute;
  right: calc(var(--stage-right) + var(--asset-right));
  top: var(--asset-top);
  bottom: var(--asset-bottom);
  width: var(--asset-width);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--asset-y-start));
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}

.freedom_asset--01{
  --asset-right: 260px;
  --asset-bottom: 30px;
  --asset-width: 300px;
  --asset-y-start: 40px;
}

.freedom_asset--02{
  --asset-right: 20px;
  --asset-top: 110px;
  --asset-bottom: auto;
  --asset-width: 320px;
  --asset-y-start: 40px;
}

/* 현재 슬라이드일 때만 올라오기 */
.banner__slider .slick-current .freedom_asset{
  opacity: 1;
  transform: translateY(0);
}

.banner__slider .slick-current .freedom_asset--01{
  transition-delay: .25s;
}

.banner__slider .slick-current .freedom_asset--02{
  transition-delay: .4s;
}

/* 책 이미지 */
.book_asset{
  --asset-right: 5px;
  --asset-bottom: 35px;
  --asset-width: 600px;
}

.banner__slider .slick-current .book_asset{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .25s;
}

.video_asset{
  --asset-right: -40px;
  --asset-bottom: 140px;
  --asset-width: 860px;
}

.animation_asset{
  --asset-right: -90px;
  --asset-bottom: 28px;
  --asset-width: 820px;
}

/* 메인 에셋 */
.fast_asset{
  --asset-right: 44px;
  --asset-bottom: 78px;
  --asset-width: 600px;
}

.trend_asset{
  --asset-right: 30px;
  --asset-bottom: 0px;
  --asset-width: 560px;
}

.banner__slider .slick-current .video_asset,
.banner__slider .slick-current .animation_asset,
.banner__slider .slick-current .fast_asset,
.banner__slider .slick-current .trend_asset{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .2s;
}