@charset "utf-8";

header {position: sticky; top: 0; z-index: 9999; width: 100%; height: 64px; display: flex; align-items: center; transition: var(--trasition);}
header .header-inner {width: calc(100% - 40px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
header .header-inner nav {display: flex; align-items: center; column-gap: clamp(40px, 5vw, 80px);}
header .header-inner nav a {font-size: var(--fs-16); line-height: 1.6; color: var(--color-white); transition: all 0.3s;}
header .header-inner nav a:hover,
header .header-inner nav a.active {color: var(--color-main) !important;}
header.menu-open {z-index: 100000;}
.main header {position: fixed; background-color: rgba(var(--color-black-rgb),.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Safari */}
.main header .header-inner {max-width: 1520px;}
.main header.menu-open {background-color: var(--color-white);}
.sub header {background-color: var(--color-white); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); /* Safari */}
.sub header .header-inner {max-width: 1320px;}
.sub header .header-inner nav a {color: var(--text-main);}

.menu-btn {position:relative;width:20px;height:20px;cursor:pointer; border: 0; background-color: transparent; z-index: 100; display: none;}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after{display:block;position:absolute;left:0;width:100%;height:2px;background:var(--color-white);transition:all 0.3s;}
.menu-btn span{top:50%;transform: translteY(-50%,-50%);}
.menu-btn span:before,
.menu-btn span:after{content:'';}
.menu-btn span:before{top:-7px;}
.menu-btn span:after{top:7px;}
.sub .menu-btn span,
.sub .menu-btn span:before,
.sub .menu-btn span:after {background: var(--text-main);}

.gnb-menu {position: absolute; top: calc(100% - 24px); right: 2%; z-index: 10; opacity: 0; visibility: hidden; width: 320px; max-height: calc(100vh - 190px); overflow-y: auto; border-radius: 30px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); background-color: #fff; padding: 20px 0;}
.gnb-menu::-webkit-scrollbar {display: none;}

.menu-open .gnb-menu {opacity: 1; visibility: visible; transition: all 0.3s;}
.menu-open .menu-btn span {background:transparent;}
.menu-open .menu-btn span:before {top: 0; transform:rotate(45deg);}
.menu-open .menu-btn span:after {top: 0; transform:rotate(-45deg);}
.menu-open .menu-btn:before {display: none;}
.main header.menu-open .menu-btn span:before,
.main header.menu-open .menu-btn span:after {background: var(--text-main);}

footer {color: var(--text-3); padding: 40px 0;}
footer .ft-t {display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 60px; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.08);}
footer .ft-logo {display:flex;}
footer .ft-desc {font-size: var(--fs-16); line-height:1.6; font-weight: 500; padding-top: 12px; padding-right: 20px; word-break: keep-all;}
footer .ft-tit {display:block; margin-bottom:12px; font-size: var(--fs-15);}
footer .ft-tel {font-size: var(--fs-18); font-weight:500; line-height: 1.7; color:var(--color-white);}
footer .ft-txt { font-size: var(--fs-15); line-height:1.6;}
footer .ft-menu ul,
footer .ft-policy ul {display:flex; flex-direction:column; row-gap:8px;}
footer .ft-menu a,
footer .ft-policy a {font-size: var(--fs-15); color: var(--color-white);}
footer .ft-b {display:flex; justify-content:space-between; align-items:center;}
footer .ft-copy {font-size: var(--fs-14);}
footer .ft-sns {display:flex; align-items: center; column-gap:14px;}
footer .ft-sns a {display:flex; justify-content:center; align-items:center; width:42px; height:42px; border:1px solid var(--text-6); border-radius:50%;}
footer .ft-sns a svg {width: 18px; height: 18px;}

/* =========================================================
RESPONSIVE
========================================================= */
@media screen and (max-width:1440px) {
}

@media screen and (max-width:1024px) {

    header .btn-wrap {display: none;}
    header .header-inner nav {position: revert; transform: none;}

}

@media screen and (max-width:768px) {
    
    header .header-inner nav {display: none;}
    
    .menu-btn {display: block;}

    .gnb-menu {width: 100%; height: calc(100vh - 64px); max-height: none; top: 64px; left: 0; border-radius: 0; box-shadow: none; padding: 30px 20px; display: flex; flex-direction: column; row-gap: 4px;}
    .gnb-menu > a {display: flex; align-items: center; justify-content: space-between; padding: 10px; font-size: var(--fs-16); line-height: 1.7; transition: all 0.3s;}
    .gnb-menu > a:hover,
    .gnb-menu > a.active {color: var(--color-main);}
    .gnb-menu > a:hover svg path,
    .gnb-menu > a.active svg path {fill: var(--color-main);}

    footer .ft-t {flex-wrap:wrap; row-gap:clamp(32px,4.17vw,60px);}
    footer .ft-desc > br {display: none;}
    footer .ft-t > div {width: 50%;}
    footer .ft-b {flex-direction: column; align-items: flex-start; row-gap: 20px;}
}

@media screen and (max-width:500px) {

    footer .ft-t > div {width: 100%;}

}

@media screen and (max-width:375px) {

}

/********/
/********/
/********/
/********/
/********/
/********/