header{
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 20;
    background-color: #fff;
}
.container{
    margin: 120px 0;
    position: relative;
}
.header-container{
    width: 1500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    position: sticky;
    .logo img{width: 174px; height: 69px;}
    .nav-wrap{display: flex;}

    nav{
        & > ul{display: flex; gap: 102px;}
        & > ul > li{font-size: 22px; position: relative;}
        
    & > ul > li:hover .submenu {
        opacity: 1; /* hover시 보이도록 */
        visibility: visible; /* hover시 보이도록 */
    }
        .submenu{
            position: absolute;
            top: 51px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            width: 180px;
            padding: 30px 20px;
            border-radius: 20px;
            box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.15);
            background-color: #fff;
            opacity: 0; /* 기본적으로 숨김 */
            visibility: hidden; /* 기본적으로 숨김 */
            transition: opacity 0.3s ease, visibility 0.3s ease;
            p{
                padding-left: 10px;
                font-size: 18px;
                a{display: contents;}
            }
            p:hover{
                background-color: #f9ebed;
            }
        }
        .submenu::before{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 17px solid transparent;
            border-right: 17px solid transparent;
            border-bottom: 17px solid #fff;
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    .auth-area{
        display: flex; align-items: center; gap: 50px;
        ul{display: flex; align-items: center; gap: 20px;}
        li{ display: flex; align-items: center;
            img{margin-right: 6px;}
            a{font-size: 16px;}
        }
        .line{width: 2px; height: 16px; background-color: #eeeeee;}
    }
}

footer{
    background-color: #333;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    .footer-container{
        display: flex; align-items: center; gap: 80px; padding: 35px 0;
        ul{display: flex; align-items: center; gap: 20px; margin-bottom: 5px;}
        li, p{
            font-size: 18px;
            color: rgba(255, 255, 255, 0.5);
            font-family: "Pretendard-M";
        }

        .line{width: 2px; height: 13px; background-color: rgba(255, 255, 255, 0.3);}

    }
    
}

.scroll-up{position: fixed;     right: 5%;
    bottom: 101px;}