:root{
    --navy:#0a2856;
    --hold: .5s;         /* 로고 정지 */
    --grow: .1s;          /* 확대 시간 */
    --fade-bg: .6s;      /* 남색 배경 페이드아웃 */
    --copy-delay: calc(var(--hold) + var(--grow) + var(--fade-bg) - .2s);
  }
#wrap{
  background-color: white;
}
  *{box-sizing:border-box}
  html,body{min-height:100%;margin:0;background:#000;}
  .hero{
    position:relative;
    height:100dvh;
    overflow:hidden;
    font-family: ui-sans-serif, -apple-system, "Noto Sans KR", Helvetica, Arial, sans-serif;
  }
  .con{
    background-color: white;
  }

  /* 1) 배경 비디오 */
  .hero video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .main{
    height: 100dvh;
    align-content: center;
    text-align: center;
  }
  .int{
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*height: 80dvh;*/
    flex-wrap: wrap;
    align-content: center;
    gap: 30px;
}
.txt{
  justify-items: left;
align-content: center;
}
.ytb{
  display: grid
;
    flex-wrap: wrap;
    flex-direction: row;
    /* width: 99%; */
    gap: 20px;
    /* padding: 0 5% 0 5%; */
    grid-template-columns: repeat(3, 1fr);
    width: auto;
    max-width: 1400px;
    /* left: 50%; */
    position: relative;
    justify-content: center;
    justify-items: center;
    justify-self: center;
    margin-bottom: 140px;
}
.kimg {
  width: 1400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.k1 {
  display: flex;
  flex-direction: row;
  gap: 20px;
    justify-content: center
}
.k1 img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ki1 {
  height: 343px;
}
.ki2 {
  height: 350px;
}
.k2 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  height: 380px;
      justify-content: center;
      margin-bottom: 100px;

}
.k2 img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ptitle {
    display: flex;
    width: 74%;
    height: 100px;
    border: 2px solid #959fb5;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 180px;
    place-self: center;
}
.ptitle p {
    font-size: 24px;
    font-weight: 500;
    color: #434a59;
}
  }
  /* 2) 남색 오버레이 + SVG 마스크(로고 구멍) */
  .mask-layer{
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none;
    opacity:1;
    animation: overlay-fade var(--fade-bg) ease forwards;
    animation-delay: calc(var(--hold) + var(--grow)); /* 확대 끝난 뒤 페이드아웃 */
  }


p{
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 44px; /* 146.667% */
}
h1{
    color: #282828;
  text-align: center;
  font-family: Pretendard;
  font-size: 90px;
  font-style: normal;
  font-weight: 900;
  line-height: 100px; /* 111.111% */
}
h2{
    color: #ADADAD;
  text-align: center;
  font-family: Pretendard;
  font-size: 30px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}
#footer{
  background-color: #14254A !important;
}
.footer-inner{
  place-items: center;
}
#footer p{
  color: white;
}
  /* 로고 구멍이 커지는 애니메이션 */
  #hole{
    /* CSS transform을 SVG 좌표계 기준으로 정확히 적용 */
    transform-origin: 50% 50%;
    animation: hole-grow var(--grow) cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: var(--hold); /* 0.5초 정지 후 시작 */
  }

  @keyframes hole-grow{
    from { transform: scale(0.12); }  /* 시작은 아주 작은 구멍 */
    to   { transform: scale(18); }     /* 화면을 덮을 만큼 크게 */
  }

  @keyframes overlay-fade{
    to { opacity:0; }
  }

  /* 3) 카피: 배경이 거의 사라질 때 등장 */
  .copy{
    position:absolute; inset:0;
    display:flex; flex-direction:column; gap:.6rem;
    align-items:center; justify-content:center;
    text-align:center;
    color:#fff;
    opacity:0; transform:translateY(10px);
    text-shadow:0 2px 12px rgba(0,0,0,.38);
    padding:0 6vw;
    animation: copy-in .7s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: var(--copy-delay);
  }
  @keyframes copy-in{ to{opacity:1; transform:translateY(0)} }

  .eyebrow{ font-size:.95rem; letter-spacing:.06em; opacity:.85 }
  .headline{
    margin:.35em 0 .15em;
    font-size:clamp(2rem,4.6vw,3.6rem);
    font-weight:800; line-height:1.15;
    color: white;
  }
  .sub{ font-size:clamp(1rem,1.8vw,1.1rem); opacity:.9 }

  /* 모션 최소화 환경 배려 */
  @media (prefers-reduced-motion: reduce) {
    :root{ --hold:0s; --grow:.01s; --fade-bg:.01s; --copy-delay:.02s; }
  }

@keyframes scroll {
    0% {
        opacity: 0;
    }
    10% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}
/*
** media
*/
@media screen and (max-width: 768px) {
    .main svg{
      width: 18%;
    }
    h2{
      font-size: 18px !important;
    }
    h1{
      font-size: 60px;
    }
    p{
      font-size: 18px;
      line-height: normal;
    }
    .int img{
      width: 75%;
left: 2.5%;
position: relative;
    }
    .txt{
      justify-items:
        center;
        margin-bottom: 90px;
      }
      .ytb{
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
        padding: 20px;
      }
      .kim{
        margin-bottom: 100px;
      }
      .footer-inner {
        padding: 30px;
      }
      .kimg {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: hidden;
      }

      .k1 {
        display: flex;
        flex-direction: row;
        gap: 10px;
          justify-content: center
      }
      .k1 img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .ki1 {
        height: 154px;
      }
      .ki2 {
        height: 160px;
      }
      .k2 {
        display: flex;
        flex-direction: row;
        gap: 20px;
        height: 154px;
            justify-content: center;
            margin-bottom: 100px;

      }
      .k2 img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .ptitle {
          display: flex;
          width: 90%;
          height: 100px;
          border: 2px solid #959fb5;
          padding: 0 20px;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          margin-bottom: 100px;
          place-self: center;
      }
      .ptitle p {
          font-size: 18px;
          font-weight: 500;
          color: #434a59;
          text-align: left;
          padding-right: 10px;
      }
    }

}