.header-container { position: relative; }
.header-container { border-bottom: 1px solid #ddd; z-index: 30; }

.header-wrap { display: flex; justify-content: space-between; align-items: center; }
.header-wrap .logo-area { width: 230px; height: auto; cursor: pointer; }
.header-wrap .logo-area > img { width: 100%; height: auto; }
.header-wrap .gnb-area > ul { position: relative; display: flex; gap: 60px; }
.header-wrap .gnb-area > ul > li { position: relative; padding: 30px 0; }
.header-wrap .gnb-area > ul > li > a { position: relative; font-size: 1.7rem; font-weight: 600; color: #444; }
.header-wrap .gnb-area > ul > li > a:after { content: ''; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #92a70d; transition: width .2s; transform-origin: left; }
.header-wrap .gnb-area > ul > li:hover > a { color: #92a70d;}
.header-wrap .gnb-area > ul > li:hover > a:after { width: 100%; }

.header-wrap .gnb-area > ul > li > ul { position: absolute; top: 100%; left: 50%; margin-left: -75px; width: 150px; background: #eee; padding: 5px 0; background: #fff; border: 1px solid #ddd; border-top: 3px solid #bad226; transform: scaleY(0); transform-origin: top; transition: transform .25s; }
.header-wrap .gnb-area > ul > li:hover > ul { transform: scaleY(1); }
.header-wrap .gnb-area > ul > li > ul li a { position: relative; display: block; padding: 6px 10px; font-size: 1.3rem; }
.header-wrap .gnb-area > ul > li > ul li a:hover { color: #92a70d; }

.mo-hamburger { display: none; position: absolute; top: 30px; right: 30px; width: 20px; }
.mo-hamburger span { width:100%; height: 2px; margin-bottom: 5px; background:#000; display: block; transform: rotate(0); transition: transform .25s; }
.mo-hamburger span:nth-child(3) { margin-bottom: 0; }
.mo-hamburger.active { display: block; top: 35px; }
.mo-hamburger.active span:nth-child(1) { transform: rotate(-45deg); margin-bottom: -2px; }
.mo-hamburger.active span:nth-child(2) { display: none; }
.mo-hamburger.active span:nth-child(3) { transform: rotate(45deg); }

@media (max-width: 768px) {
  .header-wrap { padding: 20px 30px !important; display: block;   }
  .header-wrap .logo-area { width: 200px; }
  .header-wrap .gnb-area { display: none; position: fixed; top: 80px; left: 0; padding: 20px; height: calc(100% - 77px); overflow-y: auto; width: 100%; background: #fff; z-index: 9999; }
  .header-wrap .gnb-area.on { display: block; }
  .header-wrap .gnb-area > ul { display: block; }
  .header-wrap .gnb-area > ul > li { padding: 0; }
  .header-wrap .gnb-area > ul > li > ul { position: static; transform: unset; padding: 10px 10px 20px; margin: 0; width: auto; border: 0; background: transparent; }
  .header-wrap .gnb-area > ul > li > ul li a { font-size: 1.4rem; color: #666; padding: 8px 10px; }
  .mo-hamburger { display: block; }
}
@media (max-width: 550px) {
  .header-wrap .logo-area { width: 170px; }
  .header-wrap .gnb-area { top: 73px; }
}