@font-face {
    font-family: "Pretendard";
    font-weight: 800;
    font-display: block;
    src: local("Pretendard ExtraBold"), url("/m/event2/font/Pretendard-ExtraBold.woff2") format("woff2"), url("/m/event2/font/Pretendard-ExtraBold.woff") format("woff");
  }
  
  @font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-display: block;
    src: local("Pretendard Bold"), url("/m/event2/font/Pretendard-Bold.woff2") format("woff2"), url("/m/event2/font/Pretendard-Bold.woff") format("woff");
  }
  
  
  @font-face {
    font-family: "Pretendard";
    font-weight: 600;
    font-display: block;
    src: local("Pretendard SemiBold"), url("/m/event2/font/Pretendard-SemiBold.woff2") format("woff2"), url("/m/event2/font/Pretendard-SemiBold.woff") format("woff");
  }
  
  @font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-display: block;
    src: local("Pretendard Medium"), url("/m/event2/font/Pretendard-Medium.woff2") format("woff2"), url("/m/event2/font/Pretendard-Medium.woff") format("woff");
  }
  
  html { font-size: 16px; }
  .customer-suggestion { overflow: initial;}
  .customer-suggestion * { font-family: 'Pretendard'; color: #333950; }
  .customer-suggestion .visual { position: relative; max-height: 680px; overflow: hidden; }
  .customer-suggestion .visual .video-wrap { height: 100vw; }
  .customer-suggestion .visual .video-content { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%); }
  .customer-suggestion .visual .title { position: absolute; top: 10vw; left: 50%; display: flex; align-items: center; flex-direction: column; width: 100%; text-align: center; transform: translateX(-50%); }
  .customer-suggestion .visual h2 { font-family: 'OneShinhan'; font-size: min(8vw, 54px); font-weight: 700; line-height: 1.44; color: #fff; letter-spacing: -1.06px;}
  .customer-suggestion .visual .logo { width: 30vw; margin-top: 3vw; }
  .customer-suggestion .content { display: flex; flex-direction: column; gap: 72px; padding-top: 60px; }
  .section { display: flex; flex-direction: column; margin: 0 1.25rem; }
  .section-inline { display: flex; flex-direction: column; gap: 2.5rem; }
  .section-card { padding-top: 2.5rem; border-radius: 1.25rem; overflow: hidden; }
  .section-card .video-wrap { position: relative; }
  .section-card .video-content { position: absolute; left: 50%; transform: translateX(-50%); }
  .section-title { text-align: center; letter-spacing: -0.5px; z-index: 1; }
  .bg .section-title * { color: #fff; }
  .section-title h3 { font-size: 1.75rem; font-weight: 800; line-height: 1.36; color: #111; }
  .section-title p { margin-top: 1rem; font-size: 1rem; font-weight: 500; line-height: 1.63; }
  .video-content { width: 100%; }

  .section-check { background: linear-gradient(to right, #ae86fe, #a07bf3); }
  .section-check .video-wrap { height: 82vw; }
  .section-check .video-content { top: -11vw;  width: 110vw; }
  .section-process { background-color: #ebf3ff; }
  .section-gift { background-color: #ffecf7; }
  .section-gift .video-wrap { height: 51.111vw; }
  .section-gift .video-content { width: 146.11vw; }
  .section-inquiry .video-wrap { height: 61.388vw; }
  .section-inquiry .video-content { width: 100vw; }
  
  .count-slide { display: flex; gap: 20px; margin: 2.5rem -20px 0; padding: 0 20px; overflow-y: auto; scroll-snap-type: x mandatory; scroll-padding: 20px; }
  .count-item { position: relative; flex: none; width: 55.556vw; aspect-ratio: 0.8; padding: 32px 24px; background-color: #ebf3ff;  border-radius: 1.25rem; scroll-snap-align: start; font-weight: 800; letter-spacing: -0.5px; box-sizing: border-box; overflow: hidden; }
  .count-title { font-size: 1rem; line-height: 1.375; }
  .count-number { position: relative; display: flex; align-items: flex-end; margin-top: 0.75rem; font-size: 1.125rem; z-index: 1; }
  .count-number strong { font-size: 2.25rem; font-weight: 800; line-height: 0.72; }
  .count-video { position: absolute; right: 0; bottom: 0; display: flex; width: 39.44vw; aspect-ratio: 1; z-index: 0; }
  .count-video.folder, .count-video.hand { transform: scale(1.1); }
  .count-video.folder { bottom: -3vw; }
  
  .improve-wrap { display: flex; flex-direction: column; gap: 16px; margin-top: 2.5rem; }
  .improve-item { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; justify-content: center; height: 132px; font-size: 1.125rem; font-weight: 700; border-radius: 1.25rem; box-shadow: 0.25rem 0.25rem 1.5rem 0 rgba(0, 0, 0, 0.12); letter-spacing: -0.5px; }
  .improve-item * { color: #111; }
  .improve-number { display: flex; align-items: flex-end; font-size: 1.5rem; font-weight: 800; line-height: 1.41; }
  .improve-number .lottie { height: 2.5rem; }
  .improve-status { display: flex; align-items: center; gap: 0.25rem; }
  .improve-status::after { content: ''; display: flex; width: 1.75rem; aspect-ratio: 1; background-size: cover; }
  .improve-status.select::after { background-image: url('/mobilealpha/public/images/customerSuggestion_hand.png'); }
  .improve-status.process::after { background-image: url('/mobilealpha/public/images/customerSuggestion_balloon.png'); }
  .improve-status.complete::after { background-image: url('/mobilealpha/public/images/customerSuggestion_firework.png'); }

  .board-wrap { display: flex; flex-direction: column; gap: 0.75rem; margin: 40px 10px 0; }
  .board-item { padding: 1.25rem; border-radius: 1rem; background-color: #e7f4ff; letter-spacing: -0.5px; }
  .board-item.customer { background-color: #f1ebff; }
  .board-item.customer .board-title::before { background-image: url('/mobilealpha/public/images/customerSuggestion_a.png'); }
  .board-title { display: flex; align-items: center; gap: 8px; color: #111; font-size: 1.125rem; font-weight: 700; line-height: 1.44; }
  .board-title::before { content: ''; display: block; width: 2.5rem; aspect-ratio: 1; flex: none; border-radius: 50%; background-image: url('/mobilealpha/public/images/customerSuggestion_q.png'); background-size: cover; }
  .board-content { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 600; line-height: 1.71; word-break: keep-all; }
  
  .btn-link { position: sticky; bottom: 40px; display: flex; align-items: center; justify-content: center; width: calc(100% - 40px); height: 3.125rem; margin: 0 auto; color: #fff; font-size: 1.125rem; font-weight: 800; line-height: 1.33; background-color: rgba(0, 0, 0, 0.8); border-radius: 100px; backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s; z-index: 10; }
  .btn-link::after { content: ''; display: inline-flex; width: 1.25rem; aspect-ratio: 1; margin-left: 0.25rem; background-image: url('/mobilealpha/public/images/customerSuggestion_eyes.png'); background-size: cover; vertical-align: -0.25rem; }

  .customer-suggestion .footer { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 72px 1.25rem 0; padding: 2.5rem 0 3.5rem; font-size: 13px; font-weight: 500; line-height: 1.53; letter-spacing: -0.5px; border-top: 1px solid #eee; text-align: center; }
  .customer-suggestion .footer img { width: 144px; }
  .customer-suggestion .footer p { color: rgba(51, 57, 80, 0.6); }

  .lottie { display: flex; }
  .section-card .lottie { margin-top: 1.875rem; }
  .is-pc { display: none; }

  video::-webkit-media-controls { display: none; }
  
  @media screen and (min-width: 768px) {
    html { font-size: 24px; }
    .customer-suggestion .visual { height: 680px; }
    .customer-suggestion .visual .video-wrap { height: 680px; }
    .customer-suggestion .visual .title { top: 88px; }
    .customer-suggestion .visual h2 { line-height: 1.25; letter-spacing: -1.9px; }
    .customer-suggestion .visual .logo { width: 10rem; margin-top: 28px; }
    .customer-suggestion .content { gap: 140px; width: 1020px; margin: 0 auto; padding: 120px 0; }
    .section { margin: 0; }
    .section-inline { flex-direction: row; }
    .section-inline .section-card { flex-direction: column; height: auto; }
    .section-inline .section-card .section-title { width: auto; }
    .section-card { flex: 1 0 auto; flex-direction: row; align-items: center; justify-content: center; height: 480px; padding: 0; }
    .section-card.reverse { flex-direction: row-reverse; }
    .section-card .section-title { flex: none; width: 600px; }
    .section-card .section-content { display: flex; align-items: center; flex: 1 1 auto; height: 100%; }
    .section-card .video-wrap { display: flex; justify-content: center; width: 100%; }
    .section-card .video-content { width: auto; height: 100%; }
    .section-title { letter-spacing: -0.75px; }
    .section-title p { font-weight: 600; }
    .section-inline .section:first-child .section-title { margin-top: 2rem; }

    .section-check { background: linear-gradient(to top, #aa83fa, #ae86fe); }
    .section-check .video-wrap { height: 600px; }
    .section-check .video-content { top: 50%; margin-top: 20px; margin-left: -40px; transform: translate(-50%, -50%); }
    .section-process { padding-top: 60px; }
    .section-gift .video-wrap { height: 411px; margin-left: 160px; }
    .section-inquiry { height: 340px; }
    .section-inquiry .video-wrap { height: 312px; }
  
    .count-slide { justify-content: space-between; }
    .count-item { width: 320px; padding: 40px 36px; letter-spacing: -0.75px; }
    .count-video { width: 220px; }
    .count-video.folder { bottom: -3px; }
  
    .improve-wrap { flex-direction: row; }
    .improve-item { flex: 1 1 auto; height: 200px; }
    .improve-status::after { width: 1.667rem; }
  
    .board-wrap { display: flex; flex-direction: column; width: 480px; margin: 52px 0 0; }
    .board-item { padding: 32px; letter-spacing: -0.75px; }
  
    .btn-link { width: 480px; }

    .customer-suggestion .footer { width: 1020px; margin: 0 auto; font-size: 14px; line-height: 1.71; }
    .customer-suggestion .footer img { width: 168px; }

    .is-mo { display: none; }
    .is-pc { display: block; }
  }