File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
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;}