@charset "utf-8";

header {position: sticky; top: 0; background-color: #fff; border-bottom: 1px solid var(--color-border); transition: all 0.2s; z-index: 99999999;}
header .inner  {display: flex; justify-content: space-between; align-items: center; padding: 20px 0;}
header .inner .logo {display: flex; flex-direction: column; row-gap: 2px;}
header .inner .logo .name {font-weight: 700; font-size: 20px; text-transform: uppercase;}
header .inner .logo .gray {font-weight: 500; font-size: 15px; text-transform: uppercase;}
header .inner .nav {display: flex; column-gap: 100px;}
header .inner .nav a {font-size: 20px; font-weight: 700; color: var(--color-text-gray); border-bottom: 1px solid transparent; text-transform: uppercase;}
header .inner .nav a:hover,
header .inner .nav a.active {color: var(--color-secondary); border-bottom: 1px solid var(--color-secondary); transition: all 0.2s;}

.menu-btn {position:relative; display: none; width:24px;height:24px;cursor:pointer; border: 0; background-color: transparent; z-index: 100;}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after{display:block;position:absolute;left:0;width:100%;height:3px;background:var(--color-secondary);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:-8px;}
.menu-btn span:after{top:8px;}

.gnb-menu {position: absolute; top: 86px; right: 0; z-index: 9999; opacity: 0; visibility: hidden; width: 100%; height: calc(100vh - 86px); overflow-y: auto; background-color: #fff; display: flex; flex-direction: column; justify-content: space-between;}
.gnb-menu::-webkit-scrollbar {display: none;}
.gnb-menu .gnb-menu-li {display: flex; flex-direction: column; row-gap: 30px; margin-top: 30px; padding: 10px 20px;}
.gnb-menu .gnb-menu-li a {padding-bottom: 30px; border-bottom: 1px solid var(--color-border); font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--color-text-gray);transition:all 0.3s;}
.gnb-menu .gnb-menu-li a:hover,
.gnb-menu .gnb-menu-li a.active {color: var(--color-secondary);}
.gnb-menu .contact-mail {display: block; background-color: var(--color-text-main); text-transform: uppercase; padding: 32px 20px; font-size: 16px; font-weight: 800; color: #fff;}
.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;}

footer p,
footer span {color: #fff;}
footer .footer-t {display: flex; justify-content: center; padding: 120px 20px; background-color: var(--color-text-main);}
footer .footer-t .flex {display: flex; flex-direction: column; row-gap: 40px;}
footer .footer-t .icon {display: flex; align-items: center; column-gap: 8px; font-size: 20px; font-weight: 800;}
footer .footer-t .mail {display: flex; align-items: center; column-gap: 20px; color: #fff; font-size: 48px; font-weight: 800;}
footer .footer-t p {font-size: 20px; opacity: 0.5; word-break: keep-all;}
footer .footer-b {padding: 32px 0; background-color: #1B1C1F;}
footer .footer-b .inner {display: flex; align-items: center; justify-content: space-between;}
footer .footer-b .inner .name {font-size: 20px; font-weight: 600; opacity: 0.4;}
footer .footer-b .inner .copyright {font-size: 15px; opacity: 0.25;}

/* 반응형 */
@media screen and (max-width: 1520px) {
}
@media screen and (max-width: 1440px) {
    
}
@media screen and (max-width: 1280px) {

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

    footer .footer-t {padding: 100px 20px;}
    footer .footer-t .mail {font-size: 7vw;}
}
@media screen and (max-width: 600px) {
    
}
@media screen and (max-width: 500px) {
    
    footer .footer-t {padding: 80px 20px;}
    footer .footer-b .inner {flex-direction: column; row-gap: 4px; align-items: flex-start;}
}
@media screen and (max-width: 340px) {

}

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