@import url('https://googleapis.com');

:root{
  --black:#000000;
  --dark-grey:#111827;
  --white:#FFFFFF;
  --grey:#B0B0B0;
  --light-grey:#F1F3F5;
  --sky-blue:#EBF3FF;
  --purple:#B366FF;
  --loading:#9F84F0;
  --muted:#8080C0; 

  --font-family:'Pretendard', sans-serif;

  /* header */
  --header-h:80px; /* 상단 헤더 높이 */
  --header-mobile-h:50px; /* 모바일 상단 헤더 높이 */
  --header-background:#5757FF; /* 상단 헤더 배경색 */
  --header-border-bottom:#171717; /* 상단 헤더 하단 테두리 색 */
  --header-scroll-background:#F8F8F8; /* 화면 스크롤을 하단으로 움직이는 경우 상단 헤더 배경색 변경 */
  --header-scroll-border-bottom:#171717; /* 화면 스크롤을 하단으로 움직이는 경우 상단 헤더 하단 테두리 색 변경*/
  --header-scroll-font-color:#000000; /* 화면 스크롤을 하단으로 움직이는 경우 상단 헤더 메뉴 글자 색상 변경 */

  --maxw:1240px; /* 콘텐츠 가로 최대 폭 */
  --minw:300px; /* 콘텐츠 가로 최소 폭 */
  --max-mobile-w:100%; /* 모바일 콘텐츠 가로 최대 폭 */
  --ease:cubic-bezier(.22,.61,.36,1); /* ease-out cubic-bezier(.22,.61,.36,1) */

  /* nav */
  --nav-gap:40px; /* 상단 메뉴 간격 */
  --nav-a-font-size:18px; /* 상단 메뉴 폰트 크기 */
  --nav-a-font-weight:400; /* 상단 메뉴 폰트 굵기 */
  --nav-a-font-color:#ECECED; /* 상단 메뉴 폰트 색상 */
  --nav-a-after-background-color:#171717; /* 상단 메뉴 클릭 배경 색상 */
  --nav-a-hover-color:#000000; /* 상단 메뉴 마우스 오버 폰트 색상 */

  /* 로고 logo */
  --logo-w:165px;
  --logo-h:30px;
  --logo-m-w:110px; /* 모바일 로고 가로 폭 */
  --logo-m-h:20px; /* 모바일 로고 세로 폭 */

  /* language switcher */
  --lang-btn-font-size:12px; /* 언어 선택 버튼 폰트 크기 */
  --lang-btn-font-weight:400; /* 언어 선택 버튼 폰트 굵기 */
  --lang-btn-font-color:#FFFFFF; /* 언어 선택 버튼 폰트 색상 */
  --lang-btn-border-color:#FFFFFF; /* 언어 선택 버튼 테두리 색상 */
  --lang-btn-hover-font-color:#171717; /* 마우스 오버 언어 선택 버튼 폰트 색상 */
  --lang-btn-hover-border-color:#171717; /* 마우스 오버 언어 선택 버튼 테두리 색상 */
  --lang-menu-w:150px; /* 언어 선택 drawer 메뉴 가로 폭 */
  --lang-menu-background-color:#EBEBEB; /* 언어 선택 drawer 메뉴 배경색 */
  --lang-menu-border-color:#171717; /* 언어 선택 drawer 메뉴 테두리 색상 */
  --lang-menu-font-size:13px; /* 언어 선택 drawer 메뉴 폰트 크기 */
  --lang-menu-font-color:#171717; /* 언어 선택 drawer 메뉴 폰트 색상 */
  --lang-menu-li-hover-background-color:#DBDBFF; /* 언어 선택 drawer 메뉴 li 마우스 오버 배경색 */
  --lang-menu-li-hover-color:#000000; /* 언어 선택 drawer 메뉴 li 마우스 오버 글자 색상 */
  --lang-menu-li-a-color:#5757FF; /* 현재 선택한 언어 drawer 메뉴 li a 글자 색상 */
  --lang-menu-li-a-font-weight:600; /* 현재 선택한 언어 drawer 메뉴 li a 글자 굵기 */

  /* pc drawer */
  --pc-drawer-background-color:#ffffff; /* PC 드로어 배경색 */
  --pc-drawer-border-bottom:#ffffff; /* PC 드로어 하단 선 색상 */
  --pc-drawer-box-shadow:#151515; /* PC 드로어 그림자 색상 */
  --pc-drawer-box-width:200px; /* PC 드로어 그림자 너비 */
  --pc-menu-font-size:15px; /* drawer 메뉴 폰트 크기 */
  --pc-menu-font-color:#171717; /* drawer 메뉴 폰트 색상 */
  --pc-menu-li-hover-background-color:#EAEAFF; /* drawer 메뉴 li 마우스 오버 배경색 */
  --pc-menu-li-hover-color:#000000; /* drawer 메뉴 li 마우스 오버 글자 색상 */

  /* mobile burger */
  --mobile-burger-span-background-color:#ffffff; /* 모바일 메뉴 버튼 배경색 */
  --mobile-burger-open-background-color:#000000; /* 모바일 메뉴 버튼 오픈 배경색 */

  /* mobile drawer */
  --mobile-drawer-background-color:#ffffff; /* 모바일 드로어 배경색 */
  --mobile-drawer-font-size:1.35rem; /* 모바일 드로어 메인 메뉴 폰트 크기 */
  --mobile-drawer-font-weight:400; /* 모바일 드로어 메인 메뉴 폰트 굵기 */
  --mobile-drawer-font-small-size:11.5px; /* 모바일 드로어 메인 소메뉴 폰트 크기 */
  --mobile-drawer-font-color:#000000; /* 모바일 드로어 메뉴 폰트 색상 */
  --mobile-drawer-line-color:#171717; /* 모바일 드로어 메뉴 하단 선 색상 */
  --mobile-drawer-btn-font-size:14px; /* 모바일 드로어 메뉴 폰트 크기 */

  /* footer */
  --footer-background-color:#1A1A1A; /* 푸터 배경색 */
  --footer-color:#C9C6C2; /* 푸터 글자 색상 */
  --footer-wordmark-font-size:21px; /* 푸터 워드마크 글자 크기 */
  --footer-wordmark-font-weight:800; /* 푸터 워드마크 글자 굵기 */
  --footer-wordmark-color:#DEDCDA; /* 푸터 워드마크 글자 색상 */
  --footer-tag-font-style:italic; /* 푸터 태그 글자 스타일 */
  --footer-tag-font-size:15px; /* 푸터 태그 글자 크기 */
  --footer-tag-line-height:1.8; /* 푸터 태그 줄 간격 */
  --footer-tag-color:#DEDCDA; /* 푸터 태그 글자 색상 */
  --footer-tag-margin-top:22px; /* 푸터 태그 위쪽 여백 */
  --footer-col-h4-font-size:10.5px; /* 푸터 컬럼 h4 글자 크기 */
  --footer-col-h4-font-weight:600; /* 푸터 컬럼 h4 글자 굵기 */
  --footer-col-h4-font-color:#C9C6C2; /* 푸터 컬럼 h4 글자 색상 */
  --footer-col-li-font-size:14px; /* 푸터 컬럼 li 글자 크기 */
  --footer-col-a-hover-font-color:#ffffff; /* 푸터 컬럼 a 마우스 오버 글자 색상 */
  --footer-contact-li-font-size:14px; /* 푸터 contact li 글자 크기 */
  --footer-socials-a-width:40px; /* 푸터 소셜 아이콘 a 가로 폭 */
  --footer-socials-a-height:40px; /* 푸터 소셜 아이콘 a 세로 높이 */
  --footer-socials-a-border-color: #6A6868; /* 푸터 소셜 아이콘 a태그 테두리 색상 */
  --footer-socials-a-hover-background-color: #C1B5AA; /* 푸터 소셜 아이콘 a태그 마우스 오버 배경색 */
  --footer-socials-a-hover-color:#C1B5AA; /* 푸터 소셜 아이콘 a태그 마우스 오버 글자 색상 */
  --footer-socials-a-hover-var: #ffffff; /* 푸터 소셜 아이콘 a태그 마우스 오버 색상 */
  --footer-bottom-top-border-color:#60605E; /* 푸터 하단 상단 선 색상 */
  --footer-bottom-font-size:12.5px; /* 푸터 하단 글자 크기 */
  --footer-bottom-font-color:#B4B1AF; /* 푸터 하단 글자 색상 */

  /* hero */
  --page-hero-h1-font-size:clamp(2rem,4.4vw,3.35rem); /* 페이지 hero h1 글자 크기 : clamp(최소값, 권장값(유동적), 최대값) */
  --page-hero-h1-font-weight:300; /* 페이지 hero h1 글자 굵기 */
  --page-hero-h1-font-color:#E6E0DB; /* 페이지 hero h1 글자 색상 */
  --page-hero-p-font-size:1rem; /* 페이지 hero p 글자 크기 */
  --page-hero-p-color:#CBCBCB; /* 페이지 hero p 글자 색상 */
  --page-hero-crumb-font-size:14px; /* 페이지 hero 크럼브 글자 크기 */
  --page-hero-crumb-font-weight:600; /* 페이지 hero 크럼브 글자 굵기 */
  --page-hero-crumb-color:#ffffff; /* 페이지 hero 크럼브 글자 색상 */

  /* buttons */
  --btn-font-size:16px; /* 버튼 글자 크기 */
  --btn-font-weight:600; /* 버튼 글자 굵기 */
  --btn-background-color:#0080C0; /* 버튼 배경색 */
  --btn-hover-background-color:#005080; /* 버튼 마우스 오버 배경색 */
  --btn-background-purple-color:#962DFF; /* 버튼 배경색 */
  --btn-hover-background-purple-color:#B366FF; /* 버튼 마우스 오버 배경색 */
















}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-family);
  font-size:16px;
  line-height:1.75;
  color:var(--black);
  background:var(--white);
  overflow-x:hidden;
  /* 폰트 굵기 및 최적화 설정 */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-family);font-weight:600;line-height:1.25;letter-spacing:-.01em;margin:0;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 10px 0 10px;}

/* ---------- type helpers ---------- */
.center{text-align:center;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:var(--header-background);
  border-bottom:1px solid var(--header-border-bottom);
  transition:background .35s var(--ease),border-color .35s var(--ease),height .35s var(--ease);
}
.site-header .wrap{display:flex;align-items:center;max-width:var(--maxw);min-width:var(--minw);}
/* 스크롤을 올리면 header 배경색 변경 및 하단 선 색상 변경 */
.site-header.is-solid,
.site-header.is-open,
body.has-solid-header .site-header{
  background:var(--header-scroll-background);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom-color:var(--header-scroll-border-bottom);
}

/* ---------- brand logo ---------- */
.logo{position:relative;display:block;width:var(--logo-w);height:var(--logo-h);}

/* ---------- nav ---------- */
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--nav-gap);}
.nav a{
  font-family:var(--font-family);font-size:var(--nav-a-font-size);font-weight:var(--nav-a-font-weight);
  letter-spacing:.1em;text-transform:uppercase;color:var(--nav-a-font-color);
  position:relative;transition:color .3s;
}
.nav a:after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--nav-a-after-background-color);transition:right .35s var(--ease);
}
.nav a:hover{color:var(--nav-a-hover-color);}
/* 스크롤을 올리면 header 메뉴 텍스트 색상 변경 */
.is-solid .nav a,.is-open .nav a,body.has-solid-header .nav a{color:var(--header-scroll-font-color);}
.is-solid .nav a:hover,body.has-solid-header .nav a:hover{color:var(--header-scroll-font-color);}
.nav a[aria-current="page"]{color:var(--header-scroll-font-color);}
.is-solid .nav a[aria-current="page"],body.has-solid-header .nav a[aria-current="page"]{color:var(--nav-a-font-color);}

.header-tools{display:flex;align-items:center;gap:5px;margin-left:var(--nav-gap);margin-left: auto;}

/* ---------- language switcher ---------- */
.lang{position:relative;}
.lang-btn{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-family);font-size:var(--lang-btn-font-size);font-weight:var(--lang-btn-font-weight);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--lang-btn-font-color);padding:5px 10px;
  border:1px solid var(--lang-btn-border-color);transition:.3s var(--ease);
}
.is-solid .lang-btn,.is-open .lang-btn,body.has-solid-header .lang-btn{
  color:var(--lang-btn-hover-font-color);border-color:var(--lang-btn-hover-border-color);
}
.lang-btn:hover{border-color:var(--lang-btn-hover-border-color);color:var(--lang-btn-hover-font-color);}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:var(--lang-menu-w);z-index:90;
  background:var(--lang-menu-background-color);border:1px solid var(--lang-menu-border-color);
  box-shadow:0 22px 48px rgba(42,33,29,.14);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.28s var(--ease);
}
.lang.is-open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-menu li a,.lang-menu li span{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:5px 10px;font-size:var(--lang-menu-font-size);color:var(--lang-menu-font-color);transition:background .2s;
}
.lang-menu li a:hover{background:var(--lang-menu-li-hover-background-color);color:var(--lang-menu-li-hover-color);}
.lang-menu li[aria-current="true"] a{color:var(--lang-menu-li-a-color);font-weight:var(--lang-menu-li-a-font-weight);}

/* ---------- mobile burger ---------- */
.burger{display:none;width:44px;height:44px;cursor:pointer;position:relative;margin-left:10px;}
.burger span{
  position:absolute;left:11px;width:22px;height:1.5px;background:var(--mobile-burger-span-background-color);
  transition:.32s var(--ease);
}
.burger span:nth-child(1){top:16px;}
.burger span:nth-child(2){top:22px;}
.burger span:nth-child(3){top:28px;}
.is-solid .burger span,.is-open .burger span,body.has-solid-header .burger span{background:var(--mobile-burger-open-background-color);}
.is-open .burger span:nth-child(1){top:22px;transform:rotate(45deg);}
.is-open .burger span:nth-child(2){opacity:0;}
.is-open .burger span:nth-child(3){top:22px;transform:rotate(-45deg);}

/* ---------- pc drawer ---------- */ 
.pc-menu{
  z-index:80;
  position:absolute;top:calc(100% - 10px);width:var(--pc-drawer-box-width);
  background:var(--pc-drawer-background-color);border-bottom:1px solid var(--pc-drawer-border-bottom);
  box-shadow:0 22px 48px var(--pc-drawer-box-shadow);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.28s var(--ease);
}
.pc-menu.active {
  opacity:1;visibility:visible;transform:translateY(0);
  animation: fadeIn 0.5s forwards; /* forwards: 애니메이션이 끝난 상태 유지 */
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pc-menu li a,.pc-menu li span{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:5px 10px;font-size:var(--pc-menu-font-size);color:var(--pc-menu-font-color);transition:background .2s;
}
.pc-menu li a:hover{background:var(--pc-menu-li-hover-background-color);color:var(--pc-menu-li-hover-color);}

/* ---------- mobile drawer ---------- */
.drawer{
  position:fixed;inset:var(--header-mobile-h) 0 0 0;z-index:90;
  background:var(--mobile-drawer-background-color);padding:20px 20px 100px;
  overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:.34s var(--ease);
}
.drawer.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.drawer a.d-link{
  display:block;font-family:var(--font-family);font-size:var(--mobile-drawer-font-size);font-weight:var(--mobile-drawer-font-weight);
  padding:17px 0;
}
.drawer a.d-link-line{
  display:block;font-family:var(--font-family);font-size:var(--mobile-drawer-font-size);font-weight:var(--mobile-drawer-font-weight);
  padding:17px 0;border-bottom:1px solid var(--mobile-drawer-line-color);color:var(--mobile-drawer-font-color);
}
.drawer a.d-link small{
  display:block;font-family:var(--font-family);font-size:var(--mobile-drawer-font-small-size);color:var(--muted);
  letter-spacing:.04em;margin-top:2px;
}
.drawer a.d-link-line small{
  display:block;font-family:var(--font-family);font-size:var(--mobile-drawer-font-small-size);color:var(--muted);
  letter-spacing:.04em;margin-top:2px;
}
.drawer-cta{
  display:grid;gap:12px;margin-top:10px;padding-bottom:20px;
  border-bottom:1px solid var(--mobile-drawer-line-color);color:var(--mobile-drawer-font-color);
}
.drawer-cta .btn{margin-left:20px;font-size:var(--mobile-drawer-btn-font-size);color:var(--mobile-drawer-font-color);transition:.3s var(--ease);}

/* ---------- loading ---------- */
.loader { position: fixed; left: 50%; top: 50%; z-index: 10002; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 16px solid #DBDBDB; border-radius: 50%; border-top: 16px solid var(--loading); -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; z-index: 1001; } 
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.overlay {
	display: none;
	z-index: 10001;
	position: fixed;
	width: 100%; height: 100%;
	left: 0; top: 0;
	background-color: rgba(0,0,0, 0.4);
	overflow-x: hidden;
}

/* ---------- buttons ---------- */
.btn-blue{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);
  letter-spacing:.16em;text-transform:uppercase;
  padding:10px 20px;border:1px solid var(--btn-hover-background-color);
  background:var(--btn-background-color);color:var(--white);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn-blue:hover{background:var(--btn-hover-background-color);border-color:var(--btn-hover-background-color);}
.btn-blue .arw{transition:transform .3s var(--ease);}
.btn-blue:hover .arw{transform:translateX(4px);}

/* ---------- buttons ---------- */
.btn-purple{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);
  letter-spacing:.16em;text-transform:uppercase;
  padding:15px 20px;border:1px solid var(--btn-hover-background-purple-color);
  background:var(--btn-background-purple-color);color:var(--white);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn-purple:hover{background:var(--btn-hover-background-purple-color);border-color:var(--btn-hover-background-purple-color);}
.btn-purple .arw{transition:transform .3s var(--ease);}
.btn-purple:hover .arw{transform:translateX(4px);}

/* ---------- div clear ---------- */
.clear { clear: both; }

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:min(92vh,860px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--black);}
.hero-slides{position:absolute;inset:0;}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--ease);
}
.hero-slide.is-active{opacity:1;}
.hero-slide img{width:100%;height:100%;object-fit:cover;animation:kenburns 11s ease-out both;}
.hero-slide.is-active img{animation:kenburns 11s ease-out both;}
@keyframes kenburns{from{transform:scale(1.1);}to{transform:scale(1);}}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(20,15,13,.82) 0%,rgba(20,15,13,.5) 46%,rgba(20,15,13,.2) 100%),
             linear-gradient(to top,rgba(20,15,13,.75) 0%,rgba(20,15,13,0) 52%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:3;width:100%;padding:calc(var(--header-h) + 50px) 0 70px;}
.hero-copy{max-width:900px;color:var(--white);}
.hero-copy h1{font-size:clamp(2.3rem,5.4vw,4.25rem);font-weight:300;line-height:1.1;letter-spacing:-.025em;}
.hero-copy h1 b{font-weight:600;display:block;}
.hero-copy .hero-sub{
  margin-top:26px;font-size:clamp(.98rem,1.25vw,1.12rem);
  color:rgba(255,255,255,.82);line-height:1.85;max-width:700px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}
.hero-dots{display:flex;gap:9px;margin-top:46px;}
.hero-dots button{
  width:40px;height:2px;background:rgba(255,255,255,.3);transition:background .35s;
}
.hero-dots button.is-active{background:var(--purple);}

/* ---------- page hero (sub pages) ---------- */
.page-hero{
  position:relative;min-height:clamp(340px,46vw,470px);display:flex;align-items:flex-end;
  background:var(--black);overflow:hidden;
}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;}
.page-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,15,13,.9) 0%,rgba(20,15,13,.25) 70%);
}
.page-hero .wrap{position:relative;z-index:2;padding-top:calc(var(--header-h) + 60px);padding-bottom:90px;color:var(--white);}
.page-hero h1{font-size:var(--page-hero-h1-font-size);color:var(--page-hero-h1-font-color);font-weight:var(--page-hero-h1-font-weight);letter-spacing:-.02em;}
.page-hero p{margin-top:16px;color:var(--page-hero-p-color);max-width:100%;font-size:var(--page-hero-p-font-size);}
.crumb{
  font-family:var(--font-display);font-size:var(--page-hero-crumb-font-size);font-weight:var(--page-hero-crumb-font-weight);letter-spacing:.2em;
  text-transform:uppercase;color:var(--page-hero-crumb-color);margin-bottom:10px;display:block;
}

/* ============================================================
   FOOTER
   display:grid; -> 해당 요소를 CSS Grid 레이아웃 컨테이너로 지정합니다. 내부의 자식 요소들이 격자(행과 열) 구조로 정렬됩니다.
   ============================================================ */
.site-footer{background:var(--footer-background-color);color:var(--footer-color);padding:50px 10px 50px 10px;border-top:1px solid var(--grey);}
.footer-top{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:clamp(28px,3.6vw,54px);padding-bottom:30px;}
.wordmark{
  font-family:var(--font-display);font-weight:var(--footer-wordmark-font-weight);
  font-size:var(--footer-wordmark-font-size);letter-spacing:.055em;white-space:nowrap;line-height:1;
  color:var(--footer-wordmark-color);
}
.footer-tag{
  font-family:var(--font-display);font-style:var(--footer-tag-font-style);font-size:var(--footer-tag-font-size);line-height:var(--footer-tag-line-height);
  color:var(--footer-tag-color);margin-top:var(--footer-tag-margin-top);
}
.footer-col h4{
  font-family:var(--font-display);font-size:var(--footer-col-h4-font-size);font-weight:var(--footer-col-h4-font-weight);letter-spacing:.2em;
  text-transform:uppercase;color:var(--footer-col-h4-font-color);margin-bottom:20px;
}
.footer-col li{margin-bottom:11px;font-size:var(--footer-col-li-font-size);}
.footer-col a{transition:color .25s;}
.footer-col a:hover{color:var(--footer-col-a-hover-font-color);}
.footer-contact li{display:flex;gap:12px;font-size:var(--footer-contact-li-font-size);line-height:1.75;margin-bottom:14px;}
.socials{display:flex;gap:10px;margin-top:24px;}
.socials a{
  width:var(--footer-socials-a-width);
  height:var(--footer-socials-a-height);
  border:1px solid var(--footer-socials-a-border-color);
  display:grid;
  place-items:center;
  transition:.3s var(--ease);
}
.socials a:hover{background:var(--footer-socials-a-hover-background-color);border-color:var(--footer-socials-a-hover-color);color:var(--footer-socials-a-hover-var);}
.footer-bottom{
  border-top:1px solid var(--footer-bottom-top-border-color);padding:25px 0 30px;
  display:flex;flex-wrap:wrap;gap:15px 25px;align-items:center;justify-content:space-between;
  font-size:var(--footer-bottom-font-size);color:var(--footer-bottom-font-color);
}
.footer-bottom nav{display:flex;gap:30px;}

/* ============================================================
   SECTIONS : CONTENTS 
   ============================================================ */
/* ---------- sections ---------- */
section{position:relative;animation: fadeInUp 1.2s ease-out forwards;}
.sec{padding:clamp(70px,8vw,124px) 0;}
.sec--tight{padding:clamp(54px,5.5vw,86px) 0;}
.sec--grey{background:var(--light-grey);}
.sec--dark{background:var(--dark-grey);color:var(--white);}
.sec--dark .lede{color:var(--white);}
.sec-head{max-width:var(--maxw);margin-bottom:clamp(38px,4.5vw,64px);}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head--left{margin-left:0;margin-right:auto;text-align:left;}
.sec-head--flexbox{
  display:flex; /* Flexbox 활성화 */
  justify-content: space-between; /* 양 끝으로 정렬 (텍스트는 왼쪽, SVG는 오른쪽) */
  align-items: center; /* 수직 중앙 정렬 */
  max-width:var(--maxw);
}

/* 애니메이션 정의 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px); /* 15px 아래에서 시작 */
  }
  to {
    opacity: 1;
    transform: translateY(0);    /* 원래 위치로 이동 */
  }
}

.eyebrow{
  font-family:var(--font-display);
  font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dark-grey);margin-bottom:18px;display:block;
}
.eyebrow-dark{
  font-family:var(--font-display);
  font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);margin-bottom:18px;display:block;
}
.h-xl{font-size:clamp(2.2rem,5.2vw,4.1rem);font-weight:300;letter-spacing:-.02em;line-height:1.12;}
.h-lg{font-size:clamp(1.85rem,3.4vw,2.85rem);font-weight:400;letter-spacing:-.015em;line-height:1.2;}
.h-md{font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:500;}
.h-sm{font-size:1.05rem;font-weight:600;letter-spacing:.01em;}
.lede{font-size:clamp(1rem,1.35vw,1.13rem);color:var(--dark-grey);line-height:1.85;}
.lede-dark{font-size:clamp(1rem,1.35vw,1.13rem);color:var(--white);line-height:1.85;}
.rule-light{width:100%;height:1px;background:var(--light-grey);margin:26px 0;}
.rule-dark{width:100%;height:1px;background:var(--grey);margin:26px 0;}
.rule-short-light{width:50px;height:1px;background:var(--light-grey);margin:26px auto;}
.rule-short-dark{width:50px;height:1px;background:var(--grey);margin:26px auto;}
.rule--center{margin:26px auto;}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
/* Hidden only when JS is running — without JS every block stays visible. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.js .rv.is-in{opacity:1;transform:none;}
.rv-d1{transition-delay:.09s;}.rv-d2{transition-delay:.18s;}
.rv-d3{transition-delay:.27s;}.rv-d4{transition-delay:.36s;}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none;}
  .hero-slide img{animation:none;}
  html{scroll-behavior:auto;}
}

/* 
=======================================================================================================================
=======================================================================================================================
=======================================================================================================================
=======================================================================================================================
=======================================================================================================================
*/

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid{display:grid;gap:clamp(20px,2.4vw,34px);}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}

/* value pillars */
.pillar{
  padding:38px 32px 40px;background:var(--white);border:1px solid var(--light-grey);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
  height:100%;
}
.pillar:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(42,33,29,.09);border-color:var(--light-grey);}
.pillar .num{
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.2em;
  color:var(--grey);display:block;margin-bottom:20px;
}
.pillar h3{font-size:1.15rem;font-weight:600;margin-bottom:12px;}
.pillar p{font-size:14.5px;color:var(--muted);line-height:1.8;}

/* media + text split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;}
.split--reverse .split-media{order:2;}
.split-media{position:relative;overflow:hidden;}
.split-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.split-media:hover img{transform:scale(1.04);}

/* video cards */
.vid-card{background:var(--white);border:1px solid var(--grey);overflow:hidden;height:100%;}
.vid-frame{position:relative;aspect-ratio:16/9;background:var(--black);}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vid-body{padding:22px 24px 26px;}
.vid-body .dur{
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);display:block;margin-bottom:9px;
}
.vid-body h3{font-size:1rem;font-weight:600;line-height:1.5;}
.vid-body p{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.75;}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--light-grey);}
.step{background:var(--white);padding:0;overflow:hidden;position:relative;}
.step-img{aspect-ratio:2/1;overflow:hidden;display:grid;place-items:center; }
.step-img img{width:auto;height:auto;max-width:80px;transition:transform 1s var(--ease);margin:0 auto;}
.step:hover .step-img img{transform:scale(1.05);}
.step-body{padding:20px 20px 30px;}
.step-n{
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.22em;
  color:var(--grey);display:block;margin-bottom:12px;
}
.step-body h3{font-size:1.22rem;font-weight:600;margin-bottom:10px;}
.step-body p{font-size:14px;color:var(--muted);line-height:1.8;}

/* ============================================================
   PAGE : CONTENTS 
   ============================================================ */

/* ---------- whitepaper ---------- */
.whitepaper-date{font-family:var(--font-display);font-size:14px;font-weight:400;letter-spacing:.24em;color:#808080;margin-left:20px;}

/* ---------- API ---------- */
.div_guide { display:flex; width:100%; }
.div_guide_menu { float:left; width:200px; border:1px solid #D5D5D5; padding:10px 10px 10px 10px; }
.div_guide_contents { float:left; flex:1; padding:0 0 0 20px; }
.guide_menu_pc { display:block; width:100%; }
.guide_menu_mobile { display:none; width:100%; }
.guide_menu_title { width:100%; padding:10px 10px 10px 10px; background-color: #A04398; color:#ffffff; }
.guide_menu_text_start { width:auto; padding:10px 5px 5px 5px; font-weight:normal; cursor:pointer; }
.guide_menu_text { width:auto; padding:5px 5px 5px 5px; font-weight:normal; cursor:pointer; }
.guide_menu_text_end { width:auto; padding:5px 5px 5px 5px; font-weight:normal; cursor:pointer; }
.guide_menu_text_start:hover { color:#BA74B3; }
.guide_menu_text:hover { color:#BA74B3; }
.guide_menu_text_end:hover { color:#BA74B3; }
.guide_title { width:100%; padding:0 0 0 0; font-size:1.3rem;  }
.guide_contents { width:100%; padding:0 0 50px ; }
.guide_block1 { width:100%; padding:0 0 10px 0; line-height:1.5rem; }
.guide_block1_title { width:100%; padding:10px 0 10px 0; font-size:1.2rem; color:#0048BF; }
.api-wrap{width:100%;max-width:100%;margin:0 auto;padding:0 10px 0 10px;}
.api_block1 { width:100%; padding:0 0 50px 0; }
.api_text1_comment { padding:0 0 20px 0; }
.api_title { width:100%; padding:5px 5px 5px 10px; font-size:1.2rem; border-left: 10px solid #5465D4; border-bottom: 1px solid #C4C5C8; }
.api_title1 { width:100%; padding:5px 5px 5px 10px; font-size:1.2rem; border-left: 10px solid #A04398; border-bottom: 1px solid #C4C5C8; }
.api_contents { width:100%; padding:50px 0 50px 0; }
.api_li { padding-bottom:10px; color:#414856; }
.api_subject { width:100%; padding:0 0 10px 0; font-size:1.1rem; font-weight:bold; }
#api_foot_kor { width:100%; height:auto; border-top:1px solid #C4C5C8; }
.api_foot_line { width:100%; min-width: 200px; padding:20px 0 20px 0; }
.api_foot_text { font-size:1.1rem; color:#414856; padding:0 10px 5px 10px; }
.api_notice { background-color: #E8E800; font-size:12px; color:#000040; padding:10px 10px 10px 10px; }

/* ---------- GUIDE ---------- */
/* 아코디언 아이템 컨테이너 */
.accordion-item {
  margin-bottom: 12px;
  overflow: hidden;
}
/* 헤더 영역 */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}
.accordion-title {font-size:1.2rem;font-weight:500;letter-spacing:.01em;}
/* SVG 화살표 스타일 및 애니메이션 설정 */
.arrow-icon {
  width:26px;
  height:26px;
  transition: transform 0.3s ease; /* 부드러운 회전 효과 */
}
/* 열렸을 때 화살표를 180도 회전 (위 -> 아래) */
.accordion-item.active .arrow-icon {
  transform:rotate(180deg);
}
/* 슬라이드될 본문 영역 */
.accordion-content {
  max-height: 0; /* 기본값은 닫힘 */
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease; /* 슬라이드 애니메이션 */
}
/* 내부 여백 조절을 위한 내부 div */
.content-inner {
  padding: 20px 0 20px 0;
  border-top: 0px solid #ffffff;
  font-size:clamp(1rem,1.35vw,1.13rem);color:var(--dark-grey);line-height:1.85;
}
.guide_block { width:100%;padding:30px 0 30px 0; }
.guide_block_image { width:100%;padding:0 0 20px 0;text-align:center; }
.guide_image { width:auto;height:50px;margin-bottom:20px; }
.guide_image1 { width:400px;margin:0 auto; }
.guide_block_text {list-style:list-item;list-style-type:disc;padding-left:0;margin:0 0 10px 0;list-style-position:inside; /* 숫자를 영역 안쪽으로 배치 */line-height:1.75;}
.guide_block_text li{text-align:-webkit-match-parent;}
.guide_ctl_icon { width:32px;height:32px;cursor: pointer; }
.guide_map_icon { width:100px;height:100px;cursor: pointer; }

/* ---------- NEWS ---------- */
/* List 바로가기 링크 */
a.btn_this{text-decoration:none; border-radius:3px; background-color: #005080; color:#ffffff; font-weight:bold; border:1px solid #0071B5; display:block; float:left; padding:4px 4px 4px 4px; margin-right:3px; cursor:pointer;}
a.btn_link{text-decoration:none; border-radius:3px; color:#666666; border:1px solid #CCCCCC; display:block; float:left; padding:4px 4px 4px 4px; margin-right:3px; cursor:pointer;}
a:hover.btn_link{text-decoration:none; background:#005080; color:#ffffff; border:1px solid #0071B5; }	
.logo-community {width:50px;height:auto;}
.logo-span {width:100%;margin-bottom:20px;}

/* news input text */ 
.form_text { height:40px; background-color: #F4F4F4; border:1px solid #D5D5D5; padding-top:5px; padding-bottom:5px; padding-left:5px; padding-right:5px; font-size:1.1rem; color:#474747; box-sizing: border-box; }	
.form_text_area { background-color: #F4F4F4; border:1px solid #D5D5D5; padding-top:5px; padding-bottom:5px; padding-left:5px; padding-right:5px; font-size:1.1rem; color:#474747; box-sizing: border-box; }

/* 팝업 배경 (어둡게 처리) */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* 기본적으로 숨김 */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 팝업 창 (화면 중앙 및 비율 지정) */
.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            
  /* 핵심: 화면 비율 지정 */
  width: 60%;          /* 원하는 가로 비율 (예: 화면의 60%) */
  max-width: 800px;    /* PC 등 큰 화면에서 지나치게 커지는 것 방지 */
  min-width: 300px;    /* 모바일 등 작은 화면에서 지나치게 작아지는 것 방지 */
  aspect-ratio: 3 / 4;     /* 원하는 가로/세로 비율 지정 (예: 16:9) */     
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);     
  padding: 20px;
  position: relative;
  box-sizing: border-box;
  /* 내부 콘텐츠 정렬을 위한 설정 */
  display: flex;
  flex-direction: column;
}

/* 팝업 내부 스크롤이 필요할 경우를 위한 처리 */
.popup-body {
  flex: 1;
  overflow-y: auto;
  margin-top: 20px;
}

/* 닫기 버튼 */
.close-btn {
  position: absolute;
  top: 5px;
  right: 15px;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
}

/* ============================================================
   엔젤 라운드 투자 
   ============================================================ */

#container_contents { position:relative;width:100%;padding:130px 100px 150px 100px;overflow:auto;height: auto;min-height: 100%;}
.main_box { width:100%; height:auto; padding:10px 10px 10px 10px; border-radius:10px; border:1px solid #DEDEDE; background:#F1F1F1; margin-bottom:50px; }
.main_box_contents { width:100%; height:auto; padding:20px 10px 20px 10px; background:#ffffff; }
.main_box_title { width:100%; font-size:1.1rem; color:#4B1BDE; font-weight:bold; padding:0 0 10px 0; border-bottom:2px dotted #825EEC; }
.main_box_text { width:100%; font-size:1.0rem; line-height:1.5rem; padding:20px 0 0 0; }
.main_box_image { width:auto; height:30px; margin:0 30px 20px 0; }
.main_box_image1 { width:auto; height:30px; margin:0 0 0 0; }
.main_box_image2 { max-width:100%; width:auto; height:auto; margin:0 0 0 0; }
.button1 { padding:5px 10px 5px 10px; font-size:1.0rem; color:#ffffff; background-color: #434746; border:0px solid #0985EA; border-radius:3px; cursor:pointer; } 
.button1:hover { background-color: #77A3D2; cursor:pointer; }
.form_select { height:40px; background-color: #F4F4F4; border:1px solid #D5D5D5; padding-top:2px; padding-bottom:2px; padding-left:2px; padding-right:2px; font-size:1.1rem; color:#474747; box-sizing: border-box; }
























/* ============================================================
   RESPONSIVE
   ============================================================ */
  
/* 2. 노트북 및 작은 PC (1024px ~ 1279px) */
@media screen and (max-width: 1279px) {
  body {
    font-size: 16px;
  }

}










/* 3. 태블릿 가로 / 세로 (768px ~ 1023px) */
@media screen and (max-width: 1023px) {
  body {
    font-size: 15px;
  }

  .wrap{width:100%;max-width:var(--max-mobile-w);margin:0 auto;padding:0 10px 0 10px;}

  /* ============================================================
  HEADER
  ============================================================ */
  .site-header{
    height:var(--header-mobile-h);
  }

  .nav{display:none;}

  /* ---------- brand logo ---------- */
  .logo{position:relative;display:block;width:var(--logo-m-w);height:var(--logo-m-h);}

  .burger{display:block;}

}










/* 4. 모바일 기기 (767px 이하) */
@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .wrap{width:100%;max-width:var(--max-mobile-w);margin:0 auto;padding:0 10px 0 10px;}

  /* ============================================================
  HEADER
  ============================================================ */
  .site-header{
    height:var(--header-mobile-h);
  }

  .nav{display:none;}

  /* ---------- brand logo ---------- */
  .logo{position:relative;display:block;width:var(--logo-m-w);height:var(--logo-m-h);}

  .burger{display:block;}

  /* ============================================================
   CONTENTS SECTIONS
   ============================================================ */
  /* media + text split */
  .split{grid-template-columns:1fr;gap:32px;}
  .split--reverse .split-media{order:0;}

  .g-2,.g-3,.g-4,.steps{grid-template-columns:1fr;}
  .accordion-title {font-size:1.1rem;font-weight:500;letter-spacing:.01em;}

  /* ---------- guide ---------- */
  .guide_block { width:100%;padding:30px 0 30px 0; }
  .guide_block_image { width:100%;padding:0 0 20px 0;text-align:center; }
  .guide_image { width:auto;height:25px;margin-bottom:20px; }
  .guide_image1 { width:auto;max-width:250px;margin:0 auto; }
  .guide_map_icon { width:50px;height:50px;cursor: pointer; }

  /* ============================================================
   엔젤 라운드 투자 
   ============================================================ */

  #container_contents { position: relative; width:100%; padding: 70px 10px 100px 10px; overflow:auto; 
    height: auto;
    min-height: 100%;
  }
  .main_box { width:100%; height:auto; padding:10px 10px 10px 10px; border-radius:10px; border:1px solid #DEDEDE; background:#F1F1F1; margin-bottom:30px; }
  .main_box_contents { width:100%; height:auto; padding:20px 10px 20px 10px; background:#ffffff; }
  .main_box_title { width:100%; font-size:1.0rem; padding:0 0 10px 0; border-bottom:2px dotted #825EEC; }
  .main_box_text { width:100%; font-size:0.8rem; line-height:1.3rem; padding:20px 0 0 0; }
  .main_box_image { width:auto; height:30px; margin:0 30px 20px 0; }
  .main_box_image1 { width:auto; height:30px; margin:0 0 0 0; }
  .main_box_image2 { max-width:100%; width:auto; height:auto; margin:0 0 0 0; }
  .button1 { padding:5px 10px 5px 10px; font-size:0.9rem; color:#ffffff; background-color: #434746; border:0px solid #0985EA; border-radius:3px; cursor:pointer; } 
  .button1:hover { background-color: #77A3D2; cursor:pointer; }






}












/* 5. 소형 스마트폰 (479px 이하) */
@media screen and (max-width: 479px) {
  body {
    font-size: 13px;
  }

  .wrap{width:100%;max-width:var(--max-mobile-w);margin:0 auto;padding:0 10px 0 10px;}

  /* ============================================================
  HEADER
  ============================================================ */
  .site-header{
    height:var(--header-mobile-h);
  }

  .nav{display:none;}

  /* ---------- brand logo ---------- */
  .logo{position:relative;display:block;width:var(--logo-m-w);height:var(--logo-m-h);}

  .burger{display:block;}

  .footer-top{grid-template-columns:1fr;}
}