@charset "utf-8";

#headerWrap {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   background-color: #ffffff;
   z-index: 20;
   transition: all 0.3s;
}
#headerWrap .header-inner {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 19px 24px 20px 25px;
   border-bottom: 1px solid rgba(221, 221, 221, 0.4);
   z-index: 1;
}
/* #headerWrap .header-bg { position: fixed; left: 0; top: 0px; z-index: 0; width: 100%; height: 0; opacity: 0; visibility: hidden; transition: all .3s; overflow: hidden; } */
#headerWrap .header-bg {
   position: absolute;
   left: 0;
   top: 0;
   display: block;
   width: 100%;
   height: 302px;
   background-color: #ffffff;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s;
   overflow: hidden;
   z-index: -1;
}
#headerWrap .header-dim {
   position: absolute;
   left: 0;
   top: 302px;
   width: 100%;
   height: calc(100vh - 302px);
   background-color: rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(70px);
   -webkit-backdrop-filter: blur(70px);
   opacity: 0;
   z-index: -1;
   visibility: hidden;
   transition: opacity 0.3s ease;
}
#headerWrap .header-inner .logo a {
   display: block;
   width: 143px;
   background-image: url(../image/img_logo_b.svg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   text-indent: -9999px;
}
#headerWrap .header-inner .gnb-menu {
   position: absolute;
   left: 50%;
   top: 2px;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
}
#headerWrap .gnb-menu > ul {
   display: flex;
}
#headerWrap .gnb-menu > .depth1 > li > a {
   display: block;
   padding: 19px 20px 20px;
   font-size: 15px;
   line-height: 1.2;
}
#headerWrap .gnb-menu > .depth1 > li:first-child > a {
   padding-left: 100px;
}
#headerWrap .gnb-menu > .depth1 > li:last-child > a {
   padding-right: 100px;
}
#headerWrap .gnb-menu > ul .depth2 {
   position: absolute;
   left: 50%;
   top: 55px;
   transform: translateX(-50%);
   padding: 40px 24px 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100vw;
   height: 246px;
   opacity: 0;
   visibility: hidden;
}
#headerWrap .gnb-menu > ul .depth2 > ul {
   display: flex;
   overflow-x: auto;
   padding: 0 25%;
}
#headerWrap .gnb-menu > ul li.depth1-1 .depth2 > ul {
   display: flex;
   overflow-x: auto;
   padding: 0 25%;
}
#headerWrap .gnb-menu > ul .depth2-mo {
   display: none;
}

/* #headerWrap .gnb-menu > ul > li:hover .depth2,
#headerWrap .gnb-menu > ul > li:focus .depth2 { opacity: 1; visibility: visible; background-color: #fff; } */

#headerWrap .gnb-menu > ul > li ul.item-wrap .item .item-txt {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 15px;
   cursor: pointer;
}

#headerWrap .gnb-menu > ul > li ul.item-wrap > li {
   width: 100%;
   display: flex;
   align-items: flex-start;
   gap: 20px;
}
#headerWrap .gnb-menu > ul > li ul.item-wrap > li > a {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
}
#headerWrap .gnb-menu > ul > li.depth1-1 ul.item-wrap > li .image {
   display: flex;
   width: 70%;
   /* height: 118px; */
   /* background: #eee; */
}
#headerWrap .gnb-menu > ul > li.depth1-2 ul.item-wrap > li .image {
   display: flex;
   width: 100%;
}

#headerWrap .gnb-menu > ul > li ul.item-wrap > li .txt {
   display: flex;
   align-items: center;
   gap: 3px;
   font-size: 13px;
   color: #999;
}

#headerWrap .gnb-menu > ul > li ul.item-wrap > li .txt2 {
   font-size: 12px;
   color: #999;
   margin-top: 3px;
}

#headerWrap .gnb-menu > ul > li ul.item-wrap > li.item2 {
   flex-direction: column;
}

#headerWrap .gnb-menu > ul > li ul.item-wrap > li.item3 {
   width: 50%;
}
#headerWrap .gnb-menu > ul > li ul.item-wrap > li.item2 .item-txt2 {
   display: flex;
   align-items: center;
   width: 90%;
}
#headerWrap .gnb-menu > ul > li ul.item-wrap > li.item2 .item-txt2 .txt {
   margin-top: 10px;
}
#headerWrap .gnb-menu > ul > li ul.item-wrap > li.item2 .item-txt2 .image {
   width: 70%;
   background: #fff;
}

#headerWrap .gnb-menu > ul > li:nth-child(1) ul > li .txt > .tag {
   font-weight: 600;
   font-size: 11px;
   color: #fff;
   padding: 0 5px;
   border-radius: 3px;
   background-color: #ccc;
}

#headerWrap .gnb-menu > ul > li:nth-child(1) ul > li.lines {
   width: 100px;
   border-left: 1px solid #ddd;
}

#headerWrap .gnb-menu > ul > li:nth-child(2) ul li:last-child {
   display: flex;
   align-items: center;
   justify-content: center;
}
#headerWrap .gnb-menu > ul > li:nth-child(2) ul li .btn-more {
   font-size: 13px;
   color: #999;
   text-decoration: underline;
}

#headerWrap .gnb-menu > ul > li:nth-child(3) .depth2 > .inner {
   max-width: 1130px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 24px;
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .left {
   max-width: 279px;
   width: 100%;
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .left p {
   font-size: 12px;
   margin-bottom: 20px;
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .left > ul {
   display: flex;
   justify-content: space-between;
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .left > ul > li > ul {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .right > ul {
   display: flex;
   gap: 9px;
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .right > ul > li {
   width: 234px;
   height: 156px;
   padding: 20px;
   background-color: #f9f9f9;
   border-radius: 5px;
   background-repeat: no-repeat;
   background-size: 48px 48px;
   background-position: bottom 20px right 20px;
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .left ul > li > ul > li > a {
   position: relative;
   transition: none;
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .left ul > li > ul > li > a:hover::after {
   content: '';
   display: block;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background-color: #05C3DD;
   background-image: url(../image/icon_arrow_w.svg);
   background-repeat: no-repeat;
   background-size: 9px;
   background-position: center;
   position: absolute;
   top: 50%;
   right: -20px;
   transform: translateY(-50%);
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .right > ul > li:nth-child(1) {
   background-image: url(../image/icon_as_m.svg);
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .right > ul > li:nth-child(2) {
   background-image: url(../image/icon_kakao_m.svg);
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .right > ul > li:nth-child(3) {
   background-image: url(../image/icon_call_m.svg);
}
#headerWrap .gnb-menu > ul > li:nth-child(3) .right > ul > li > span {
   display: block;
   font-size: 12px;
   color: #999;
   margin-top: 4px;
}

#headerWrap .util-wrap {
   display: flex;
   align-items: center;
   gap: 29px;
}
#headerWrap .util-wrap .btn-noti {
   position: relative;
}
#headerWrap .util-wrap .btn-login {
   width: 18px;
   height: 20px;
   background-image: url(../image/icon_login.svg);
   background-repeat: no-repeat;
   background-size: contain;
}
#headerWrap.type-white:not(.on) .util-wrap .btn-login {
   background-image: url(../image/icon_login_w.svg);
}
#headerWrap .util-wrap .btn-noti::before {
   content: '';
   display: block;
   width: 18px;
   height: 20px;
   background-image: url(../image/icon_notice.svg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
#headerWrap .util-wrap .btn-noti > #notiBadge {
   position: absolute;
   top: -8px;
   right: -9px;
   width: 18px;
   height: 18px;
   background-color: #05C3DD;
   border-radius: 50%;
   font-size: 9px;
   color: #fff;
   text-shadow: 0px 1px 3px #11af58;
   line-height: 20px;
   display: block;
   text-align: center;
}
#headerWrap .util-wrap .btn-menu {
   display: flex;
   flex-direction: column;
   gap: 3px;
}
#headerWrap .util-wrap .btn-menu > span {
   display: block;
   width: 18px;
   height: 2px;
   background-color: #111111;
}

#headerWrap.type-blur {
   background-color: transparent;
}
#headerWrap.type-blur:not(.type-white) .header-inner {
   backdrop-filter: blur(25px);
   background-color: rgba(255, 255, 255, 0.8);
}

#headerWrap.type-white:not(.on) {
   background-color: transparent;
}
#headerWrap.type-white:not(.on) .header-inner .logo a {
   background-image: url(../image/img_logo.svg);
}
#headerWrap.type-white:not(.on) .gnb-menu > ul > li > a {
   color: #ffffff;
}
#headerWrap.type-white:not(.on) .util-wrap .btn-noti::before {
   background-image: url(../image/icon_notice_w.svg);
}
#headerWrap.type-white:not(.on) .util-wrap .btn-menu > span {
   background-color: #ffffff;
}

#headerWrap.on .header-bg {
   opacity: 1;
   visibility: visible;
}
#headerWrap.type-blur.on .header-dim {
   opacity: 1;
   visibility: visible;
}
#headerWrap .gnb-menu > ul > li.on > a {
   color: #11af58 !important;
}
#headerWrap .gnb-menu > ul > li.active .depth2 {
   opacity: 1;
   visibility: visible;
   transition-delay: 0.2s;
   transition-duration: 0.3s;
}

#headerWrap .gnb-menu > ul > li.active ul.item-wrap > li.item {
   opacity: 0;
   animation-name: gnb-item-ani;
   animation-duration: 0.4s;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
}
#headerWrap .gnb-menu > ul > li.active ul.item-wrap > li.item {
   animation-delay: 0.1s;
}
#headerWrap .gnb-menu > ul > li.active ul.item-wrap > li.item:nth-child(2) {
   animation-delay: 0.2s;
}
#headerWrap .gnb-menu > ul > li.active ul.item-wrap > li.item:nth-child(3) {
   animation-delay: 0.3s;
}
#headerWrap .gnb-menu > ul > li.active ul.item-wrap > li.item:nth-child(4) {
   animation-delay: 0.4s;
}
#headerWrap .gnb-menu > ul > li.active ul.item-wrap > li.item:nth-child(5) {
   animation-delay: 0.5s;
}

.gnb-sub {
   padding-top: 82px;
   overflow-x: auto;
}
.gnb-sub ul {
   padding: 13px 8px;
   display: flex;
   width: 100%;
   flex-wrap: nowrap;
   white-space: nowrap;
}
.gnb-sub ul li {
   padding: 0 8px;
}
.gnb-sub ul li.active a {
   color: #11af58;
}

@media all and (max-width: 1024px) {
   /* hedaer */
   #headerWrap .header-inner {
      padding: 16px 0 0;
   }
   #headerWrap .header-bg::after {
      display: none;
   }
   #headerWrap .header-bg::before {
      display: none;
   }
   #headerWrap .header-inner {
      flex-direction: column;
   }
   #headerWrap .header-inner .logo a {
      width: 127px;
      line-height: 13px;
   }
   #headerWrap .header-inner .gnb-menu {
      position: static;
      transform: none;
   }
   #headerWrap .gnb-menu > .depth1 > li > a {
      padding: 25px 21px 14px;
      font-size: 13px;
   }
   #headerWrap .gnb-menu > ul .depth2 {
      display: none;
   }
   #headerWrap .gnb-menu > ul .depth2-mo {
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      border-top: 1px solid #ddd;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   }
   #headerWrap .gnb-menu > ul .depth2-mo > ul {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 13px 16px;
      background-color: #fff;
      overflow-x: auto;
   }
   #headerWrap .gnb-menu > ul .depth2-mo > ul > li > a {
      font-size: 13px;
      color: #999;
   }
   #headerWrap .gnb-menu > .depth1 > li:first-child > a {
      padding-left: 0;
   }
   #headerWrap .gnb-menu > .depth1 > li:last-child > a {
      padding-right: 0;
   }

   #headerWrap .util-wrap {
      position: absolute;
      top: 11px;
      right: 16px;
      gap: 25px;
   }
}

@media all and (max-width: 400px) {
   #headerWrap .gnb-menu > .depth1 > li > a {
      padding: 25px 14px 14px;
   }
}

@media all and (min-width: 1024px) {
   #headerWrap .gnb-menu > ul > li:nth-child(1) ul > li.use:hover .txt {
      color: #11af58;
   }
   #headerWrap .gnb-menu > ul > li:nth-child(1) ul > li.use:hover .txt2 {
      color: #11af58;
   }
   #headerWrap .gnb-menu > ul > li:nth-child(1) ul > li.use:hover .txt > .tag {
      background-color: #05C3DD;
   }
   #headerWrap .gnb-menu > ul > li:nth-child(3) .left > ul > li > ul > li > a:hover {
      color: #11af58;
   }
   #headerWrap .gnb-menu > ul > li > a:hover {
      color: #11af58 !important;
   }
}