@charset "utf-8";

/* 메인에서는 영상 위 투명 헤더, 서브에서는 흰색 고정 높이 헤더를 공유합니다. */
#header.site-header{
	position:relative;
	z-index:200;
	width:100%;
	height:100px;
	background:#fff;
	border:0;
	box-shadow:0 1px 0 rgba(0,0,0,.06);
}

.main-page #header.site-header{
	position:absolute;
	top:0;
	left:0;
	background:transparent;
	box-shadow:none;
}

/* 전체 메뉴가 열린 동안 메인·서브 공통으로 상단 바를 흰색 상태로 맞춥니다. */
#header.site-header.desktop-menu-open,
.main-page #header.site-header.desktop-menu-open{
	background:#fff;
	box-shadow:none;
}

#header.site-header.desktop-menu-open .gnb .d1 > .m{
	color:#222;
}

#header.site-header.desktop-menu-open .gnb .d1 > .m:hover,
#header.site-header.desktop-menu-open .gnb .d1 > .m:focus{
	color:var(--renewal-magenta);
}

#header .site-header-inner{
	position:relative;
	display:grid;
	grid-template-columns:304px minmax(560px,1fr) 305px;
	align-items:center;
	width:100%;
	max-width:100%;
	height:100px;
	padding:0;
}

#header .logo{
	width:304px;
	margin:0;
	padding:0;
}

#header .logo a,
#header .logo img{
	display:block;
	width:304px;
	height:100px;
	background:none;
	text-indent:0;
}

#header .gnb{
	position:relative;
	width:auto;
	height:100px;
	min-width:0;
	padding:0;
	background:transparent;
	border:0;
	overflow:visible;
}

#header .gnb:after{
	display:none;
}

#header .gnb > .d0{
	display:flex;
	width:100%;
	max-width:1100px;
	height:100px;
	margin:0 auto;
	padding:0;
}

#header .gnb .d1{
	position:relative;
	display:block;
	flex:1 1 auto;
	width:auto;
	padding:0;
	border:0;
}

#header.site-header .gnb .d1 > .m{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100% !important;
	height:100px !important;
	padding:0 10px;
	background:none !important;
	color:#222;
	font-size:19px !important;
	font-weight:700;
	line-height:1.25;
	letter-spacing:-.7px;
	text-indent:0;
	white-space:nowrap;
}

#header .gnb .d1 > .m:hover,
#header .gnb .d1 > .m:focus{
	color:var(--renewal-magenta);
}

#header .gnb .d1 .d2{
	display:none;
}

#header .gnb .d2 ul,
#header .gnb .d2 li{
	width:auto;
	margin:0;
	padding:0;
}

#header .gnb .d2 ul{
	text-align:left;
}

#header .gnb .d2 li{
	display:block;
	vertical-align:baseline;
}

#header .gnb .d2 a{
	position:static;
	display:block;
	padding:10px 12px;
	border-radius:8px;
	background:transparent;
	color:#333;
	font-size:14px;
	line-height:1.4;
	text-indent:0;
	text-align:left;
}

/* 구형 메뉴 CSS의 화살표 장식이 새 메뉴에 섞이지 않도록 제거합니다. */
#header .gnb .d2 a:before{
	display:none !important;
	content:none !important;
}

#header .gnb .d2 a:hover,
#header .gnb .d2 a:focus{
	background:#fff0f6;
	color:var(--renewal-magenta);
}

/* 데스크톱에서는 어느 1차 메뉴에 올려도 모든 2차 메뉴를 한 번에 펼칩니다. */
@media all and (min-width:901px){
	#header .gnb:before{
		position:absolute;
		top:100px;
		left:-304px;
		z-index:19;
		width:100vw;
		height:150px;
		background:#fff;
		box-shadow:0 10px 20px rgba(0,0,0,.1);
		content:"";
		opacity:0;
		visibility:hidden;
		transition:opacity .18s ease, visibility .18s ease;
	}

	#header .gnb:hover:before,
	#header .gnb:focus-within:before{
		opacity:1;
		visibility:visible;
	}

	#header .gnb .d1 .d2{
		display:block;
		position:absolute;
		top:100px;
		left:0;
		right:auto;
		z-index:20;
		width:100%;
		height:150px;
		padding:18px 8px;
		box-sizing:border-box;
		transform:none;
		border:0;
		border-radius:0;
		background:transparent;
		box-shadow:none;
		opacity:0;
		visibility:hidden;
		pointer-events:none;
		transition:opacity .18s ease, visibility .18s ease;
	}

	#header .gnb:hover .d1.has-submenu .d2,
	#header .gnb:focus-within .d1.has-submenu .d2{
		opacity:1;
		visibility:visible;
		pointer-events:auto;
	}

	#header .gnb .d2 a{
		padding:9px 6px;
		text-align:center;
	}
}

#header .header-utility{
	display:grid;
	grid-template-columns:205px 100px;
	align-items:stretch;
	width:305px;
	height:100px;
	background:url("/img/header_campaign.png") 0 0 / 305px 100px no-repeat;
}

#header .header-campaign,
#header .header-campaign img{
	display:block;
	width:205px;
	height:100px;
}

#header .header-campaign img{
	width:305px;
	max-width:none;
	opacity:0;
}

#header .header-search-toggle{
	position:relative;
	width:100px;
	height:100px;
	padding:0;
	border:0;
	background:transparent;
}

/* 검색 아이콘은 SVG 대신 CSS 원과 선으로 구성합니다. */
#header .header-search-toggle:before{
	display:none;
	position:absolute;
	top:31px;
	left:31px;
	width:28px;
	height:28px;
	border:3px solid #fff;
	border-radius:50%;
	content:"";
}

#header .header-search-toggle:after{
	display:none;
	position:absolute;
	top:60px;
	left:59px;
	width:18px;
	height:3px;
	background:#fff;
	transform:rotate(45deg);
	transform-origin:left center;
	content:"";
}

#header .header-search-panel{
	position:absolute;
	top:0;
	right:100px;
	z-index:30;
	width:0;
	height:100px;
	padding:18px 0;
	overflow:hidden;
	border-radius:18px 0 0 18px;
	background:#fff;
	box-shadow:-10px 8px 24px rgba(0,0,0,.12);
	opacity:0;
	visibility:hidden;
	transform:translateX(18px);
	transition:width .28s ease,padding .28s ease,opacity .18s ease,transform .28s ease,visibility 0s linear .28s;
}

#header .header-search-panel.is-open{
	width:460px;
	padding-right:18px;
	padding-left:18px;
	opacity:1;
	visibility:visible;
	transform:translateX(0);
	transition-delay:0s;
}

#header .header-search-form{
	display:grid;
	grid-template-columns:minmax(0,1fr) 66px;
	align-items:center;
	gap:8px;
	height:64px;
}

#header .header-search-form label{
	position:absolute;
	overflow:hidden;
	width:1px;
	height:1px;
	margin:-1px;
	clip:rect(0,0,0,0);
}

#header .header-search-form input{
	min-width:0;
	height:44px;
	padding:0 16px;
	border:2px solid #734684;
	border-radius:12px;
	font-size:14px;
	outline:0;
	transition:border-color .18s ease,box-shadow .18s ease;
}

#header .header-search-form input:focus{
	border-color:#5d346d;
	box-shadow:0 0 0 4px rgba(93,52,109,.14);
}

#header .header-search-form button{
	height:44px;
	padding:0 14px;
	border:0;
	border-radius:8px;
	background:#5d346d;
	color:#fff;
	font-weight:700;
}

#header .mobile-menu-button{
	display:none;
}

@media all and (max-width:1250px){
	#header .site-header-inner{
		grid-template-columns:235px minmax(470px,1fr) 205px;
	}

	/* 축소된 로고 열 너비만큼 당겨 전체 메뉴 배경을 화면 왼쪽에 맞춥니다. */
	#header .gnb:before{
		left:-235px;
	}

	#header .logo,
	#header .logo a,
	#header .logo img{
		width:235px;
	}

	#header .logo img{
		height:auto;
	}

	#header .header-utility{
		grid-template-columns:145px 60px;
		width:205px;
	}

	#header .header-campaign,
	#header .header-campaign img{
		width:145px;
	}

	#header .header-utility{
		background-size:205px 67px;
		background-position:right center;
	}

	#header .header-search-toggle{
		width:60px;
	}

	#header .header-search-panel{
		right:60px;
	}

	#header .header-search-panel.is-open{
		width:390px;
	}

	#header.site-header .gnb .d1 > .m{
		font-size:16px !important;
	}
}

@media all and (max-width:900px){
	#header.site-header,
	.main-page #header.site-header{
		height:76px;
		background:rgba(255,255,255,.96);
		box-shadow:0 1px 8px rgba(0,0,0,.08);
	}

	#header .site-header-inner{
		display:flex;
		height:76px;
	}

	#header .logo,
	#header .logo a,
	#header .logo img{
		width:220px;
	}

	#header .logo img{
		height:auto;
	}

	#header .header-utility{
		display:none;
		background:none;
	}

	#header .header-search-panel{
		display:none;
	}

	#header .mobile-menu-button{
		display:block;
		position:absolute;
		top:17px;
		right:20px;
		width:42px;
		height:42px;
		padding:9px;
		border:0;
		background:transparent;
	}

	#header .mobile-menu-button > span:not(.screen-out){
		display:block;
		height:3px;
		margin:5px 0;
		border-radius:2px;
		background:#5d346d;
	}

	#header .gnb{
		display:none;
		position:absolute;
		top:76px;
		left:0;
		width:100%;
		height:auto;
		background:#fff;
		box-shadow:0 12px 20px rgba(0,0,0,.12);
	}

	#header .gnb.mobile-open{
		display:block;
	}

	#header .gnb > .d0{
		display:block;
		height:auto;
		padding:10px 18px 18px;
	}

	#header .gnb .d1{
		width:100%;
	}

	#header.site-header .gnb .d1 > .m{
		justify-content:flex-start;
		height:48px !important;
		padding:0 14px;
		font-size:16px !important;
	}

	#header .gnb .d1 .d2,
	#header .gnb .d1:hover .d2,
	#header .gnb .d1:focus-within .d2{
		display:none;
		position:static;
		top:auto;
		left:auto;
		right:auto;
		z-index:auto;
		width:auto;
		height:auto;
		padding:4px 12px 10px 26px;
		transform:none;
		border:0;
		border-radius:0;
		background:#fff;
		box-shadow:none;
		opacity:1;
		visibility:visible;
		pointer-events:auto;
	}

	#header .gnb .d1.submenu-open .d2{
		display:block;
	}
}

@media all and (max-width:480px){
	#header .logo,
	#header .logo a,
	#header .logo img{
		width:190px;
		height:76px;
	}

	#header .logo img{
		height:auto;
		margin-top:5px;
	}
}