@charset "utf-8";
/* ============================================================
   메가메뉴 패널
   ============================================================ */
/* ── 헤더: 메가메뉴 열렸을 때 상태 ── */
#headerInnerWrap.mega-open .logo svg path{fill:#F7941E;}
#headerInnerWrap.mega-open .logo svg .symbol-path{fill:#9ACA3C;}

#headerInnerWrap.mega-open {
	background-color: #fff;
	top: calc(-1 * var(--header-top));
	padding-top: var(--header-top);
}
#headerInnerWrap.mega-open #gnb{top: var(--header-top);}
#headerInnerWrap.mega-open #gnb > ul > li > a {
	color: #222;
}
#headerInnerWrap.mega-open #gnb > ul > li > a:hover,
#headerInnerWrap.mega-open #gnb > ul > li.on > a {
	color: var(--main-color);
}
#headerInnerWrap.mega-open .header-lang .lang-open-btn {
	color: #222;
}
#headerInnerWrap.mega-open .sitemap-line-btn .dot {
	background-color: #222;
}
#headerInnerWrap.mega-open .sitemap-line-btn .dot:nth-child(2) {
	background-color: var(--main-color);
}
#headerInnerWrap.mega-open .sitemap-line-btn .dot:before {
	background: #222;
}

/* 패널 컨테이너 */
.mega-panel {
	position: fixed;
	top: calc(var(--header-top) + var(--header-height));
	left: 0;
	width: 100%;
	z-index: 9999;
	background: #F6F6F6;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
/* 메가패널 열릴 때: headerInnerWrap이 위로 올라간 만큼 top도 같이 조정 */
.mega-panel.open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

/* 패널 내부 레이아웃 */
.mega-inner {
	display: flex;
	align-items: stretch;
	min-height: 16rem;
}
.mega-panel.is-business .mega-inner{position: relative;}
.mega-panel.is-business .mega-inner:after {position: absolute; top: 0; right: -100%; width: 100%; height: 100%; background-color: #fff; content: '';}

@media all and (max-width:1780px){
	.mega-panel.is-business .mega-inner:after{right: calc(-100% + var(--area-padding));}
}

/* 좌: 대메뉴 타이틀 */
.mega-title-col {
	flex: 0 0 30rem;
	flex: 0 0 17.44%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 4rem 0;
}
.mega-title-col .mega-title {
	font-size: 4rem;
	font-weight: 600;
	color: #111; line-height: 1;
}

/* 중: 메뉴 콘텐츠 */
.mega-content-col {
	flex: 1;
	padding: 4rem 0 4rem 6rem;
	padding-left: 3.48%;
}

/* BUSINESS */
.mega-panel.is-business .mega-content-col,
.mega-panel.is-business .mega-banner-col {
	background: #fff;
}
.mega-panel.is-business .mega-content-col {
	padding-left: 6rem;
	padding-left: 3.48%;
}

/* 우: 배너 (통이미지) */
.mega-banner-col {
	/* flex: 0 0 52rem; */
	flex: 0 0 30.23%;
	padding: 4rem 0 4rem 5rem;
	padding-left: 2.9%;
	display: flex;
	align-items: stretch;
}
.mega-banner-col .mega-banner {
	width: 100%;
}
.mega-banner-col .mega-banner > img {
	border-radius: 15px;
	overflow: hidden;
	width: 100%; height: auto;
	object-fit: cover;
	display: block;
}

/* ============================================================
   일반 메뉴 (2dep 그리드)
   ============================================================ */
.mega-grid-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	list-style: none;
	padding: 0; margin: 0;
}
.mega-grid-list li {
	flex: 0 0 calc(100% / 3 - 1.5rem);
}
.mega-grid-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%; height: 5rem;
	padding: 1rem 2.5rem 1rem 3rem;
	font-size: 1.6rem; line-height: 1.3; font-weight: 600; color: #222;
	background-color: #fff; border-radius: 5rem; box-sizing: border-box;
	margin-right: 2rem;
	transition: color 0.2s;
	text-decoration: none;
}
.mega-grid-list li a:hover { color: var(--main-color); background-color: #222; transition:all 0.4s; }
.mega-grid-list li a .arrow {
	font-size: 1.8rem;
	color: #555; opacity: 0.5;
	transition: transform 0.2s, color 0.2s;
}
.mega-grid-list li a:hover .arrow { transform: translateX(0.4rem); color: var(--main-color); }

/* ============================================================
   BUSINESS 전용
   ============================================================ */
.business-layout {
	display: flex;
	width: 100%;
	min-height: 200px;
}

/* 2dep 사이드 네비 */
.biz-side-nav {
	width: 90%;
	max-width: 24rem;
	list-style: none;
	margin-top: 3rem;
}
.biz-side-nav > li { position: relative; background-color: #fff; border-radius: 2.5rem;}
.biz-side-nav > li + li{margin-top: 1rem;}
.biz-side-nav > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 2rem 1.5rem 3rem;
	font-size: 1.6rem; letter-spacing: -0.03em; font-weight: 700; color: #222;
	cursor: pointer;
	transition: color 0.2s;
	text-decoration: none;
	user-select: none;
}
.biz-side-nav > li > a .biz-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: #555;
	transition: transform 0.25s, color 0.2s;
	line-height: 1;
}
.biz-side-nav > li.active > a{ font-weight: 700; }
.biz-side-nav > li.active > a .biz-arrow { transform: rotate(180deg); }

/* 3dep 아코디언 */
.biz-3dep {
	display: none;
	list-style: none;
	padding: 0.4rem 0 1.8rem; margin: 0;
}
.biz-3dep li + li{margin-top: 0.5rem;}
.biz-3dep li a {
	display: flex;
	align-items: center;
	padding: 0.5rem 3rem;
	font-size: 1.6rem; letter-spacing: -0.03em; font-weight: 600; color: #888; position: relative;
	transition: color 0.2s, padding-left 0.2s;
	text-decoration: none;
}
.biz-3dep li a::before {
	position: absolute; top: 0; left: 2.5rem; font-size: 2.4rem; color: var(--main-color); transform: rotate(90deg); opacity: 0;
	content: "\e930"; font-family: xeicon; display: inline-block; flex-shrink: 0; transition: opacity 0.2s;
}
.biz-3dep li a:hover,
.biz-3dep li.active a {font-weight: 600; color: #555; padding-left: 5rem;}
.biz-3dep li a:hover::before,
.biz-3dep li.active a::before   { opacity: 1; }

/* 제품 콘텐츠 */
.biz-content-area {
	flex: 1;
	padding: 10px 0 20px 36px;
	min-width: 0;
}
.biz-empty {
	padding: 20px 0;
	color: #aaa;
	font-size: 1.4rem;
}

/* 제품 카드 그리드 */
.biz-product-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
a.biz-product-card {
	display: block;
	flex: 0 0 calc(33.333% - 2rem);
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s;
}
a.biz-product-card:hover { opacity: 0.8; }
.biz-product-card .card-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #F3F3F3;
	border-radius: 1.5rem;
	overflow: hidden;
	margin-bottom: 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	box-sizing:border-box;
}
.biz-product-card .card-img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.biz-product-card .card-img .card-img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e8e8e8, #d0d0d0);
	border-radius: 1.5rem;
}
.biz-product-card .card-name {
	font-size: 2rem; line-height: 1.3; letter-spacing: -0.03em; font-weight: 600; color: #222;
	margin-bottom: 2rem;
}
.biz-product-card .card-desc {
	font-size: 1.4rem; line-height: 1.57; letter-spacing: -0.03em; font-weight: 500; color: #888;
}

/* 소프트웨어 리스트 */
.biz-software-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 10px;
}
a.biz-software-item {
	display: flex;
	flex: 0 0 calc(50% - 6px);
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: #f8f8f8;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s;
	text-decoration: none;
}
a.biz-software-item:hover { background: #f0f0f0; }
.biz-software-item .sw-icon {
	width: 36px; height: 36px;
	flex-shrink: 0;
	background: #222;
	border-radius: 6px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.2rem;
	color: var(--main-color);
	font-weight: 700;
	font-family: var(--font-family2);
}
.biz-software-item .sw-name {
	font-size: 1.4rem;
	font-weight: 600;
	color: #111;
	margin-bottom: 3px;
	font-family: var(--font-family2);
}
.biz-software-item .sw-desc {
	font-size: 1.2rem;
	color: #888;
	line-height: 1.3;
}

/* 직영점 리스트 */
.biz-store-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 10px;
}
a.biz-store-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid #eee;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	text-decoration: none;
}
a.biz-store-item:hover { border-color: var(--main-color); background: #fffdf0; }
.biz-store-item .store-tag {
	font-size: 1.15rem;
	font-weight: 600;
	color: #fff;
	background: #333;
	border-radius: 20px;
	padding: 3px 10px;
	white-space: nowrap;
	transition: background 0.2s;
}
a.biz-store-item:hover .store-tag { background: #111; }
.biz-store-item .store-name {
	font-size: 1.4rem;
	color: #333;
	font-weight: 500;
}

/* 콘텐츠 전환 애니메이션 */
@keyframes megaFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.biz-product-grid,
.biz-software-list,
.biz-store-list {
	animation: megaFadeIn 0.2s ease;
}



/* ============================================================
   모바일 GNB
   ※ 기존 layout_m.css 의 #gnbM 스타일을 덮어씀
   ============================================================ */
@media all and (max-width: 1279px) {
 
	/* 메가패널 모바일에서 숨김 */
	.mega-panel { display: none !important; }
 
	/* ── gnbM 패널 ── */
	#gnbM {
		display: block;
		position: fixed;
		top: 0; right: -102%;
		width: 100%; height: 100%;
		background-color: #f6f6f6;
		/* z-index: 9998; */
		transition: right 0.4s ease-in-out;
		visibility: hidden;
		overflow: hidden;
	}
	#gnbM.open {
		right: 0;
		visibility: visible;
	}
 
	/* ── 스크롤 영역 ── */
	.gnb-navigation-wrapper {
		height: calc(100% - var(--header-height));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 1rem 0 6rem;
	}
	.gnb-navigation-inner { padding: 0; }
 
	/* ── 1dep ── */
	#navigation { list-style: none; padding: 0; margin: 0; }
	#navigation > .m-dep1-item {}
	#navigation > .m-dep1-item > .m-dep1-link {
		display: block;
		padding: 2.5rem var(--area-padding);
		font-size: 2.6rem;
		font-weight: 600;
		color: #222;
		text-decoration: none;
		position: relative;
	}
	/* active 1dep 색상 */
	#navigation > .m-dep1-item.m-active > .m-dep1-link {}
 
	/* ── 2dep: 일반 pill 목록 ── */
	.m-dep2-list {
		display: none;
		list-style: none;
		padding: 0.5rem var(--area-padding) 2rem;
		margin: 0;
	}
	.m-dep2-list li { margin-bottom: 1rem; }
	.m-dep2-list li:last-child { margin-bottom: 0; }
	a.m-dep2-pill {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%; height: 5rem;
		padding: 1rem 2.5rem 1rem 3rem;
		font-size: 1.6rem; line-height: 1.3; font-weight: 600; color: #222;
		background-color: #fff; border-radius: 5rem; box-sizing: border-box;
		margin-right: 2rem;
		transition: color 0.2s;
		text-decoration: none;
	}
	.m-pill-arrow {
		font-size: 1.8rem;
		color: #555; opacity: 0.5;
		transition: transform 0.2s, color 0.2s;
	}
 
	/* ── 2dep: BUSINESS 아코디언 래퍼 ── */
	.m-dep2-wrap {
		display: none;
		padding: 0.5rem var(--area-padding) 2rem;
	}
	.m-dep2-item { margin-bottom: 1rem; }
 
	/* BUSINESS 2dep 버튼 */
	a.m-dep2-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 5rem;
		padding: 1rem 2.5rem 1rem 3rem;
		box-sizing: border-box;
		font-size: 1.6rem;
		font-weight: 700;
		color: #222;
		background: #fff;
		border-radius: 2.5rem;
		text-decoration: none;
		transition: background 0.2s;
		position: relative;
	}
	a.m-dep2-link::after {
		content: "\e942"; font-family: xeicon;
		font-size: 2rem; font-weight: 400;
		color: #888; opacity: 0.5;
		transition: transform 0.25s;
		line-height: 1;
	}
	.m-dep2-item.m-active > a.m-dep2-link {border-radius: 2.5rem 2.5rem 0 0;}
	.m-dep2-item.m-active > a.m-dep2-link::after { transform: rotate(180deg); }
 
	/* ── 3dep: BUSINESS pill 목록 ── */
	.m-dep3-list {
		display: none;
		list-style: none;
		background-color: #fff;
		padding: 0.4rem 0 1.8rem;
		border-radius: 0 0 2.5rem 2.5rem;
		margin: 0;
	}
	.m-dep3-list li { margin-bottom: 0.7rem; }
	.m-dep3-list li:last-child { margin-bottom: 0; }
	a.m-dep3-link {
		display: flex;
		align-items: center;
		padding: 0.7rem 3rem;
		font-size: 1.6rem; letter-spacing: -0.03em; font-weight: 600; color: #888; position: relative;
		background: #fff;
		border-radius: 5rem;
		text-decoration: none;
		transition: color 0.2s, padding-left 0.2s;
	}
	a.m-dep3-link::before {
		position: absolute; top: 0; left: 2.5rem; font-size: 2.4rem; color: var(--main-color); transform: rotate(90deg); opacity: 0;
		content: "\e930"; font-family: xeicon; display: inline-block; flex-shrink: 0; transition: opacity 0.2s;
	}
	.m-dep3-list li a.m-dep3-link:hover,
	.m-dep3-list li.m-active-item a.m-dep3-link {font-weight: 600; color: #555; padding-left: 5rem;}
	.m-dep3-list li a.m-dep3-link:hover::before,
	.m-dep3-list li.m-active-item a.m-dep3-link::before { opacity: 1; }

}