/* ---------------------------
    All
--------------------------- */
.custom-container {
    width:100%;
    margin:0;
    padding:0;
    padding:0px 85px;
}

/* ---------------------------
    GNB
--------------------------- */
#nav {
    position:fixed;
    top:0;
    width:100%;
    padding:30px 0px;
    background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
    z-index:9999;
    /* transform:translateY(-100%); */
    transition:transform .4s ease;
}

#nav.visible {
    transform:translateY(0%);
}

#nav .nav-wrapper {
    display:flex;
    justify-content:space-between;
}

#nav .logo { width:7%; }
#nav .logo img { width:100%; }

#nav ul {
    display:flex;
    align-items:center;
    gap:20px;
    color:#fff;
    margin:0;
    padding:0;
}

/* ---------------------------
    Mobile menu
--------------------------- */
.ham {
    display:none;
}

.ham i { font-size:20px; }

.ham-menu i { font-size:30px; }

.ham i,
.ham-menu i { color:#fff; }

.ham-menu {
    position:absolute;
    top:0;
    right:0;
    transform:translateX(100%);
    align-items:flex-start;
    width:60vw;
    height:100vh;
    background:rgba(34, 34, 34, 1);
    padding:6rem 2.5rem;
    transition:all 1s ease;
}

.ham-menu ul {
    display:flex;
    flex-direction:column;
    align-items:flex-start !important;
    font-size:1rem;
    font-weight:900;
}

.ham-menu .ham-close {
    position:absolute;
    top:20px;
    right:22px;
}

.ham-menu ul h1 {
    font-size:6.5rem;
    font-weight:900 !important;
}

.ham-menu.active {
    transform:translateX(0%);
    transition:all 1s ease;    
}

.nav-wrapper ul li a { position:relative; }

.nav-wrapper ul li a::before {
    content:'';
    position:absolute;
    bottom:-4px;
    left:0;
    width:0%;
    height:2px;
    background:#fff;
    transition:all .5s ease;
}

.nav-wrapper ul li a:hover::before { width:100%; }

.nav-wrapper ul li.active a::before {
    content:'';
    position:absolute;
    bottom:-4px;
    left:0;
    width:100%;
    height:2px;
    background:#fff;
    transition:width .5s ease;
}

/* ---------------------------
    Section
--------------------------- */
.swipe-section {
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.swipe-section .panels-wrap {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.swipe-section .panel:not(.footer-panel) {
    width:100%;
    height:100vh;
    padding:100px 0px;
}

.swipe-section,
.panels-wrap,
.panel {
    user-select:none;
    touch-action:pan-y;
}

#visual.panel {
    padding:0;
}

.panel:nth-child(even) {
    background:var(--content);
    color:var(--white);
}

.panel:nth-child(even) .title-sm {
    color:var(--gray);
}

.title-wrap {
    margin-bottom:60px;
}

.title-wrap .title-lg {
    margin-bottom:12px;
}

.content-wrap .content-title .title-md {
    margin-bottom:10px;
}

#business .content-wrap .content-title .text-lg {
    padding-bottom:16px;
    margin-bottom:24px;
    border-bottom:1px solid var(--line);
}

/* ---------------------------
    Footer
--------------------------- */
.footer-panel {
    padding:0 !important;
}

#footer {
    color:#fff;
    background:#111;
    padding:60px 0px;
}

#footer .logo { width:10%; }
#footer .logo img { width:100%; }

#footer .footer-menu {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

#footer .footer-menu ul {
    display:flex;
    gap:24px;
    margin:0;
    padding:0;
}

#footer .footer-info ul {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:0;
    margin-top:40px;
}

#footer .footer-info li {
    display:flex;
    opacity:.6;
}

#footer .footer-info li p:first-child {
    min-width:80px;
    text-align:justify;
    font-weight:900;
}

#footer .footer-info li p:last-child::before {
    content:'|';
    padding-right:12px;
}

#footer .footer-info .footer-copyright {
    opacity:.5;
}

/* ---------------------------
    반응형
--------------------------- */
@media screen and (max-width:768px) {
    #nav {
        padding-left:10px;
        padding-right:10px;
    }

    #nav .nav-wrapper > ul {
        display:none;
    }

    .ham {
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .ham-menu.active {
        display:flex;
    }

    .swipe-section .panel:not(.footer-panel) {
        width:100%;
        height:100%;
        padding:100px 0px;
    }

    #footer .logo {
        width:30%;
    }
}