@import url("root.css");
@import url("front_default.css");
.header {box-shadow: 0px -10px 10px 10px #ccc; height: 10rem;position: relative;}
.header .inner {display: flex; align-items: center; height: 100%; column-gap: 2rem;}
.header .logo {}
.header .logo a {display: block; width: 8.6rem; height: 3.6rem; }

/* GNB */
.header .nav-bg {width: 100%; position: absolute; top: calc(100% - 1px); left: 0; background: #F7F7F7; box-shadow: 0 0 10px rgba(34,23,20,0.15); height: 0; transition: height 0.25s; z-index: 2;}
.header .gnb {display: flex; align-items: center; justify-content: space-between; width: 70%; margin-left: auto; padding: 0 2rem; position: relative;}
.header .gnb, .header .gnb nav {height: 100%;}
.header .gnb .depth1 {display: flex; align-items: center; height: 100%;}
.header .gnb .depth1 > li {display: flex; align-items: center; height: 100%;}
.header .gnb .depth1 > li:not(:last-child) {padding-right: 2.15rem;}
.header .gnb .depth1 > li > a {display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; position: relative; z-index: 100; line-height: 1; border-radius: 1rem; font-size: 1.7rem; font-weight: 400;}
.header .gnb .depth1 > li span {position: relative;}
.header .gnb a {display: inline-block; font-family: 'Pretendard'; width: 100%; color: #222; word-break: keep-all;;}
.header .gnb .depth2 {display: flex; align-items: center; column-gap: 2.5rem; position: absolute; top: 99%; z-index: 10; height: 0; overflow: hidden; transition-delay: 0.1s; left: 3rem; width:100%;}
.header .gnb .depth2 a {font-size: 1.4rem; color: #898989; text-align: left; transition: 0.15s;}

/* Mobile Hamburger */
.header .header-menu-open {display: none;}
.header .header-menu--btn {display: flex; justify-content: center; flex-direction: column; cursor: pointer;}
.header .header-menu--btn span {background: #000; width: 1.8rem; height: 2px; margin: 2px 0; transition: 0.15s;}


/* Header - Actions */
.header .header-actions {display: flex; align-items: center; column-gap: 1.5rem; transition: all 0.15s}
.header .header-login li, .header .header-login a {}

/* GNB Opened */
.header.open .nav-bg {height: 5rem;}
.header.open .active .depth2 {height: 5rem; }
.butn-style1.border {background: var(--blue); color: #fff; box-shadow: none;}
.butn.butn-style1 {border:1px solid var(--blue);}    

@media (hover: hover) {
    .header .gnb .depth2 a:hover {font-weight: 700;}
}

@media (max-width: 1600px) {
    .header .gnb .depth1 > li > a {font-size: 1.1vw;}
}

@media (max-width: 1280px) {
    .header {height: 7rem;}
    .header .logo a {width: 5.6rem; height: 3rem;}
    .header .gnb {position: fixed; right: -100%; top: 0; margin: 0; padding: 0; z-index: 1100; max-width: none; min-width: unset; width: 74%; height: 100%; background-color: #fff; transition: all 0.15s;}
    .header .gnb nav {width: 100%;}
    .header .gnb .depth1 {display: flex; flex-direction: column; align-items: flex-start; row-gap: 1.5rem; overflow-y: scroll; padding: 2.5rem 2rem 8rem; margin-left: 0; width: 100%; height: 100%; scrollbar-width: none; scroll-behavior: smooth; padding-top: 8rem; margin-top: 4rem;;}
    .header.open .gnb {right: 0;}
    .header .gnb .depth1 > li {display: block; height: auto; width: 100%; height: auto; width: 100%;}
    .header .gnb .depth1 > li a {color: #3D3A39; font-size: 1.6rem; justify-content: flex-start;}
    .header .gnb .depth2 {position: static; transform: translateX(0); text-align: left; padding: 0; max-height: 0; overflow: hidden; align-items: flex-start;}
    .header .header-menu-open {display: block; z-index: 2000;}
    .header .header-actions {column-gap: 1rem; position: fixed; z-index: 2000; right: -100%; width: 74%; height: 7rem; background: var(--blue); padding: 0 2rem;}
    .header .header-login {margin-left: auto;}
    .header.open .active .depth2 {display: flex; row-gap: 2.2rem; flex-direction: column; left: -2rem; height: auto; padding: 0 2rem; }
    .header.open .header-actions {right: 0;}
    .header .nav-bg { transition: none; box-shadow: none; background: transparent; z-index: 1000; visibility: hidden; opacity: 0;}
    .header.open .nav-bg {position: fixed; height: 100svh; width: 100%; background: rgba(0,0,0,0.4); top: 0; left: 0; opacity: 1; visibility: visible;}

	.header.open .header-menu--btn {overflow: hidden;}
    .header.open .header-menu--btn span {background: #fff;}
    .header.open .header-menu--btn span:nth-child(1) {transform: translateY(6px) rotate(45deg);}
    .header.open .header-menu--btn span:nth-child(3) {transform: translateY(-6.2px) rotate(-45deg);}
    .header.open .header-menu--btn span:nth-child(2) {transform: translateX(-100%);}
}