/* ksdl.kr 메인배너 전환·애니메이션 참고형 */
.ghero{
  position:relative;
  overflow:hidden;
  min-height:480px;
  background:#22c7c7;
  color:#fff;
  font-family:"Noto Sans KR","Malgun Gothic",Arial,sans-serif;
}
.ghero *{box-sizing:border-box}
.ghero__track{
  position:relative;
  min-height:480px;
}
.ghero__slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  opacity:0;
  visibility:hidden;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.02),
      rgba(255,255,255,.02)
    ),
    var(--hero-bg) center/cover no-repeat;
  transition:
    opacity var(--hero-transition,950ms) ease,
    visibility var(--hero-transition,950ms) ease;
  pointer-events:none;
  will-change:opacity;
}
.ghero__slide.is-active{
  position:relative;
  z-index:2;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.ghero__shell{
  width:min(1120px,calc(100% - 36px));
  min-height:480px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px;
  align-items:center;
}
.ghero__content{
  position:relative;
  z-index:4;
  padding:52px 0;
  opacity:0;
  transform:translate3d(0,18px,0);
}
.ghero__slide.is-active .ghero__content{
  animation:gheroTextIn 760ms cubic-bezier(.22,.61,.36,1) 170ms forwards;
}
.ghero h1{
  margin:0;
  font-size:38px;
  line-height:1.28;
  letter-spacing:-.045em;
  text-shadow:0 1px 1px rgba(0,0,0,.05);
}
.ghero__description{
  margin:13px 0 0;
  color:rgba(255,255,255,.92);
  font-size:14px;
  line-height:1.62;
}
.ghero__button{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:21px;
  padding:0 17px;
  border-radius:999px;
  background:#fff;
  color:#6255a8;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 7px 18px rgba(28,18,70,.14);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ghero__button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 23px rgba(28,18,70,.2);
}
.ghero__button span{
  font-weight:700;
}
.ghero__visual{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ghero__image{
  display:block;
  max-width:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
}
.ghero__visual--single .ghero__image--primary{
  width:min(532px,100%);
  max-height:373px;
  opacity:0;
  transform:translate3d(42px,12px,0) scale(.98);
}
.ghero__slide.is-active
.ghero__visual--single
.ghero__image--primary{
  animation:gheroSingleIn 880ms cubic-bezier(.22,.61,.36,1) 80ms forwards;
}
.ghero__visual--split .ghero__image--primary{
  position:absolute;
  top:58px;
  right:18px;
  z-index:2;
  width:min(590px,96%);
  max-height:282px;
  opacity:0;
  transform:translate3d(42px,-8px,0) scale(.985);
}
.ghero__slide.is-active
.ghero__visual--split
.ghero__image--primary{
  animation:gheroGiftIn 860ms cubic-bezier(.22,.61,.36,1) 90ms forwards;
}
.ghero__visual--split .ghero__image--secondary{
  position:absolute;
  right:82px;
  bottom:-2px;
  z-index:3;
  width:min(404px,73%);
  max-height:296px;
  opacity:0;
  transform:translate3d(0,55px,0) scale(.99);
}
.ghero__slide.is-active
.ghero__visual--split
.ghero__image--secondary{
  animation:gheroHandIn 900ms cubic-bezier(.22,.61,.36,1) 140ms forwards;
}
.ghero__placeholder{
  display:grid;
  place-items:center;
  border:1px dashed rgba(255,255,255,.66);
  border-radius:12px;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);
  font-size:12px;
}
.ghero__placeholder--primary{
  width:90%;
  aspect-ratio:590/282;
}
.ghero__placeholder--secondary{
  position:absolute;
  right:82px;
  bottom:0;
  width:64%;
  aspect-ratio:404/296;
}
.ghero__dots{
  position:absolute;
  left:50%;
  bottom:13px;
  z-index:8;
  display:flex;
  gap:6px;
  transform:translateX(-50%);
}
.ghero__dots button{
  width:6px;
  height:6px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.58);
  cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.ghero__dots button.is-active{
  background:#fff;
  transform:scale(1.08);
}
@keyframes gheroTextIn{
  from{
    opacity:0;
    transform:translate3d(0,18px,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}
@keyframes gheroSingleIn{
  from{
    opacity:0;
    transform:translate3d(42px,12px,0) scale(.98);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}
@keyframes gheroGiftIn{
  from{
    opacity:0;
    transform:translate3d(42px,-8px,0) scale(.985);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}
@keyframes gheroHandIn{
  from{
    opacity:0;
    transform:translate3d(0,55px,0) scale(.99);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}
@media(max-width:820px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:430px;
  }
  .ghero__shell{
    grid-template-columns:1fr .92fr;
    gap:18px;
  }
  .ghero h1{
    font-size:31px;
  }
  .ghero__visual{
    min-height:390px;
  }
  .ghero__visual--split .ghero__image--primary{
    top:74px;
    right:0;
  }
  .ghero__visual--split .ghero__image--secondary{
    right:28px;
  }
}
@media(max-width:620px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:610px;
  }
  .ghero__shell{
    width:min(100% - 24px,1120px);
    grid-template-columns:1fr;
    gap:0;
    text-align:center;
  }
  .ghero__content{
    padding:39px 0 0;
  }
  .ghero h1{
    font-size:28px;
  }
  .ghero__description{
    font-size:13px;
  }
  .ghero__visual{
    min-height:330px;
  }
  .ghero__visual--single .ghero__image--primary{
    width:min(410px,96%);
    max-height:304px;
  }
  .ghero__visual--split .ghero__image--primary{
    top:25px;
    right:50%;
    width:min(420px,95%);
    transform:translateX(50%);
  }
  .ghero__slide.is-active
  .ghero__visual--split
  .ghero__image--primary{
    animation:gheroGiftInMobile 860ms cubic-bezier(.22,.61,.36,1) 90ms forwards;
  }
  .ghero__visual--split .ghero__image--secondary{
    right:50%;
    bottom:0;
    width:min(300px,72%);
    transform:translateX(50%) translateY(55px);
  }
  .ghero__slide.is-active
  .ghero__visual--split
  .ghero__image--secondary{
    animation:gheroHandInMobile 900ms cubic-bezier(.22,.61,.36,1) 140ms forwards;
  }
  .ghero__dots{
    bottom:10px;
  }
}
@keyframes gheroGiftInMobile{
  from{
    opacity:0;
    transform:translateX(50%) translate3d(38px,-8px,0) scale(.985);
  }
  to{
    opacity:1;
    transform:translateX(50%) translate3d(0,0,0) scale(1);
  }
}
@keyframes gheroHandInMobile{
  from{
    opacity:0;
    transform:translateX(50%) translate3d(0,55px,0) scale(.99);
  }
  to{
    opacity:1;
    transform:translateX(50%) translate3d(0,0,0) scale(1);
  }
}
@media(prefers-reduced-motion:reduce){
  .ghero__slide,
  .ghero__content,
  .ghero__image{
    animation:none!important;
    transition:none!important;
  }
  .ghero__slide.is-active .ghero__content,
  .ghero__slide.is-active .ghero__image{
    opacity:1;
    transform:none;
  }
}


/* =========================================================
   메인 배너 여백·모바일 텍스트 가독성 수정 v3
   ========================================================= */

/* 모든 배너 제목과 설명을 흰색·굵게 고정 */
.ghero .ghero__content,
.ghero .ghero__content h1,
.ghero .ghero__description{
  color:#fff!important;
}

.ghero .ghero__content h1{
  font-weight:900!important;
  text-shadow:0 2px 8px rgba(0,0,0,.20)!important;
}

.ghero .ghero__description{
  font-weight:700!important;
  text-shadow:0 1px 5px rgba(0,0,0,.16)!important;
}

/* PC 배너 하단 불필요한 여백 축소 */
@media(min-width:821px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:420px!important;
  }

  .ghero__content{
    padding:38px 0 32px!important;
  }

  .ghero__visual{
    min-height:390px!important;
  }

  .ghero__visual--single .ghero__image--primary{
    max-height:350px!important;
  }

  .ghero__visual--split .ghero__image--primary{
    top:38px!important;
  }

  .ghero__visual--split .ghero__image--secondary{
    bottom:-4px!important;
  }

  .ghero__dots{
    bottom:10px!important;
  }
}

/* 태블릿 높이 축소 */
@media(min-width:621px) and (max-width:820px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:400px!important;
  }

  .ghero__content{
    padding:30px 0!important;
  }

  .ghero__visual{
    min-height:370px!important;
  }

  .ghero__dots{
    bottom:9px!important;
  }
}

/* 모바일 배너: 텍스트를 위로 올리고 하단 여백 제거 */
@media(max-width:620px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:500px!important;
  }

  .ghero__shell{
    align-content:start!important;
  }

  .ghero__content{
    padding:20px 0 0!important;
  }

  .ghero h1{
    margin:0!important;
    color:#fff!important;
    font-size:30px!important;
    font-weight:900!important;
    line-height:1.22!important;
    letter-spacing:-.045em!important;
  }

  .ghero__description{
    margin-top:10px!important;
    color:#fff!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.62!important;
  }

  .ghero__button{
    margin-top:16px!important;
  }

  .ghero__visual{
    min-height:300px!important;
    margin-top:-4px!important;
  }

  .ghero__visual--single .ghero__image--primary{
    width:min(390px,96%)!important;
    max-height:280px!important;
  }

  .ghero__visual--split .ghero__image--primary{
    top:14px!important;
  }

  .ghero__visual--split .ghero__image--secondary{
    bottom:-2px!important;
  }

  .ghero__dots{
    bottom:8px!important;
  }
}

/* 매우 작은 화면 */
@media(max-width:390px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:480px!important;
  }

  .ghero__content{
    padding-top:16px!important;
  }

  .ghero h1{
    font-size:27px!important;
  }

  .ghero__description{
    font-size:13px!important;
  }

  .ghero__visual{
    min-height:286px!important;
  }
}


/* =========================================================
   모바일 배너 재배치 v4
   텍스트 상단 / 이미지 하단 중앙 / 불필요한 하단 여백 제거
   ========================================================= */
@media(max-width:620px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:440px!important;
  }

  .ghero__shell{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    align-content:start!important;
    gap:2px!important;
    padding-top:14px!important;
    padding-bottom:0!important;
  }

  .ghero__content{
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    padding:8px 18px 0!important;
    text-align:left!important;
  }

  .ghero h1{
    max-width:92%!important;
    font-size:27px!important;
    line-height:1.2!important;
  }

  .ghero__description{
    max-width:94%!important;
    margin-top:9px!important;
    font-size:13px!important;
    line-height:1.55!important;
  }

  .ghero__button{
    min-height:44px!important;
    margin-top:14px!important;
    padding:0 18px!important;
    font-size:13px!important;
  }

  .ghero__visual{
    position:relative!important;
    width:100%!important;
    min-height:235px!important;
    margin-top:-4px!important;
    overflow:visible!important;
  }

  /* 휴대폰형 배너 이미지는 크게, 오른쪽 아래에 안정적으로 배치 */
  .ghero__visual--single .ghero__image--primary{
    position:absolute!important;
    right:-8px!important;
    bottom:0!important;
    left:auto!important;
    width:min(330px,76vw)!important;
    max-width:none!important;
    max-height:240px!important;
    object-fit:contain!important;
    transform:none!important;
  }

  /* 상품권+손 이미지 배너 */
  .ghero__visual--split .ghero__image--primary{
    top:8px!important;
    right:10px!important;
    left:auto!important;
    width:min(280px,68vw)!important;
    max-width:none!important;
  }

  .ghero__visual--split .ghero__image--secondary{
    right:-2px!important;
    bottom:0!important;
    left:auto!important;
    width:min(360px,88vw)!important;
    max-width:none!important;
  }

  .ghero__dots{
    bottom:7px!important;
  }
}

/* 아주 작은 모바일 */
@media(max-width:390px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:420px!important;
  }

  .ghero__content{
    padding-right:14px!important;
    padding-left:14px!important;
  }

  .ghero h1{
    font-size:24px!important;
  }

  .ghero__description{
    font-size:12px!important;
  }

  .ghero__visual{
    min-height:220px!important;
  }

  .ghero__visual--single .ghero__image--primary{
    width:min(305px,80vw)!important;
    max-height:220px!important;
  }

  .ghero__visual--split .ghero__image--primary{
    width:min(250px,70vw)!important;
  }

  .ghero__visual--split .ghero__image--secondary{
    width:min(330px,92vw)!important;
  }
}


/* =========================================================
   모바일 배너 중앙정렬 완성형 v5
   - 텍스트 상단 중앙
   - 이미지 하단 중앙
   - 모바일 CTA 버튼 제거
   - 청록·보라 슬라이드 동일 구조
   ========================================================= */
@media(max-width:620px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:620px!important;
  }

  .ghero__shell{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto 1fr!important;
    align-content:start!important;
    gap:0!important;
    padding:0!important;
  }

  .ghero__content{
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    max-width:none!important;
    padding:38px 22px 0!important;
    text-align:center!important;
  }

  .ghero h1{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    color:#fff!important;
    font-size:31px!important;
    font-weight:900!important;
    line-height:1.22!important;
    letter-spacing:-.045em!important;
    text-align:center!important;
  }

  .ghero__description{
    width:100%!important;
    max-width:100%!important;
    margin:16px auto 0!important;
    color:#fff!important;
    font-size:15px!important;
    font-weight:700!important;
    line-height:1.65!important;
    text-align:center!important;
  }

  /* 모바일 배너 안 CTA 버튼 완전 제거 */
  .ghero__button,
  .ghero__content>a,
  .ghero__content .button,
  .ghero__content .btn{
    display:none!important;
  }

  .ghero__visual{
    position:relative!important;
    display:flex!important;
    width:100%!important;
    min-height:385px!important;
    align-items:flex-end!important;
    justify-content:center!important;
    margin:0!important;
    overflow:hidden!important;
  }

  /* 청록색 휴대폰 배너 */
  .ghero__visual--single .ghero__image--primary{
    position:absolute!important;
    right:auto!important;
    bottom:-2px!important;
    left:50%!important;
    width:min(440px,96vw)!important;
    max-width:none!important;
    max-height:390px!important;
    object-fit:contain!important;
    transform:translateX(-50%)!important;
  }

  /* 보라색 상품권+손 배너 */
  .ghero__visual--split .ghero__image--primary{
    position:absolute!important;
    top:18px!important;
    right:auto!important;
    bottom:auto!important;
    left:50%!important;
    width:min(350px,82vw)!important;
    max-width:none!important;
    transform:translateX(-50%)!important;
    z-index:2!important;
  }

  .ghero__visual--split .ghero__image--secondary{
    position:absolute!important;
    right:auto!important;
    bottom:-2px!important;
    left:50%!important;
    width:min(460px,105vw)!important;
    max-width:none!important;
    transform:translateX(-50%)!important;
    z-index:1!important;
  }

  .ghero__dots{
    bottom:9px!important;
    z-index:5!important;
  }
}

/* 390px 이하 */
@media(max-width:390px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:585px!important;
  }

  .ghero__content{
    padding:30px 17px 0!important;
  }

  .ghero h1{
    font-size:27px!important;
  }

  .ghero__description{
    margin-top:13px!important;
    font-size:13px!important;
  }

  .ghero__visual{
    min-height:365px!important;
  }

  .ghero__visual--single .ghero__image--primary{
    width:min(400px,100vw)!important;
    max-height:365px!important;
  }

  .ghero__visual--split .ghero__image--primary{
    width:min(320px,84vw)!important;
  }

  .ghero__visual--split .ghero__image--secondary{
    width:min(420px,110vw)!important;
  }
}


/* =========================================================
   모바일 배너 높이 축소·이미지 크롭 v6
   - 전체 높이 약 470px
   - 청록/보라 슬라이드 동일 높이
   - 이미지 일부 자연스럽게 크롭
   ========================================================= */
@media(max-width:620px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:470px!important;
    height:470px!important;
  }

  .ghero__shell{
    grid-template-rows:auto 1fr!important;
    overflow:hidden!important;
  }

  .ghero__content{
    padding:26px 20px 0!important;
  }

  .ghero h1{
    font-size:28px!important;
    line-height:1.18!important;
  }

  .ghero__description{
    margin-top:12px!important;
    font-size:14px!important;
    line-height:1.55!important;
  }

  .ghero__visual{
    min-height:285px!important;
    height:285px!important;
    margin-top:-4px!important;
    overflow:hidden!important;
  }

  /* 청록색 휴대폰 이미지 */
  .ghero__visual--single .ghero__image--primary{
    bottom:-34px!important;
    width:min(350px,88vw)!important;
    max-height:325px!important;
  }

  /* 보라색 상품권 이미지 */
  .ghero__visual--split .ghero__image--primary{
    top:12px!important;
    width:min(300px,76vw)!important;
  }

  /* 손 이미지는 하단 일부를 크롭 */
  .ghero__visual--split .ghero__image--secondary{
    bottom:-54px!important;
    width:min(390px,98vw)!important;
  }

  .ghero__dots{
    bottom:7px!important;
  }
}

@media(max-width:390px){
  .ghero,
  .ghero__track,
  .ghero__shell{
    min-height:450px!important;
    height:450px!important;
  }

  .ghero__content{
    padding:22px 15px 0!important;
  }

  .ghero h1{
    font-size:25px!important;
  }

  .ghero__description{
    font-size:12px!important;
    line-height:1.5!important;
  }

  .ghero__visual{
    min-height:270px!important;
    height:270px!important;
  }

  .ghero__visual--single .ghero__image--primary{
    bottom:-32px!important;
    width:min(325px,92vw)!important;
    max-height:300px!important;
  }

  .ghero__visual--split .ghero__image--primary{
    width:min(280px,78vw)!important;
  }

  .ghero__visual--split .ghero__image--secondary{
    bottom:-50px!important;
    width:min(365px,102vw)!important;
  }
}