@charset "utf-8";

#headerWrap {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   background-color: #ffffff;
   z-index: 20;
   transition: all 0.3s;
}
#headerWrap .header-top {
   background: #05c3dd;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   height: 40px;
   color: #fff;
   font-family: 'NaverBD-EB', sans-serif;
   font-size: 14px;
   cursor: pointer;
}
#headerWrap svg {
   width: 16px;
   height: 16px;
   background: #fff;
   border-radius: 50%;
   padding: 3px;
   color: #000;
}
#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;
   width: 100%;
   height: 100vh;
   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 {
   display: flex;
   align-items: center;
   gap: 10px;
}
#headerWrap .header-inner .logo .logo-arrow {
   background: #05c3dd;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   color: white;
   cursor: pointer;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
#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-start-pop-dim {
   background-color: rgba(0, 0, 0, 0.3);
   position: fixed;
   width: 100%;
   height: 100%;
   display: none;
   z-index: -1;
}
#headerWrap .header-end-pop-dim {
   background-color: rgba(0, 0, 0, 0.7);
   position: fixed;
   width: 100%;
   height: 100%;
   display: none;
   z-index: -1;
}
#headerWrap .header-inner .header-start-pop {
   position: absolute;
   top: 24px;
   left: 210px;
   background: #fff;
   border-radius: 0 12px 12px 12px;
   padding: 14px 20px;
   min-width: 200px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   display: inline-block;
   z-index: 1000;
}
#headerWrap .header-inner .header-start-pop::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   transform: translateX(-50%);
   width: 0;
   height: 0;
   border-top: 0px solid transparent;
   border-bottom: 20px solid transparent;
   border-right: 15px solid #ffffff;
}
#headerWrap .header-inner .header-start-pop p {
   font-size: 14px;
   color: #000;
   font-family: 'NaverBD-B', sans-serif;
   word-break: keep-all;
   margin-bottom: 2px;
}
#headerWrap .header-inner .header-start-pop img {
   width: 110px;
}
#headerWrap .header-inner .header-end-pop {
   position: absolute;
   top: 44px;
   left: 170px;
   background: #fff;
   border-radius: 12px;
   padding: 14px 20px;
   min-width: 200px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   display: inline-flex;
   justify-content: space-between;
   z-index: 1000;
   gap: 10px;
}
#headerWrap .header-inner .header-end-pop .header-end-pop-txt {
   display: flex;
   flex-direction: column;
   gap: 15px;
   width: 140px;
}
#headerWrap .header-inner .header-end-pop .header-end-pop-img img {
   width: 100%;
}
#headerWrap .header-inner .header-end-pop p {
   font-size: 14px;
   color: #000;
   line-height: 1.4;
   font-family: 'NaverBD-B', sans-serif;
   word-break: keep-all;
   margin-bottom: 2px;
}
#headerWrap .header-inner .header-end-pop img {
   width: 120px;
}
#headerWrap .header-inner .header-end-pop a {
   display: inline-block;
   font-size: 11px;
   color: #0031c6;
   font-family: 'NaverBD-B', sans-serif;
   background: none;
   text-indent: 0;
}
#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;
   justify-content: space-between;
   padding: 0 20px;
   width: 100%;
}
#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 20%;
}
#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.depth1-4 .depth2,
#headerWrap .gnb-menu > ul > li.depth1-5 .depth2,
#headerWrap .gnb-menu > ul > li.depth1-6 .depth2 {
   padding: 25px;
   height: 60px;
}
#headerWrap .gnb-menu > ul > li.depth1-4 ul,
#headerWrap .gnb-menu > ul > li.depth1-5 ul,
#headerWrap .gnb-menu > ul > li.depth1-6 ul {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 60px;
}

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

#headerWrap .gnb-menu > ul > li ul.item-wrap > li .txt2 {
   font-size: 12px;
   color: #999;
   font-family: 'NaverBD-EB', sans-serif;
   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: 100%;
}
#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-family: 'Prompt', sans-serif;
   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(4) .depth2 > .inner {
   max-width: 1130px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 24px;
}
#headerWrap .gnb-menu > ul > li:nth-child(4) .left {
   max-width: 279px;
   width: 100%;
}
#headerWrap .gnb-menu > ul > li:nth-child(4) .left p {
   font-size: 12px;
   margin-bottom: 20px;
}
#headerWrap .gnb-menu > ul > li:nth-child(4) .left > ul {
   display: flex;
   justify-content: space-between;
}
#headerWrap .gnb-menu > ul > li:nth-child(4) .left > ul > li > ul {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
#headerWrap .gnb-menu > ul > li:nth-child(4) .right > ul {
   display: flex;
   gap: 9px;
}
#headerWrap .gnb-menu > ul > li:nth-child(4) .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(4) .left ul > li > ul > li > a {
   position: relative;
   transition: none;
}
#headerWrap .gnb-menu > ul > li:nth-child(4) .left ul > li > ul > li > a:hover::after {
   content: '';
   display: block;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background-color: #01cb5c;
   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.depth1-4 ul > li > a,
#headerWrap .gnb-menu > ul > li.depth1-5 ul > li > a,
#headerWrap .gnb-menu > ul > li.depth1-6 ul > li > a {
   position: relative;
   transition: none;
}
#headerWrap .gnb-menu > ul > li.depth1-4 ul > li > a:hover,
#headerWrap .gnb-menu > ul > li.depth1-5 ul > li > a:hover,
#headerWrap .gnb-menu > ul > li.depth1-6 ul > li > a:hover {
   color: #11af58;
}
#headerWrap .gnb-menu > ul > li.depth1-4 ul > li > a:hover::after,
#headerWrap .gnb-menu > ul > li.depth1-5 ul > li > a:hover::after,
#headerWrap .gnb-menu > ul > li.depth1-6 ul > li > a:hover::after {
   content: '';
   display: block;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background-color: #01cb5c;
   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(4) .right > ul > li:nth-child(1) {
   background-image: url(../image/icon_as_m.svg);
}
#headerWrap .gnb-menu > ul > li:nth-child(4) .right > ul > li:nth-child(2) {
   background-image: url(../image/icon_kakao_m.svg);
}
#headerWrap .gnb-menu > ul > li:nth-child(4) .right > ul > li:nth-child(3) {
   background-image: url(../image/icon_call_m.svg);
}
#headerWrap .gnb-menu > ul > li:nth-child(4) .right > ul > li > span {
   display: block;
   font-size: 12px;
   color: #999;
   margin-top: 4px;
}
/* #headerWrap .gnb-menu > ul > li:nth-child(6) .depth2 {
   max-width: 1130px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 24px;
   padding: 20px 24px 20px;
   height: auto;
}
#headerWrap .gnb-menu > ul > li:nth-child(6) .depth2 p {
   font-size: 12px;
   margin-bottom: 20px;
}
#headerWrap .gnb-menu > ul > li:nth-child(6) .depth2 > ul { 
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5%;
   width: 100%;
   padding: 0;
}
#headerWrap .gnb-menu > ul > li:nth-child(6) .depth2 > ul > li > a {
   position: relative;
   transition: none;
}
#headerWrap .gnb-menu > ul > li:nth-child(6) .depth2 > ul > li > a:hover::after {
   content: '';
   display: block;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background-color: #01cb5c;
   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 .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: #01cb5c;
   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: 768px) {
   /* hedaer */
   #headerWrap .header-inner {
      padding: 16px 0 0;
   }
   #headerWrap .header-bg::after {
      display: none;
   }
   #headerWrap .header-bg::before {
      display: none;
   }
   #headerWrap .header-top {
      font-size: 13px;
   }
   #headerWrap .header-inner {
      flex-direction: column;
   }
   #headerWrap .header-inner .header-start-pop {
      left: 175px;
      padding: 10px 16px;
      min-width: 150px;
   }
   #headerWrap .header-inner .logo .logo-arrow {
      width: 18px;
      height: 18px;
   }
   #headerWrap .header-inner .header-start-pop::before {
      border-bottom: 15px solid transparent;
      border-right: 10px solid #ffffff;
   }
   #headerWrap .header-inner .header-start-pop.mobi {
      position: absolute;
      background: #fff;
      border-radius: 12px 0 12px 12px;
      padding: 14px 20px;
      min-width: 200px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      display: inline-block;
      z-index: 1000;
   }
   #headerWrap .header-inner .header-start-pop.mobi::before {
      content: '';
      position: absolute;
      top: -10px;
      left: 192px;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-bottom: 0px solid transparent;
      border-top: 10px solid transparent;
      border-right: 15px solid #ffffff;
   }
   #headerWrap .header-inner .header-start-pop p {
      font-size: 12px;
   }
   #headerWrap .header-inner .header-start-pop img {
      width: 90px;
   }
   #headerWrap .header-inner .header-end-pop {
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 16px;
      width: 90%;
   }
   #headerWrap .header-inner .header-end-pop .header-end-pop-txt {
      width: 50%;
   }
   #headerWrap .header-inner .logo {
      padding-left: 10px;
      border-bottom: 1px solid rgba(221, 221, 221, 0.4);
      padding-bottom: 10px;
   }
   #headerWrap .header-inner .logo a {
      width: 127px;
      line-height: 13px;
   }
   #headerWrap .header-inner .gnb-menu {
      position: static;
      transform: none;
      width: 100%;
   }
   #headerWrap .gnb-menu > .depth1 > li > a {
      padding: 25px 0 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 > a {
      padding-left: 0;
      padding-top: 15px;
   }
   #headerWrap .gnb-menu > .depth1 > li:last-child > a {
      padding-right: 0;
   }

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

@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: #01cb5c;
   }
   #headerWrap .gnb-menu > ul > li:nth-child(4) .left > ul > li > ul > li > a:hover {
      color: #11af58;
   }
   #headerWrap .gnb-menu > ul > li > a:hover {
      color: #11af58 !important;
   }
}