@font-face {
    font-family: "Pretendard";
    src: url("/b_assets/PretendardVariable.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root {
  --header-h: 100px;
  --iphone14: 500px;
  --iphone12: 410px;
}
/* Reset-ish */
* { box-sizing: border-box; margin: 0; padding: 0; }
img, video { display: block; max-width: 100%; }

/* Typography & base */
body {
  font-family: "Pretendard", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #1b1f23;
  background: #fff;
  line-height: 1.6;
}
main.content,
.section 
{
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
/* Container: 가운데 정렬 공통 레이아웃 */
.container {
  width: min(1280px, 92vw);
  margin-inline: auto;
}

/* Header */
.site-header {
  position: sticky; /* 스크롤 시 상단 고정 */
  top: 0;
  z-index: 1000;
  background: #ffffffc7; /* 살짝 투명 */
  backdrop-filter: saturate(180%) blur(2px);
  border-bottom: 1px solid #eaecef;
  align-items: center;
  height: var(--header-h);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 0;
  margin: 0 64px;
  width: auto;
}

.logo img {
  width:207px;
  height:75px;
  min-width: 55px;
  overflow: hidden;
  object-fit: cover;
  object-position: left;
}

.nav {
  margin-left: auto;   /* 오른쪽 끝으로 밀기 */
  display: block;
}
.nav > ul {
  list-style: none;
  display: flex;
  gap: clamp(16px, 3vw, 36px);
}
.nav a {
  font-family: "Pretendard";
  text-decoration: none;
  color: #000;
  font-weight: 500;
  font-size: 20px;
}
.nav a:hover {
  color: #5099d2;
  font-weight: 600;
}
.nav li {
  position: relative;
}
.nav-blue-box {
  position: absolute;
  top: 28px;
  width: 100%;
  height: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.4s ease;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left;
  margin-top: 10px;
}
.nav li:hover .nav-blue-box {
  transform: scaleX(1);
  width: 100%;
  opacity: 1;
  visibility: visible;
}

/* 사업영역 서브 메뉴 */
.has-popup { position: relative; }
.has-popup .popup-menu {
  position: absolute; 
  left: 100%;
  top: 100%;
  transform: translate(-40%, 15px) scale(.98);
  min-width: 182px;
  background: #fff; 
  border: 1px solid rgba(17,45,78,0.08);
  box-shadow: 0 9px 6px rgba(0,0,0,0.12);
  filter: drop-shadow(0 9px 6px rgba(0,0,0,.12));
  border-radius:6px;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events:none;
  transition: opacity 0.15s ease, transform .15s ease, visibility 0s .15s;
  z-index: 1000;
}
.has-popup::after {
  content: "";
  position: absolute;
  left:0; right: 0;
  top: 100%;
  height: 46px;
}
.submenu { 
  display:flex;
  flex-direction: column;
  list-style:none;
  margin:0;
  padding:8px 2px;
  gap: 2px;
}
.submenu li {
  padding-bottom: 0px;
}
.submenu li a{
  display:block; 
  padding:6px 15px; 
  border-radius:10px;
  color:#939393;
  font-weight:400;
  font-size: 16px;
}
.submenu li a:hover {
  /*background:#f3f7fd;*/
  color:#5099d2;
  font-weight: 600;
}
.submenu li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 20%;
  bottom: auto;
  height: 1px;
  background-color: #e2e2e2;
  border-radius: 2px;
}
.has-popup:hover .popup-menu {
  top: 100%;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translate(-42%, 22px) scale(1);
  transition-delay: 0s;
}

.hero-video {
  display: flex;
  position: relative;
  width: 100%;
  margin-top: calc(-1 * var(--header-h));
  height: calc(100svh + var(--header-h));
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid #e8eef5;
  place-items: center;
  place-content: center;
}

.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1) brightness(1) saturate(1);
  transform: scale(1.02);
  scroll-snap-align: start;
}

.hero-overlay {
  position: relative;
  z-index: 1;
  min-height: 100px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  width: min(1200px, 92vw);
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
  padding: 0 16px;
}
.reveal-left {
  -webkit-mask: linear-gradient(0deg, #000 0 70%, transparent 100%) bottom/100% 0% no-repeat;
  mask:         linear-gradient(0deg, #000 0 70%, transparent 100%) bottom/100% 0% no-repeat;
  animation: reveal-sweep 1s ease-out .1s forwards;
}
@keyframes reveal-sweep {
  to { 
    -webkit-mask-size: 120% 120%;
    mask-size: 120% 120%;
  }
}
.hero-overlay h1 {
  font-family: "Pretendard";
  font-size: 38px;
  font-weight: 500;
  margin-bottom: 5px;
  height: 60px;
  overflow:hidden;
}
.hero-overlay p {
  font-family: "Pretendard";
  font-size: 18px;
  color: #acacac;
  margin-top: -13px;
  overflow:hidden;
}
.animate-text span {
  display:inline-block;
  opacity:0;
  transform-origin: left center;
  transform: translateY(30px) scaleY(90%);
  /*animation: rise 1.5s forwards ease;*/
  animation-name: rise;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}
.animate-text2 span {
  display:inline-block;
  opacity:0;
  transform-origin: left center;
  transform: translateY(30px) scaleY(90%);
  /*animation: rise 1.5s forwards ease;*/
  animation-name: rise;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}
.da0 {animation-delay:0.04s;}
.da1 {animation-delay:0.08s;}
.da2 {animation-delay:0.12s;}
.da3 {animation-delay:0.16s;}
.da4 {animation-delay:0.2s;}
.da5 {animation-delay:0.24s;}
.da6 {animation-delay:0.28s;}
.da7 {animation-delay:0.32s;}
.da8 {animation-delay:0.36s;}
.da9 {animation-delay:0.4s;}
.da10 {animation-delay:0.44s;}
.da11 {animation-delay:0.48s;}
.da12 {animation-delay:0.52s;}
.da13 {animation-delay:0.56s;}
.da14 {animation-delay:0.6s;}
.da15 {animation-delay:0.64s;}
.da16 {animation-delay:0.68s;}
.da17 {animation-delay:0.72s;}
.da18 {animation-delay:0.76s;}
.da19 {animation-delay:0.8s;}
.da20 {animation-delay:0.84s;}
.da21 {animation-delay:0.88s;}
.da22 {animation-delay:0.92s;}
.da23 {animation-delay:0.96s;}
.da24 {animation-delay:1s;}
.da25 {animation-delay:1.04s;}
.da26 {animation-delay:1.08s;}
.da27 {animation-delay:1.12s;}
.da28 {animation-delay:1.16s;}
.da29 {animation-delay:1.2s;}
.da30 {animation-delay:1.24s;}
.da31 {animation-delay:1.28s;}
.da32 {animation-delay:1.32s;}
.da33 {animation-delay:1.36s;}
.da34 {animation-delay:1.4s;}
.da35 {animation-delay:1.44s;}
.da36 {animation-delay:1.48s;}
.da37 {animation-delay:1.52s;}
.da38 {animation-delay:1.56s;}
.da39 {animation-delay:1.6s;}

.db0 {animation-delay:0.6s;}
.db1 {animation-delay:0.61s;}
.db2 {animation-delay:0.62s;}
.db3 {animation-delay:0.63s;}
.db4 {animation-delay:0.64s;}
.db5 {animation-delay:0.65s;}
.db6 {animation-delay:0.66s;}
.db7 {animation-delay:0.67s;}
.db8 {animation-delay:0.68s;}
.db9 {animation-delay:0.69s;}
.db10 {animation-delay:0.7s;}
.db11 {animation-delay:0.71s;}
.db12 {animation-delay:0.72s;}
.db13 {animation-delay:0.73s;}
.db14 {animation-delay:0.74s;}
.db15 {animation-delay:0.75s;}
.db16 {animation-delay:0.76s;}
.db17 {animation-delay:0.77s;}
.db18 {animation-delay:0.78s;}
.db19 {animation-delay:0.79s;}
.db20 {animation-delay:0.8s;}
.db21 {animation-delay:0.81s;}
.db22 {animation-delay:0.82s;}
.db23 {animation-delay:0.83s;}
.db24 {animation-delay:0.84s;}
.db25 {animation-delay:0.85s;}
.db26 {animation-delay:0.86s;}
.db27 {animation-delay:0.87s;}
.db28 {animation-delay:0.88s;}
.db29 {animation-delay:0.89s;}
.db30 {animation-delay:0.9s;}
.db31 {animation-delay:0.91s;}
.db32 {animation-delay:0.92s;}
.db33 {animation-delay:0.93s;}
.db34 {animation-delay:0.94s;}
.db35 {animation-delay:0.95s;}
.db36 {animation-delay:0.96s;}
.db37 {animation-delay:0.97s;}
.db38 {animation-delay:0.98s;}
.db39 {animation-delay:0.99s;}
.db40 {animation-delay:1s;}
.db41 {animation-delay:1.01s;}
.db42 {animation-delay:1.02s;}
.db43 {animation-delay:1.03s;}
.db44 {animation-delay:1.04s;}
.db45 {animation-delay:1.05s;}
.db46 {animation-delay:1.06s;}
.db47 {animation-delay:1.07s;}
.db48 {animation-delay:1.08s;}
.db49 {animation-delay:1.09s;}
.db50 {animation-delay:1.1s;}
.db51 {animation-delay:1.11s;}
.db52 {animation-delay:1.12s;}
.db53 {animation-delay:1.13s;}
.db54 {animation-delay:1.14s;}
.db55 {animation-delay:1.15s;}
.db56 {animation-delay:1.16s;}
.db57 {animation-delay:1.17s;}
.db58 {animation-delay:1.18s;}
.db59 {animation-delay:1.19s;}
.db60 {animation-delay:1.2s;}
.db61 {animation-delay:1.21s;}
.db62 {animation-delay:1.22s;}
.db63 {animation-delay:1.23s;}
.db64 {animation-delay:1.24s;}
.db65 {animation-delay:1.25s;}
.db66 {animation-delay:1.26s;}
.db67 {animation-delay:1.27s;}
.db68 {animation-delay:1.28s;}
.db69 {animation-delay:1.29s;}
.db70 {animation-delay:1.3s;}
.db71 {animation-delay:1.31s;}
.db72 {animation-delay:1.32s;}
.db73 {animation-delay:1.33s;}
.db74 {animation-delay:1.34s;}
.db75 {animation-delay:1.35s;}
.db76 {animation-delay:1.36s;}
.db77 {animation-delay:1.37s;}
.db78 {animation-delay:1.38s;}
.db79 {animation-delay:1.39s;}
.db80 {animation-delay:1.4s;}
.db81 {animation-delay:1.41s;}
.db82 {animation-delay:1.42s;}
.db83 {animation-delay:1.43s;}
.db84 {animation-delay:1.44s;}
.db85 {animation-delay:1.45s;}
.db86 {animation-delay:1.46s;}
.db87 {animation-delay:1.47s;}
.db88 {animation-delay:1.48s;}
.db89 {animation-delay:1.49s;}
.db90 {animation-delay:1.5s;}
.db91 {animation-delay:1.51s;}
.db92 {animation-delay:1.52s;}
.db93 {animation-delay:1.53s;}
.db94 {animation-delay:1.54s;}
.db95 {animation-delay:1.55s;}
.db96 {animation-delay:1.56s;}
.db97 {animation-delay:1.57s;}
.db98 {animation-delay:1.58s;}
.db99 {animation-delay:1.59s;}
.db100 {animation-delay:1.6s;}
.db101 {animation-delay:1.61s;}
.db102 {animation-delay:1.62s;}
.db103 {animation-delay:1.63s;}
.db104 {animation-delay:1.64s;}
.db105 {animation-delay:1.65s;}
.db106 {animation-delay:1.66s;}
.db107 {animation-delay:1.67s;}
.db108 {animation-delay:1.68s;}
.db109 {animation-delay:1.69s;}
.db110 {animation-delay:1.7s;}
.db111 {animation-delay:1.71s;}
.db112 {animation-delay:1.72s;}
.db113 {animation-delay:1.73s;}
.db114 {animation-delay:1.74s;}
.db115 {animation-delay:1.75s;}
.db116 {animation-delay:1.76s;}
.db117 {animation-delay:1.77s;}
.db118 {animation-delay:1.78s;}
.db119 {animation-delay:1.79s;}
.db120 {animation-delay:1.8s;}
.db121 {animation-delay:1.81s;}
.db122 {animation-delay:1.82s;}
.db123 {animation-delay:1.83s;}
.db124 {animation-delay:1.84s;}
.db125 {animation-delay:1.85s;}
.db126 {animation-delay:1.86s;}
.db127 {animation-delay:1.87s;}
.db128 {animation-delay:1.88s;}
.db129 {animation-delay:1.89s;}
.db130 {animation-delay:1.9s;}
.db131 {animation-delay:1.91s;}
.db132 {animation-delay:1.92s;}
.db133 {animation-delay:1.93s;}
.db134 {animation-delay:1.94s;}
.db135 {animation-delay:1.95s;}
.db136 {animation-delay:1.96s;}
.db137 {animation-delay:1.97s;}
.db138 {animation-delay:1.98s;}
.db139 {animation-delay:1.99s;}
.db140 {animation-delay:2s;}
.db141 {animation-delay:2.01s;}
.db142 {animation-delay:2.02s;}
.db143 {animation-delay:2.03s;}
.db144 {animation-delay:2.04s;}
.db145 {animation-delay:2.05s;}
.db146 {animation-delay:2.06s;}
.db147 {animation-delay:2.07s;}
.db148 {animation-delay:2.08s;}
.db149 {animation-delay:2.09s;}
.db150 {animation-delay:2.1s;}
.db151 {animation-delay:2.11s;}
.db152 {animation-delay:2.12s;}
.db153 {animation-delay:2.13s;}
.db154 {animation-delay:2.14s;}
.db155 {animation-delay:2.15s;}


@keyframes rise {
  to { transform: translateY(0) scaleY(100%); opacity: 1; }
}
.span-ani {
  white-space: pre;
}
.mobile-visible {display:none;}
.menu-toggle {
  background:none; border:none;cursor:pointer;
  width: 24px; height: 24px;
  margin-left: auto;
  margin-right: 20px;
}
.mobile-menu {
  position: absolute;
  top: 71px;
  right: 16px;
  background: #fffffff0;
  border: 1px solid #ddd;
  padding: 8px 0;
  width: 146px;
  z-index:1000;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  border-radius: 4px;
  display:none;
}
.mobile-menu ul {
  list-style: none; margin:0; padding:0;
}
.mobile-menu li a {
  display:block;
  padding: 10px 16px;
  text-decoration: none;
  color: #333;
}
.mobile-menu li a:hover { background: #f5f5f5;}
.mobile-menu.is-open { display: block;}

/* Main content: 모두 가운데 정렬 공통 */
.content {
  padding-block: 80px;
  overflow: hidden;
}

.section { 
  padding-block: clamp(30px, 40px, 80px);
  font-family: "Pretendard";
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: center;
  width: min(1200px, 92vw);
  margin: 0 auto;
}

.grid.reverse { direction: rtl; }           /* 간단한 좌우 전환 */
.grid.reverse > * { direction: ltr; }       /* 자식은 정상 방향 */

.text h3 {
  color: #737373;
  font-size: 1.13rem;
  margin-bottom: 4px;
  font-weight: 200;
}

.text h2 {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.5;
  margin-bottom: -3px;
  letter-spacing: -0.01em;
  font-weight:800px
}

.btn {
  display: inline-block;
  background: #003361;
  color: #fff;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 400;
  transition: transform .08s ease, background .2s ease;
  margin-top: 40px;
}
.btn:hover { background:#006ac9; transform: translateY(-2px); }
.media {
  overflow: hidden;
  width: 544px;
  height: 432px;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.media03 {
  overflow: hidden;
  width: 544px;
  height: 432px;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.media img {
  width: 544px;
  height: 432px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.media03 img {
  width: auto;
  height: auto;
  min-width: 170%;
  min-height: 100%;
  object-fit: cover;
  object-position: -150px -135px;
  transition: transform 0.4s ease;
}

.media03:hover img {
  transform: scale(1.08);
}
.media:hover img {
  transform: scale(1.08);
}
/* Responsive tweaks */
@media (max-width: 1024px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .site-header .container { padding: 10px 0; }
  .grid { grid-template-columns: 1fr; }
  .nav ul { gap: 16px; }
}

.fade-up {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fade-up { transition: none; animation: none; }
}

@supports (animation-timeline: view()) {
    .fade-up {
        opacity: 0;
        transform: translateY(68px);
        
        animation-name: fadeUp;
        animation-duration: 2s;
        animation-timing-function: ease;
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
        will-change: opacity, transform;
        animation-delay: 0.12s;
    }
    @keyframes fadeUp {
        from { opacity: 0; transform: translateY(68px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}
.partners-wrap,
.footer-wrap {
  /*width: min(1200px, 92vw);*/
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  overflow-x: clip;
}
.partners-wrap::before,
.partners-wrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; width: 60px;
    pointer-events: none;
}
/* Partners Section */
.partners {
  padding: clamp(30px, 20vw, 280px) 0 clamp(12px, 12px, 34px) 0;
  overflow: hidden;
}
.partners-eyebrow {
  text-align: center;
  letter-spacing: .06em;
  color: #103C61;
  font-weight: 500;
  font-size: 1.14rem;
  margin-bottom: 6px;
}
.partners-title {
  text-align: center;
  font-size: clamp(18px, 2.2vw, 29px);
  font-weight: 600;
  color: #1b2430;
  margin-bottom: clamp(28px, 6vw, 90px);
}
/* 로고 줄 */
.logo-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 60px);
  width: max-content;
  animation: marquee-left 20s linear infinite;
}
.logo-row::after {
  content: attr(data-duplication);
}
.logo-marquee {
  overflow: hidden;
  overflow-x: clip;
  display: inline-flex;
  white-space: nowrap;
}
.logo-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 15s linear infinite;
}
.logo-group {
  list-style: none;
  margin: 0;
  padding:0 clamp(12px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 60px);
  flex: 0 0 auto;
}
.logo-group img {
  height: clamp(30px, 5vw, 84px);
  width: auto;
  display: block;
  opacity: .95;
  transition: transform .15s ease, opacity .2s ease;
}
.logo-group img:hover {
  transform: translateY(-2px);
  opacity: 1;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-row { animation: none;}
}
.logo-row li {
  display: grid;
  place-items: center;
}
.logo-row img {
  height: clamp(30px, 5vw, 84px); /* 높이만 고정, 가로 자동 */
  width: auto;
  filter: none;
  transition: transform .15s ease, filter .2s ease, opacity .2s ease;
  opacity: .95;
}
.logo-row img:hover {
  transform: translateY(-2px);
  opacity: 1;
}
/* Footer */
.site-footer {
  background: #1c2a4f;
  color: #c9d4e5;
  padding: 28px 0 28px;
  width: 100%;
  overflow: hidden;
}
.footer-wrap {
  width: min(1280px, 92vw);
  margin-left: 64px;
  margin-right: auto;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}
.footer-brand img {
  height: auto;
  width: 135px;
  margin: 6px 0;
}
.footer-right {
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.company-line {
  font-size: 13px;
  color: #c9d4e5;
  opacity: .9;
  word-break: keep-all;
}
@media (max-width: 1190px) {
  .hero-overlay h1 {
    font-size: clamp( 12px, 2.8vw, 38px);
    height: auto;
  }
  .hero-overlay p {
    margin-top: 0px;
    font-size: clamp( 8px, 1.51vw, 18px);
    text-wrap-style: balance;
  }
}
@media (max-width: 780px) {
  .site-header .container {
    margin: 0 clamp(5px, 3.33vw, 64px);
  }
  .site-header {
    height: 80px;
  }
  .nav a {
    font-size: clamp(14px, 1.5vw, 20px);
  }
  .hero-overlay h1 {
    font-size: clamp( 12px, 4.7vw, 38px);
  }
  .hero-overlay p {
    margin-top: 0px;
    font-size: clamp( 8px, 3.5vw, 18px);
    text-wrap-style: balance;
  }
  .footer-wrap {
    margin-left: clamp(2px, 3.3vw, 64px);
  }
  .footer-brand img {
    visibility: hidden;
    width: 5px;
  }
  .grid.reverse {
    direction: ltr;
  }
  .media, .media03 {
    width: auto;
    height: 200px;
  }
  .media img, .media03 img {
    width: 700px;
    height: auto;
    min-width: 360px;
    object-fit: cover;
  }
  .media03 img {
    object-position: left 10%;
    min-width: auto;
    min-width: 300px;
    max-height: 220px;
  }
}
@media (max-width: 700px) {
  .nav {display:none;}
  /*.logo img {width:207px;}*/
  .logo img {
    width: 80%;
    height: 80%;
  }
  .mobile-visible {display:block;}
}
/* reveal */
.reveal{opacity:0;transform:translateY(24px);will-change:transform,opacity}
.reveal.is-visible{animation:rise-in 1.1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rise-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-visible{animation:none;opacity:1;transform:none}
}
/* 반응형 */
@media (max-width: 900px) {
  .logo-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .company-line { font-size: .85rem; }
}