@charset "utf-8";

/* @import url('../font/pretendard/pretendard.css');
@import url('../font/poppins/poppins.css');
@import url('../font/play/play.css'); */

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
	margin:0;
	/* font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple SD Gothic Neo","Noto Sans KR", sans-serif; */
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--ink);
	overflow-x: hidden; /* 데스크톱에서도 가로 스크롤 방지 */
	background:#fff;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

input, textarea {
	width: 100%;
	color: #202124;
	background-color: #fff;
	font-family: Pretendard, sans-serif;
	font-size: 21px;
	line-height: 24px;
	box-sizing: border-box;
	border: 1px solid #dadce0;
	border-radius: 10px;
	outline: none;
	text-align: left;
	margin: 0;
	padding: 16px 18px;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
	outline: none; /* 검은 테두리 제거 */
}
textarea {
	resize: none;
	min-height: 300px;
	max-height: 600px;
}

body {
	font-family: 'Pretendard', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple SD Gothic Neo", sans-serif;
	letter-spacing: -0.04em;
	-webkit-font-smoothing: antialiased; /* 폰트 부드럽게 (Mac/Chrome) */
	-moz-osx-font-smoothing: grayscale;   /* 폰트 부드럽게 (Firefox) */
}

.sr-only{
	position:absolute !important;
	width:1px; height:1px;
	padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0);
	white-space:nowrap; border:0;
}

.brand-text{
	font-family: Play, sans-serif;
	font-weight: 700;
	letter-spacing: -0.5px;
}
.brand-text sup{
	font-family: Pretendard, sans-serif;
    font-weight: 700;
    font-size: 0.7em;
    position: relative;
    top: 0.12em;
}

:root {
	/* 컨테이너(원본에서 --container 사용) */
	--container: 1700px;

	/* === Corecell desktop safe-area === */
	--cc-desktop-max: 1700px;
	--cc-desktop-side: 149px;
	--container: 1700px;

	/* Type scale (desktop 기준) */
	--fs-base: 16px;
	--lh-base: 1.85;

	--fs-kicker: 12px;
	--fs-section-title: 36px;

	/* ----- GNB ----- */
	--gnb-h: 100px;
	--fs-gnb: 24px;            /* 원본 변수 오버라이드 */
	--cc-gnb-gap: 83px;
	--cc-lang-font: 14px;
	--cc-burger-line-w: 22px;
	--cc-burger-line-h: 2px;
	--cc-burger-gap: 6px;
	--gnb-langmenu-radius: 5px;
	--gnb-menupopup-radius: 5px;

	/* ----- FOOTER ----- */
	--h-footer: 453px;

}



/* 아래는 ChatGPT에 스크린샷 제출용으로 화면캡쳐할때 해상도 영향 안주기 위해 스크롤바를 임시로 숨기기 위한 CSS 코드임.
html,body {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;
}
*/

/* =============================================================================
| GNB
* ============================================================================*/

.gnb{
	position:absolute;
	top:0; left:0; right:0;
	z-index: 30;
	height: var(--gnb-h);
	color: rgba(255,255,255,.92);
}

.gnb__inner{
	height:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 18px;
}

.gnb__brand{
	display:flex;
	align-items:center;
	gap: 12px;
	font-weight: 900;
	letter-spacing: .02em;
}

.gnb__brandLogo{
	width: 239px;
	height: auto;
	display: block;
}

.gnb__nav{
	display:flex;
	align-items:center;
	gap: 34px;
	font-size: var(--fs-gnb);
	font-weight: 600;
	opacity: .95;
}

.gnb__tools{
	display:flex;
	align-items:center;
	gap: 12px;
}

.gnb__lang{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	height: 34px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.22);
	background: rgba(0,0,0,.18);
	color: rgba(255,255,255,.92);
	font-size: 13px;
	cursor: pointer;
}

.gnb__flag{
	width: 18px; height: 12px;
	border-radius: 2px;
	background: rgba(255,255,255,.35); /* TODO: 국기 이미지 */
}

.gnb__menu{
	width: 40px; height: 40px;
	border:0;
	background: transparent;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap: 5px;
	cursor:pointer;
}

.gnb__menu span{
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: rgba(255,255,255,.85);
	display:block;
}

@media (max-width: 1280px){
	.gnb__brandLogo {
		width: 200px;
	}
}

@media (max-width: 1024px){
	.gnb__nav{ display:none; }
}

@media (max-width: 640px){
	.gnb__brandLogo {
		width: 125px;
	}
}

/* ---------------- GNB ---------------- */
.gnb__nav{
  gap: var(--cc-gnb-gap) !important;
}

/* 언어 버튼 */
.gnb__lang{
  font-size: var(--cc-lang-font) !important;
  height: 36px !important;
  padding: 0 14px !important;
}

/* 햄버거 버튼(메뉴) */
.gnb__menu{
  width: 44px !important;
  height: 44px !important;
  gap: var(--cc-burger-gap) !important;
}
.gnb__menu span{
  width: var(--cc-burger-line-w) !important;
  height: var(--cc-burger-line-h) !important;
}

@media (max-width: 1200px){
	:root{
		--fs-gnb: 18px;
		--cc-gnb-gap: 60px;
	}
}
/* ---------------- Mobile (<=768) ----------------
 * - GNB nav는 숨김
 * - HERO 폭 92vw + 폰트 축소
 */
@media (max-width: 768px){
	:root{
		--fs-gnb: 15px;
    	--cc-lang-font: 13px;
	}
	.gnb__nav{ display:none !important; }
}

/* -----------------------------------------------------------------------------
 * GNB Language Menu
 */
.gnb__langMenu {
	display: none;
	position: absolute;
	top: 80px;
	border: 1px solid #7f7f7f;
	border-radius: var(--gnb-langmenu-radius);
	background-color: #fff;
}
.gnb__langItem {
	display: flex;
	color: #000;
	padding: 3px 25px 3px 15px;
	gap: 5px;
	cursor: pointer;
}
.gnb__langItem:hover {
	background-color: #f2f2f2;
}
.gnb__langItem:first-child {
	border-radius: var(--gnb-langmenu-radius) var(--gnb-langmenu-radius) 0 0;
}
.gnb__langItem:last-child {
	border-radius: 0 0 var(--gnb-langmenu-radius) var(--gnb-langmenu-radius);
}
.gnb__langItem.current {
	background-color: #dbdbdb;
}
.gnb__langFlag {
	display: flex;
	width: 22px;
	align-items: center;
	justify-content: center;
}
.gnb__langFlag img {
	width: 22px;
	height: 15.63px;
	object-fit: cover;
	border: 1px solid #bfbfbf;
}
.gnb__langName {
	display: flex;
	font-family: Pretendard, sans-serif;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: -0.04em;
	justify-content: center;
}
@media (max-width: 768px) {
	.gnb__langName {
		font-size: 13px;
	}
	.gnb__langFlag {
		width: 18px;
	}
	.gnb__langFlag img {
		width: 18px;
		height: 12px;
	}
}

/* -----------------------------------------------------------------------------
 * GNB Menu Slider
 */
.gnb__menuModal {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,1);
	opacity: 0.5;
	z-index: 1300;
}

.gnb__menuSlider {
	display: block;
	position: fixed;
	top: 10px;
	right: -100%;
	width: 486px;/*700px;*/
	max-width: calc(100% - 10px);
	height: calc(100% - (10px * 2));
	background-color: #fff;
	box-sizing: border-box;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	z-index: 1301;
	overflow: hidden;
	overflow-y: auto;
}
.gnb__menuSlider .slider-top {
	display: block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding-top: 50px;
	text-align: center;
}
.gnb__menuSlider .slider-top .slider-top-logo {
	display: block;
	width: 100%;
	align-items: center;
	justify-items: center;
}
.gnb__menuSlider .slider-top .slider-top-logo img {
	width: 150px;
	height: auto;
	cursor: pointer;
}
.gnb__menuSlider .slider-top .slider-top-close-icon {
	display: block;
	position: absolute;
	top: 15px;
	left: 15px;
}
.gnb__menuSlider .slider-top .slider-top-close-icon img {
	width: 24px;
	height: auto;
	cursor: pointer;
}
.gnb__menuSlider .slider-menu {
	display: block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-top: 40px;
	text-align: center;
}
.gnb__menuSlider .slider-menu dl {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}
.gnb__menuSlider .slider-menu dl dd {
	display: block;
	position: relative;
	width: 100%;
	color: #000;
	box-sizing: border-box;
	border-top: 1px solid rgba(0,0,0,.1);
	margin: 0;
	padding: 15px 30px;
	text-align: left;
}
.gnb__menuSlider .slider-menu dl dd:hover {
	background-color: #f5f5f7;
}
.gnb__menuSlider .slider-menu dl dd:last-child {
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.gnb__menuSlider .slider-menu dl dd .slider-menu-icon {
	display: inline-block;
	position: relative;
	height: 25px;
	vertical-align: middle;
}
.gnb__menuSlider .slider-menu dl dd .slider-menu-icon img {
	position: absolute;
	width: 24px;
	max-width: 24px;
	height: auto;
	opacity: .8;
}
.gnb__menuSlider .slider-menu dl dd .slider-menu-text {
	display: inline-block;
	position: relative;
	height: 100%;
	font-size: 24px;
	font-weight: 600;
	vertical-align: middle;
	opacity: .8;
	cursor: pointer;
}
.gnb__menuSlider .slider-menu .slider-menu-sub-text dl {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}
.gnb__menuSlider .slider-menu .slider-menu-sub-text dl dd {
	display: inline-block;
	position: relative;
	width: auto;
	color: #7f7f7f;
	font-size: 18px;
	font-weight: 400;
	box-sizing: border-box;
	border-top: none;
	margin: 0;
	padding: 0;
	text-align: left;
}
.gnb__menuSlider .slider-menu .slider-menu-sub-text dl dd:nth-of-type(odd) {
	cursor: pointer;
}
.gnb__menuSlider .slider-menu .slider-menu-sub-text dl dd:nth-of-type(even) {
	color: #d9d9d9;
	padding: 0 15px;
}
.gnb__menuSlider .slider-menu .slider-menu-sub-text dl dd:last-child {
	border-bottom: none;
}

@media (max-width: 1200px) {
	.gnb__menuSlider .slider-menu dl dd .slider-menu-text {
		font-size: 21px;
	}
	.gnb__menuSlider .slider-menu .slider-menu-sub-text dl dd {
		font-size: 16px;
	}
	.gnb__menuSlider .slider-menu .slider-menu-sub-text dl dd:nth-of-type(even) {
		padding: 0 12px;
	}
}


/* =============================================================================
| SECTION, CONTAINER, INNER, ...
* ============================================================================*/
.section{
	position: relative;
	overflow: hidden;
}

.section__bg{
	position:absolute;
	inset:0;
	pointer-events:none;
	background: #f6f8fc;
}

.section__inner{
	position: relative;
	height: 100%;
}

.container{
	width: min(var(--container), calc(100% - 80px));
	margin: 0 auto;
}

@media (max-width: 1024px){
	.container{ width: min(var(--container), calc(100% - 40px)); }
}

@media (max-width: 1280px){
	.section__inner{ padding: 64px 0; height:auto; }
}


/* =============================================================================
| FOOTER
* ============================================================================*/
.footer{ height: var(--h-footer); }

/* Tablet/Mobile: 자동 높이 + 패딩 */
@media (max-width: 1280px) {
	.footer {
		height: auto;
	}
	.footer .section__inner{ padding: 0; }
}

/* ---------------- FOOTER ---------------- */
.footer .section__bg{
	background: url("../img/bg-footer.png") center top / cover no-repeat;
	/*
	background:#fff;
	*/
}

.footer{
	background: #0b0f14;
	color: rgba(255,255,255,.82);
}

.footer__inner{
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap: 18px;
}

.footer__links{
	display:flex;
	align-items:center;
	gap: 16px;
	font-size: 12px;
	color: rgba(255,255,255,.74);
}

.footer__links strong{ color: rgba(255,255,255,.92); font-weight:900; }
.footer__sep{ color: rgba(255,255,255,.28); }

.footer__body{
	display:flex;
	gap: 28px;
	align-items:center;
}

.footer__logo{
	width: 86px;
	height: 86px;
	border-radius: 12px;
	background: rgba(255,255,255,.12); /* TODO: 로고 */
}

.footer__corp{
	font-size: 16px;
	font-weight: 950;
	letter-spacing: -0.01em;
	color: rgba(255,255,255,.92);
	margin-bottom: 12px;
}

.footer__line{
	font-size: 12px;
	line-height: 1.9;
	color: rgba(255,255,255,.72);
	white-space: nowrap;
}

.footer__copy{
	margin-top: 12px;
	font-size: 12px;
	color: rgba(255,255,255,.55);
}

@media (max-width: 1024px){
	.footer__body{ flex-direction:column; align-items:flex-start; }
	.footer__line{ white-space: normal; }
}

/* =========================================================
   FIX v15 - 08 FOOTER (NOTICE 이후)
   - home_v15.php의 footerNav/footerMain/footerLogo/footerInfo 구조 기준
   ========================================================= */

.footer.section{
	height: auto;
	padding: 47px 0 141px 0;
}

.footer.section .section__bg{
  background: #07090b url("../img/bg-footer.png") no-repeat center top / cover;
}

/* 기존 footer 섹션이 max-width:1300으로 잡혀있어서(이전 버전) 전체가 우측으로 치우쳐 보이는 현상 방지 */
.footer.section .container{
  max-width: var(--container);
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.footer.section .section__inner{
  /* padding: 0; */
  display: flex;
  align-items: center;
}

/* .footer.section .container{
  width: 100%;
  max-width: 1700px;
} */

.footerNav{
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(230,235,255,.8);
  font-size: 20px;
  letter-spacing: -.02em;
}

.footerNav__link{
  color: inherit;
  text-decoration: none;
}

.footerNav__link:hover{ text-decoration: underline; }

.footerNav__sep{
  color: rgba(230,235,255,.35);
}

.footerMain{
  margin-top: 82px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: center;
}

.footerLogo{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.footerLogo__img{
  width: 150px;
  height: auto;
  display: block;
}


/* footer 로고 이미지 반응형 크기 */
@media (max-width: 1024px){
  .footerLogo__img{width:130px;}
}
@media (max-width: 600px){
  .footerLogo__img{width:110px;}
}

.footerInfo{
	color: rgba(230, 235, 255, .85);
    font-size: 20px;
    font-weight: 200;
}

.footerCompany{
	font-size: 29px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: 10px;
    color: #fff;
}

.footerMeta,
.footerAddr{
  font-size: 13px;
  line-height: 1.8;
  color: rgba(230,235,255,.75);
}

.footerMeta{ margin-bottom: 6px; }

.footerMeta .sep,
.footerAddr .sep{
  margin: 0 10px;
  color: rgba(230,235,255,.25);
}

.footerCopy{
	margin-top: 10px;
    font-size: 16px;
    color: rgba(230, 235, 255, .55);
    font-family: Poppins, sans-serif;
    letter-spacing: 0;
}

/* tablet */
@media (max-width: 1024px){
  /* .footer.section{ min-height: 420px; } */
  .footer.section .container{
	max-width: 920px;
	/* padding-left: 22px;
	padding-right: 22px; */
  }
  .footerMain{ grid-template-columns: 150px 1fr; gap: 22px; }
  .footerLogo__img{ width: 112px; }
}

/* mobile */
@media (max-width: 640px){
  .footer.section {
    padding: 30px 0 141px 0;
  }
  .footer.section .section__inner{
	align-items: flex-start;
	/* padding-top: 48px; */
  }
  .footerNav{ flex-wrap: wrap; gap: 10px; }
  .footerMain{ grid-template-columns: 1fr; margin-top: 0; }
  .footerLogo{ display: none; }

  .footerInfo {
    margin-top: 40px;
  }

  .footerCopy {
    margin-top: 30px;
  }
}

.footerSep {
	color: rgba(230, 235, 255, .35);
	margin: 0 5px;
}
.footerNL {
	display: none;
}

@media (max-width: 900px) {
    .footerMain {
        gap: 0px;
    }
	.footerNav{
		font-size: 13px;
	}
	.footerCompany{
		font-size: 18px;
	}
	.footerInfo{
		font-size: 13px;
	}
	.footerCopy{
		font-size: 13px;
	}
	.footerSep {
		display: none;
	}
	.footerNL {
		display: block;
	}
}