@charset "utf-8";

header {position: fixed; top: 0; z-index: 9999; width: 100%; height: 80px; background-color: var(--color-white); border-bottom: 1px solid var(--grayscale3);}
header .inner {height: 100%; display: flex; align-items: center; justify-content: space-between; column-gap: 60px;}
header .inner .logo {display: flex;}

header .nav {display:flex; column-gap:60px;}
header .nav > li {position:relative;}
header .nav > li > a {display:flex; align-items:center; height:100px; font-family:var(--font-body); font-size:var(--fs-16); font-weight:500; line-height:1.4; color:var(--grayscale8); transition:var(--transition);}
header .nav > li.active > a,
header .nav > li > a:hover {color:var(--color-mint);}

header .nav .sub-menu {position:absolute; top:100%; left:50%; transform:translate(-50%,20px); min-width:220px; padding:16px 0; background:var(--color-white); border-radius:16px; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--transition), transform var(--transition), visibility var(--transition);}
header .nav .sub-menu li a {display:block; padding:10px 24px; font-size:var(--fs-15); font-weight:500; color:var(--grayscale7); white-space:nowrap; transition:var(--transition);}
header .nav .sub-menu li.on a,
header .nav .sub-menu li a:hover {color:var(--color-mint); background:rgba(var(--color-mint-rgb),.08);}

header .nav > li:hover > .sub-menu,
header .nav > li:focus-within > .sub-menu {opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);}

.mo-menu-btn {display:none; position:relative; width:24px; height:18px; cursor:pointer; z-index:1001;}
.mo-menu-btn span {position:absolute; left:0; width:100%; height:2px; background:var(--grayscale11); border-radius:999px; transition:var(--transition);}
.mo-menu-btn span:nth-child(1){top:0;}
.mo-menu-btn span:nth-child(2){top:50%; transform:translateY(-50%);}
.mo-menu-btn span:nth-child(3){bottom:0;}

.mo-menu-btn.active span:nth-child(1){top:50%; transform:translateY(-50%) rotate(45deg);}
.mo-menu-btn.active span:nth-child(2){opacity:0;}
.mo-menu-btn.active span:nth-child(3){top:50%; bottom:auto; transform:translateY(-50%) rotate(-45deg);}

.mo-nav-wrap {position:fixed; top:80px; left:0; width:100%; height:calc(100vh - 80px); padding:20px 16px 40px; background:var(--color-white); overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none; opacity:0; visibility:hidden; transform:translateY(-20px); transition:var(--transition); z-index:999;}
.mo-nav-wrap::-webkit-scrollbar {display:none;}
.mo-nav-wrap.active {opacity:1; visibility:visible; transform:translateY(0);}

.mo-gnb {display:flex; flex-direction:column; row-gap: 20px;}
.mo-gnb>li {border-bottom:1px solid var(--color-mint-light);}
.mo-gnb>li.open {border-bottom: 0;}
.mo-gnb>li.active>.mo-gnb-btn {color:var(--color-mint);}
.mo-gnb-btn {width:100%; padding: 10px; display:flex; align-items:center; justify-content:space-between; background:none; border:0; font-family:var(--font-body); font-size:var(--fs-16); font-weight:500; color:var(--grayscale8); line-height: 1.4; cursor:pointer; transition:var(--transition);}
.mo-gnb-btn svg {transition:transform var(--transition);}
.mo-gnb-btn:hover,
.mo-gnb>li.open>.mo-gnb-btn {background-color: var(--color-mint-light);}
.mo-gnb-btn:hover svg,
.mo-gnb>li.open>.mo-gnb-btn svg {transform:rotate(90deg);}
.mo-depth2 {display:none;}
.mo-depth2 li a {display:block; padding:2px 10px; margin-top: 20px; font-size:var(--fs-15); color:var(--grayscale7); line-height: 1.6; transition:var(--transition);}
.mo-depth2 li.on>a,
.mo-depth2 li a:hover {color:var(--color-mint);}
.mo-nav-wrap .btn-wrap {justify-content: center; margin-top: 50px;}

footer .ft-t {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 60px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--grayscale8);}
footer .ft-info {display: flex; flex-direction: column; row-gap: 16px;}
footer .ft-info .ft-logo {display: flex;}
footer .ft-info ul {display: flex; align-items: center; column-gap: 41px;}
footer .ft-info ul li {position: relative; display: flex; align-items: center; column-gap: 10px;}
footer .ft-info ul li:first-of-type::after {position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width: 1px; height: 14px; background-color: var(--grayscale7); display: block; content: '';}
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(--grayscale7); border-radius:50%;}
footer .ft-sns a svg {width: 18px; height: 18px;}
footer .copyright {width: 100%; text-align: right;}

#top_btn {position:fixed; bottom:50px; right:8%; width:64px; height:64px; z-index:999; display:flex; align-items:center; justify-content:center; border-radius:50%; background-color:var(--color-mint); border:0; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.08); opacity:0; visibility:hidden; transform:translateY(30px) scale(.9); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), visibility .4s, background-color .3s;}
#top_btn.show {opacity:1; visibility:visible; transform:translateY(0) scale(1);}
#top_btn:hover {background-color:var(--color-mint-hover); transform:translateY(-4px) scale(1.05);}

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

}

@media screen and (max-width:1280px) {
    header .nav {padding-right: 80px; column-gap: 4vw;}
    header .inner > .btn {display: none;}
    header .inner .logo {width: 230px;}
}

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

@media screen and (max-width:768px) {
    header {height: 64px;}
    header .inner .logo {width: 200px;}

    .mo-menu-btn {width:18px; height:12px;}
    .mo-nav-wrap {top: 64px; height: calc(100vh - 64px);}

    footer .ft-t {flex-direction: column; row-gap: 40px;}

    #top_btn {right: 4%;}
}


@media screen and (max-width:500px) {
    footer .ft-info ul {flex-direction: column; row-gap: 10px; align-items: flex-start;}
    footer .ft-info ul li:first-of-type::after {display: none;}
    footer .copyright {text-align: left;}
    footer .ft-sns a {width:32px; height:32px;}
    footer .ft-sns a svg {width: 14px; height: 14px;}

    #top_btn {width: 54px; height: 54px; }
    #top_btn svg {width: 32px; height: 32px;}
}

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

}

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