/* 공통 헤더(로고·슬로건·메뉴) 스타일.
   메인과 서브 페이지가 서로 다른 CSS로 헤더를 그려 모양이 달랐던 것을 통일하기 위해
   메인 쪽 규칙(css/mobile_shop.css)에서 헤더 부분만 모아 모든 페이지에 마지막으로 적용한다. */

/* 1) 서브 페이지 쪽 CSS에만 있던 헤더 규칙을 기본값으로 되돌린다 (아래 2)의 규칙이 이 위에 덮인다) */
#header {
  color: #666;
  letter-spacing: -0.06em;
}
:where(#header) a {
  color: #000;
}
.hd_right_btn {
  margin: 0;
}
#scroll_top_gnb {
  position: static;
}
.nav-bar {
  background: transparent;
}
.nav-bar > ul > li > a {
  padding: 0;
}
.nav-bar > ul > li:nth-child(6) > a:after {
  display: inline-block;
}
.sub-menu.open {
  border-top: 0;
  box-shadow: none;
  box-sizing: content-box;
}
#hd_wr_inner #logo {
  max-width: none;
  margin: 0;
}
@media (max-width: 1279px) {
  label.menu-toggle div {
    float: none;
  }
}

/* 2) 메인 페이지의 헤더 규칙 */

.font-mont {font-family:"Montserrat", sans-serif;}
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;height:0px}
#hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#hd {position:relative}
#hd h1 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#hd_wr {width:100%;background:#fff;border-bottom:1px solid #eee}
#hd_wr_inner {position:relative;margin:0 auto;width:95%; max-width:1820px;}
.hd_right_btn {position:absolute;top:10px;right:0;margin-top:20px; z-index:100;}
.hd_right_btn button {
	border: none;
    background: none;
	width:auto;
    height: 35px;
    padding-left: 3em;
    margin-left: 3px;
    font-size: 1.2em;
    position: relative;
}
.hd_right_btn .top-search {width:23px; height:23px; display:block; background:url('/img/main/search_icon.png')no-repeat center; background-size:cover;}
.hd_right_btn .hd_news_btn i {
    width: 28px;
    height: 35px;
    display:inline-block;
    background: url('/img/main/news_icon.png')no-repeat center;
    background-size: cover;
	margin-left:.4em;
}
.hd_right_btn>a {float:left;display:inline-block;width:35px;height:35px;line-height:35px;margin-left:3px;border:0;background:0;text-align:center;font-size:1.2em;vertical-align:top;color:#3c3c3c}
.hd_right_btn .cart {position:relative}
.hd_right_btn .cart .cart-count {position:absolute;top:20%;right:0px;display:block;height:16px;line-height:16px;background:#ff4444;font-size:11px;color:#fff;padding:0 5px;border-radius:50%}
.top-menu {overflow:hidden; text-align:right; display:block;}
.top-menu li {display:inline-block;}
.top-menu li a { font-size:1.4rem; color:#5e5e5e;}
.top-menu li:after {content:'I'; font-family:"Montserrat", sans-serif; font-weight:200; color:#cecece; margin:0 .6em;}
.top-menu li:last-child::after {display:none;}
.top-menu li:first-child::after {display:none;}
.top-menu li:first-child {margin-right:1.5em;}

#top_slogan {
	text-align: center;
    display: inline-block;
    width: auto;
    position: absolute;
    top: 2.2em;
    left: 50%;
    transform: translateX(-50%);
}
#top_slogan h2 {font-size:2.6rem; color:#004093; opacity:1; transition:.5s ease;}
.fixed #top_slogan h2 {opacity:0; font-size:0; transition:.5s ease;}
.fixed #scroll_top_gnb {
	position: absolute;
    top:37px;
}
.fixed .nav-bg {top:92px;}
.fixed .sub-menu {top:69px;}

#scroll_top_gnb {
	display: flex;
    margin: 0 auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    transition: .5s ease;
	z-index:99;
}
.nav-bar {
    width: 100%;
    display: block;
    text-align: center;
    margin: 0 auto;
}
.nav-bar > ul{ text-align: center;}
.nav-bar > ul > li {display: inline-block; margin:0 -2px}
.nav-bar > ul > li > a {
	display: block;
    line-height: 60px;
    cursor: pointer;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: #000;
    position: relative;
}
.nav-bar > ul > li > a:after {
	content:'I';
	display:inline-block;
	font-family:'Montserrat', Sans-serif;
	font-weight:200;
	color:#dddddd;
	margin:0 1em;
}
.nav-bar > ul > li > a.mb-b {display:none;}
.nav-bar > ul > li > a.pc-b {display:block;}
.nav-bar > ul > li > .mb-link {display:none;}
.nav-bar > ul > li:nth-child(7) > a:after {display:none;}
.nav-bar > ul > li.club {display:none;}
.nav-bar > ul > li.club > a { display:block; padding:0 1em;}
.nav-bar > ul > li.club > a:after {
    content: 'IGMP 700인 CEO클럽';
	font-family: 'Noto Sans Korean', sans-serif;
	font-weight:500;
    color: #fff;
    display: block;
    width: 100%;
    line-height: 38px;
    border-radius: 30px;
    background: #45a2e6;
    position: absolute;
    top:20px;
    left: 0;
    margin: 0;
}


.nav-bar ul li span {display:none;}
.nav-bar ul li a.active {color:#34b458}
.sub-menu {width:100%;height:0px;position:absolute;top:132px;left:0; opacity:0; background:#f3f3f3;transition: all ease .4s;z-index:2;overflow: hidden;}
.sub-menu.open {height:auto; opacity:1; padding-bottom:8em;}
.sub-menu.about .inner {width:100%; max-width:1280px; margin:0 auto;}
.sub-menu.about .depth2 {width: calc(24% - -0.82em); display: inline-block; float: left; border-right:0; position:relative; overflow:unset; padding-left:1% }
.sub-menu.about .depth2 li {display:block; width:100%;}
.sub-menu.about .depth2:before {
	content:'';
	display:block;
	width:1px;
	height:19vh;
	background:#ddd;
	position:absolute;
	top:0;
	left:0;
}
.sub-menu.about .depth2 > li:before {display:none;}

.nav-bg {width:100%;height: 0; background: rgba(0,0,0,0.5); opacity:0;position: absolute;left: 0;top: 147px;  transition: opacity 0.6s ease;}
.nav-bg span{ width: 100%;  height: 0; background: #f3f3f3; transition: height 0.3s ease-out;}
.nav-bg.open { height: 100vh; opacity:1; display:block; z-index:2;}
.nav-bg.open span{height:314px; }

.nav-bn {display:none; height:0; opacity:0; transition: all ease .4s;}
.nav-bn.open {
	display:block;
	width: 100%;
    height: 120px;
    position: absolute;
    bottom:0;
    left: 0;
    opacity: 1;
    background: #112d7c;
    transition: all ease .4s;
    z-index: 2;
    overflow: hidden;
	background-position:center;
}



.sub-menu .depth2 {
	width: 100%;
  max-width: 1280px;
  margin: 0 auto;
	border-right:1px solid #ddd;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}

.sub-menu .depth2 li {
    /* display: inline-block; */
    width: calc(24% - -0.82em);
    margin-bottom: 10px;
    text-align: left;
    /* float: left; */
    position: relative;
    padding: 0 2%;
}
.sub-menu .depth2 > li:before {
	content:'';
	display:block;
	width:1px;
	height:100vh;
	background:#ddd;
	position:absolute;
	top:0;
	left:0;
}

.sub-menu .depth2 li h3 a {
	font-size:1.7rem;
	font-weight:500;
    color: #373737;
    display: block;
	position:relative;
}
.sub-menu .inner {padding:1.8em 0; overflow:hidden;}
.sub-menu .depth2 li h3 a:hover {color:#004093;}

.sub-menu .depth2 li .depth3 {position:relative; padding:1em 0 .8em 0; overflow:hidden;}
.sub-menu .depth2 li .depth3 li {width:100%; display:block;}
.sub-menu .depth2 li .depth3 li a {font-size:1.5rem; color:#535353; position:relative; padding-left:.6em;}
.sub-menu .depth2 li .depth3 li a:before {
	content: '';
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 100%;
    background: #788196;
    position: absolute;
    left: 0;
    top: .7em;
}
.sub-menu .depth2 li .depth3 li a:hover {color:#004093;}
.sub-menu .depth2.ns-column li > h3~h3 {margin-top: 1em;}
@media (min-width: 640px) {
	.sub-menu .depth2.ns-column li {width: 20%}
	.sub-menu .depth2.ns-column li.large {width: 60%}
	.sub-menu .depth2.ns-column li.large .depth3 {display: flex; flex-flow: column wrap; height: 288px;}
	.sub-menu .depth2.ns-column li .depth3 li { width: auto;}}
#hd #btn_hdmy {position:absolute;top:10px;right:45px}
#hd_wr_inner #logo {
	display: inline-block;
    float: left;
    margin-top: 26px;
	position:relative;
	z-index:100;
}
#hd_wr.fixed {position:fixed;top:0;left:0;z-index:999}
#hd_wr.fixed #hd_wr_inner {height:105px}
#hd_wr.fixed #hd_wr_inner #logo {display:inline-block;float:left;margin-top:26px}
#hd_wr.fixed #btn_hdcate {display:none;margin-top:20px}
#hd_wr.fixed .hd_right_btn {margin-top:10px}
#hd_wr.fixed #sidr {display:none}
#hd_wr.fixed .tnb_con {top:105px}
.hd-mbtn {display:none;}
@media (max-width:1500px) {
	#top_slogan {top:2.4em;}}
@media (max-width:1279px) {
	#top_slogan  {left:56%; width:64%;}
	#top_slogan h2 {font-size:2.3rem;}
	nav.nav-bar {
	position: fixed;
		display: block;
		top: 192px;
		right: -320px;
		bottom: 0;
		width: 360px;
		background: #fff;
		padding-right: 0;
		border-top: 1px solid #eaeaea;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		transition: all 0.3s ease;
		z-index: 5;
		overflow-y: scroll;
		overflow-x:hidden;
	}
	#hd_wr {height:92px;}
	.hd_right_btn {margin-top:0;}
	.nav-bar > ul > li {display:block; border-bottom:1px solid #ececec; position:relative;}
	.nav-bar > ul > li > a {line-height: 30px; padding: 10px 20px; text-align:left;}
	.nav-bar > ul > li > a:after {display:none;}
	.nav-bar > ul > li > a.mb-b {display:inline-block; float:left;}
	.nav-bar > ul > li > .mb-link {display:inline-block; float:right; margin:13px 20px; font-size:2rem; color:#004093;}
	.nav-bar > ul > li > a.pc-b {display:none;}
	.sub-menu, .fixed .sub-menu {position:relative; top:0; padding-bottom:0;}
	.sub-menu.open {padding-bottom:0;}
	.sub-menu .depth2 {border-right:0;}
	.sub-menu.about .depth2 {width:100%;}
	.sub-menu .depth2 li {display:block; width:100%;}
	.sub-menu .inner {padding:1em;}
	.sub-menu .depth2 > li:before, .sub-menu.about .depth2:before  {display:none;}
	.nav-bar > ul > li.club > a {line-height:50px;}
	.nav-bar > ul > li.club > a:after {padding:10px 20px; line-height:30px;border-radius:0; top:0;}
	.nav-bg.open {display:none;}
	.nav-bn.open {display:none;}
	.top-menu li:first-child {width:100%; margin-bottom:1em;}
	.nav-bar > ul > li.club {display:block;}
    .hd_right_btn {margin-top:0;margin-right:20px;}}
@media (max-width:970px) {
    #hd_wr_inner #logo img {width:70%}
    #hd_wr.fixed {}
	#hd_wr.fixed #hd_wr_inner {height:60px}
	#hd_wr.fixed #btn_hdcate {display:inline-block;margin-top:0}
	#hd_wr.fixed .hd_right_btn {margin-top:0}
	#hd_wr.fixed #sidr {display:none}
	#hd_wr.fixed .tnb_con {top:60px}}

#hd_sch {text-align:center;padding:0 0 10px}
#hd_sch h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#hd_sch .sch_inner {position:relative}
#hd_sch #sch_str {width:100%;height:40px;border-radius:20px;border:1px solid #eee;background:#f7f7f7;padding:0 40px 0 20px}
#hd_sch .sch_submit {position:absolute;top:2px;right:5px;width:40px;height:35px;border:0;border-radius:0 3px 3px 0;cursor:pointer;background:none;font-size:15px;color:#333}
#hd_login_msg {position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden}
@media (max-width:1600px) {
	.hd_right_btn {width:360px; display:block;}}
@media (max-width:1279px) {
	#hd_wr.fixed .hd_right_btn, #hd_wr .hd_right_btn  {
		background: #fff;
		position: fixed;
		max-width: 360px;
		width: 100%;
		height:100px;
		top: 92px;
		right: -320px;
		margin-right:0;
		padding:1em 2%;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		transition: all 0.3s ease;
		border-left:1px solid #dddddd;
	}
	#hd_wr.fixed .hd_right_btn.open, #hd_wr .hd_right_btn.open  {
		right: 0px;
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
		#hd_wr.fixed .hd_right_btn {margin-top:0;}
	.hd-mbtn { position:relative; float:right; display:inline-block; margin-top:2em;}
	label.menu-toggle {
	cursor: pointer;
		display: inline-block;
		z-index: 100;
		width: 35px;
		height: 35px;
		border-radius: 100%;
		transition: all ease .4s;
		transform: rotate(90deg);
	}
	.line {
	  display: inline-block;
	  width: 2px;
	  height: 27px;
	  background: #000;
	  border-radius: 6px;
	  transition: 0.3s ease,  0.3s ease;
	}
	.line-2 {height:27px; margin-left: 5px;}
	.line-3 {height:17px; margin-left: 5px;}
	.line-4 {display:none;}
	.overlay {
	  display: block;
	  position: fixed;
	  top: 92px;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 3;
	  pointer-events: none;
	  background:rgba(0,0,0,0.6);
	  background-size:cover;
	  opacity: 0;
	  transition: opacity 0.6s ease;
	}

	#menu-toggle {
	  opacity:0;
	}
	#menu-toggle:checked ~ label.menu-toggle {
	top: 6px;
	position:absolute;
	right:2%;
	}
	#menu-toggle:checked ~ .menu-toggle .line-1 {
	  -webkit-transform: translateY(0) rotate(45deg);
	  transform: translateX(0) translateY(0) rotate(45deg);
	  -webkit-transform-origin: 50%;
	  transform-origin: 50%;
	  background:#000;
	}
	#menu-toggle:checked ~ .menu-toggle .line-2 {
	  -webkit-transform: translateY(0) rotate(-45deg);
	  transform: translateX(-5px) translateY(0) rotate(-45deg);
	  -webkit-transform-origin: 50%;
	  transform-origin: 50%;
	  margin-top:4px;
	  background:#000;
	  margin-left:0;
	}
	#menu-toggle:checked ~ .menu-toggle .line-3 {display:none;}
	.nav-bar.open {
	  -webkit-transform: translateX(0);
			transform: translateX(0);
			right: 0px;
			opacity:100;
			border-left:1px solid #dddddd;
	}
	#menu-toggle:checked ~ #header {background:#fff;}

	#menu-toggle:checked ~ nav ul li {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	}
	#menu-toggle:checked ~ .overlay {
	  opacity: 1;
	  pointer-events: all;
	  display:none;
	}}
@media (max-width:800px) {
	#hd_wr.fixed .hd_right_btn, #hd_wr .hd_right_btn {top:81px;}
	.nav-bar.open {top:181px;}
	#hd_wr { height:82px;}
	.overlay {top:82px;}}
@media (max-width:600px) {
	#hd_wr {padding:0 3%;}
	#top_slogan {display:none;}}
@media (max-width:320px) {
	#hd_wr.fixed .hd_right_btn, #hd_wr .hd_right_btn, nav.nav-bar {max-width:100%;}}
@media (max-width:800px) {
	
	.top-menu {text-align:left; margin-left:10px;}}

/* 3) PC 배치: 맨 위 슬로건 띠 + (로고 왼쪽 · 메뉴 오른쪽) 한 줄
      1279px 이하는 아래 4) 의 모바일 헤더를 쓴다. */
@media (min-width: 1280px) {
  #hd {
    --hd-strip: 34px;
    --hd-row: 76px;
    min-height: calc(var(--hd-strip) + var(--hd-row) + 1px); /* 헤더가 고정될 때 본문이 튀어 오르지 않게 자리 확보 */
  }
  #hd_wr {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: var(--hd-strip) var(--hd-row);
    grid-template-areas: 'slogan slogan' 'logo nav';
    align-items: center;
    box-sizing: border-box;
    padding: 0 max(40px, calc((100% - 1400px) / 2)) !important;
    background: linear-gradient(to bottom, #004093 var(--hd-strip), #fff var(--hd-strip));
  }
  #hd_wr > #hd_wr_inner {
    display: contents;
  }
  .hd-mbtn,
  #hd_btn {
    display: none;
  }

  /* 슬로건 띠 */
  #top_slogan {
    grid-area: slogan;
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--hd-strip);
    overflow: hidden;
  }
  #top_slogan h2,
  .fixed #top_slogan h2 {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: #fff;
    opacity: 1;
    transition: none;
  }

  /* 로고 */
  #hd_wr > #hd_wr_inner > #logo,
  #hd_wr.fixed #hd_wr_inner #logo {
    grid-area: logo;
    display: block;
    float: none;
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
  }
  #logo img {
    width: auto;
    height: 40px;
  }

  /* 메뉴 */
  #scroll_top_gnb,
  .fixed #scroll_top_gnb {
    grid-area: nav;
    position: static;
    width: auto;
    margin: 0;
    justify-content: flex-end;
    transition: none;
  }
  .nav-bar {
    width: auto;
    margin: 0;
  }
  .nav-bar > ul {
    text-align: right;
  }
  .nav-bar > ul > li {
    margin: 0;
  }
  .nav-bar > ul > li > a {
    padding: 0 20px;
    line-height: var(--hd-row);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0;
    color: #222;
    transition: color 0.15s ease;
  }
  .nav-bar > ul > li:last-child > a {
    padding-right: 0;
  }
  .nav-bar > ul > li:hover > a {
    color: #004093;
  }
  .nav-bar > ul > li > a:after,
  .nav-bar > ul > li:nth-child(6) > a:after {
    display: none;
  }
  /* 올린 메뉴 표시: 아래쪽 남색 줄 */
  .nav-bar > ul > li {
    position: relative;
  }
  .nav-bar > ul > li > a::before {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 2px;
    background: #004093;
    transform: scaleX(0);
    transition: transform 0.18s ease;
  }
  .nav-bar > ul > li:last-child > a::before {
    right: 0;
  }
  .nav-bar > ul > li:hover > a::before,
  .nav-bar > ul > li.is-open > a::before {
    transform: scaleX(1);
  }
  .nav-bar > ul > li.is-open > a {
    color: #004093;
  }

  /* 하위 메뉴: 화면 전체를 덮는 풀메뉴 대신, 해당 메뉴 바로 아래에 뜨는 카드형 드롭다운.
     높이를 늘였다 줄이지 않고 살짝 떠오르며 나타나기만 한다(내용이 밀리거나 출렁이지 않음). */
  .nav-bg {
    display: none !important;
  }
  #hd .nav-bar .sub-menu {
    --shift: 0px; /* 화면 밖으로 나가지 않게 site.js 가 좌우로 밀어 주는 값 */
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 10;
    width: max-content;
    height: auto;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: visible;
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(16, 34, 68, 0.12), 0 2px 6px rgba(16, 34, 68, 0.06);
    text-align: left;
    letter-spacing: -0.01em;
    display: none; /* 닫힌 카드가 화면 폭을 넓혀 가로 스크롤을 만들지 않게 아예 빼 둔다 */
    transform: translateX(calc(-50% + var(--shift)));
    transition: none; /* 예전 CSS의 transition: all 을 끈다 */
  }
  #hd .nav-bar .sub-menu.open {
    display: block;
    animation: hd-drop-in 0.16s ease both;
  }
  @keyframes hd-drop-in {
    from {
      opacity: 0;
      translate: 0 6px;
    }
  }
  /* 메뉴와 카드 사이 틈에서 마우스가 빠져도 닫히지 않게 이어 주는 영역 */
  #hd .nav-bar .sub-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
  }
  #hd .sub-menu .inner {
    padding: 24px 28px;
    overflow: visible;
  }
  #hd .sub-menu .depth2 {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 24px 36px;
    width: auto;
    max-width: none;
    margin: 0;
    border: 0;
    overflow: visible;
  }
  #hd .sub-menu .depth2 li {
    width: auto;
    margin: 0;
    padding: 0;
  }
  #hd .sub-menu .depth2 > li {
    min-width: 150px;
  }
  #hd .sub-menu .depth2 > li::before {
    display: none;
  }
  #hd .sub-menu .depth2 h3 {
    margin: 0;
    padding-bottom: 9px;
    border-bottom: 1px solid #e9edf3;
    line-height: 1.4;
  }
  #hd .sub-menu .depth2 h3 a {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #004093;
  }
  #hd .sub-menu .depth2 .depth3 {
    padding: 8px 0 0;
    overflow: visible;
  }
  #hd .sub-menu .depth2 .depth3 li a,
  #hd .sub-menu--list .depth2 h3 a {
    display: block;
    margin: 0 -10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: #333;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
  }
  #hd .sub-menu .depth2 .depth3 li a::before {
    display: none;
  }
  #hd .sub-menu .depth2 .depth3 li a:hover,
  #hd .sub-menu .depth2 .depth3 li a:focus-visible,
  #hd .sub-menu--list .depth2 h3 a:hover,
  #hd .sub-menu--list .depth2 h3 a:focus-visible {
    background: #f1f5fb;
    color: #004093;
  }

  /* 목록형(항목이 한 묶음뿐인 메뉴): 묶음 제목 없이 한 줄씩 */
  #hd .sub-menu--list .inner {
    padding: 10px 20px;
  }
  #hd .sub-menu--list .depth2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #hd .sub-menu--list .depth2 > li {
    min-width: 160px;
  }
  #hd .sub-menu--list .depth2 h3 {
    padding: 0;
    border: 0;
  }
  #hd .sub-menu--list .depth2 h3:not(:only-child) {
    display: none;
  }
  #hd .sub-menu--list .depth2 .depth3 {
    padding: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    #hd .nav-bar .sub-menu.open {
      animation: none;
    }
    .nav-bar > ul > li > a::before {
      transition: none;
    }
  }

  /* 스크롤 시: 슬로건 띠는 접고 로고·메뉴 줄만 상단에 고정 */
  #hd_wr.fixed {
    grid-template-rows: 0 var(--hd-row);
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
  #hd_wr.fixed #top_slogan {
    height: 0;
  }
}

/* 4) 태블릿·모바일(1279px 이하): 상단에 붙는 얇은 헤더(로고 왼쪽 · 메뉴 버튼 오른쪽)와
      오른쪽에서 나오는 메뉴. 하위 메뉴는 눌러서 펼치는 아코디언.
      이 구간은 기준 글자 크기(rem)가 화면 폭에 따라 달라지므로 px 로 적는다. */
@media (max-width: 1279px) {
  #top_slogan,
  #hd_btn {
    display: none;
  }
  html.menu-open {
    overflow: hidden; /* 메뉴가 열린 동안 뒤 화면이 같이 스크롤되지 않게 */
  }
  html.menu-open .fixed_quick {
    display: none; /* 카카오톡·지도·전화 버튼이 메뉴를 가리지 않게 */
  }

  /* 헤더 줄 */
  #hd {
    --mh: 60px;
    height: var(--mh); /* 헤더가 화면에 고정되므로 그만큼 자리를 비워 둔다 */
  }
  #hd #hd_wr,
  #hd #hd_wr.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: var(--mh);
    padding: 0 !important;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #e9ecf1;
  }
  #hd #hd_wr > #hd_wr_inner,
  #hd #hd_wr.fixed > #hd_wr_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0 8px 0 16px;
  }
  #hd #hd_wr #hd_wr_inner #logo {
    display: block;
    float: none;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
  }
  #hd #logo img {
    width: auto;
    height: 30px;
  }

  /* 메뉴 버튼: 줄 3개 ↔ X */
  #hd .hd-mbtn {
    position: static;
    float: none;
    display: block;
    margin: 0;
  }
  #hd #menu-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  #hd label.menu-toggle,
  #hd #menu-toggle:checked ~ label.menu-toggle {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    transform: none;
    cursor: pointer;
  }
  #hd #menu-toggle:focus-visible ~ label.menu-toggle {
    outline: 2px solid #004093;
  }
  #hd .menu-toggle .line,
  #hd #menu-toggle:checked ~ .menu-toggle .line {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    background: #111;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  #hd #menu-toggle:checked ~ .menu-toggle .line-1 {
    transform: translateY(8px) rotate(45deg);
  }
  #hd #menu-toggle:checked ~ .menu-toggle .line-2 {
    transform: none;
    opacity: 0;
  }
  #hd #menu-toggle:checked ~ .menu-toggle .line-3 {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* 메뉴 뒤 어두운 배경(누르면 닫힘) */
  #hd .overlay,
  #hd #menu-toggle:checked ~ .overlay {
    display: block;
    position: fixed;
    top: var(--mh);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    background: rgba(10, 20, 40, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  #hd #menu-toggle:checked ~ .overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* 오른쪽에서 나오는 메뉴 */
  #hd nav.nav-bar,
  #hd nav.nav-bar.open {
    position: fixed;
    top: var(--mh);
    right: 0;
    bottom: 0;
    z-index: 5;
    width: min(400px, 100%);
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    box-sizing: border-box;
    background: #fff;
    border: 0;
    opacity: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
  }
  #hd nav.nav-bar {
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.24s ease, visibility 0s linear 0.24s;
  }
  #hd nav.nav-bar.open {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
    box-shadow: -12px 0 30px rgba(16, 34, 68, 0.12);
  }

  /* 1차 메뉴 */
  #hd .nav-bar > ul {
    text-align: left;
  }
  #hd .nav-bar > ul > li {
    display: block;
    margin: 0;
    border-bottom: 1px solid #eef0f4;
  }
  #hd .nav-bar > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: #111;
    text-align: left;
  }
  #hd .nav-bar > ul > li > a::after {
    display: none;
  }
  /* 하위 메뉴가 있는 항목: 펼침 화살표 */
  #hd .nav-bar > ul > li.has-sub > a::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    margin: -4px 4px 0 0;
    border: solid #8a94a6;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  #hd .nav-bar > ul > li.is-open > a {
    color: #004093;
  }
  #hd .nav-bar > ul > li.is-open > a::after {
    margin-top: 4px;
    border-color: #004093;
    transform: rotate(-135deg);
  }

  /* 하위 메뉴(아코디언) */
  #hd .nav-bar .sub-menu {
    display: none;
    position: static;
    width: auto;
    height: auto;
    padding: 0 !important;
    opacity: 1;
    overflow: visible;
    background: #f6f8fb;
    border: 0;
    box-shadow: none;
    transition: none;
  }
  #hd .nav-bar .sub-menu.open {
    display: block;
  }
  #hd .sub-menu .inner {
    padding: 4px 20px 16px;
    overflow: visible;
  }
  #hd .sub-menu .depth2 {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    border: 0;
    overflow: visible;
  }
  #hd .sub-menu .depth2 li {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  #hd .sub-menu .depth2 > li::before {
    display: none;
  }
  #hd .sub-menu .depth2 h3 {
    margin: 0;
    padding: 14px 0 4px;
    line-height: 1.4;
  }
  #hd .sub-menu .depth2 h3 a {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #004093;
  }
  #hd .sub-menu .depth2 .depth3 {
    padding: 0;
    overflow: visible;
  }
  #hd .sub-menu .depth2 .depth3 li a,
  #hd .sub-menu--list .depth2 h3 a {
    display: block;
    padding: 9px 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #333;
  }
  #hd .sub-menu .depth2 .depth3 li a::before {
    display: none;
  }
  /* 목록형: 묶음 제목 없이 한 줄씩 */
  #hd .sub-menu--list .inner {
    padding: 8px 20px 12px;
  }
  #hd .sub-menu--list .depth2 h3 {
    padding: 0;
  }
  #hd .sub-menu--list .depth2 h3:not(:only-child) {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    #hd nav.nav-bar,
    #hd .overlay,
    #hd .menu-toggle .line {
      transition: none;
    }
  }
}