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;}