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;
padding: 20px 0;
}
&>ul>li:hover,
&>ul>li:hover>p,
&>ul>li:hover>a,
.active-menu {
cursor: pointer;
color: #c23d4a;
}
}
.submenu {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 180px;
margin-top: 35px;
padding: 30px 20px;
border-radius: 20px;
box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.15);
background-color: #fff;
opacity: 1;
/* 기본적으로 숨김 */
transition: opacity 1s ease, visibility 1s ease;
p {
padding-left: 10px;
font-size: 18px;
a {
display: contents;
}
}
p:hover,
.now-menu {
background-color: #f9ebed;
}
}
.submenu.visible {
opacity: 1;
}
.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;
width: 56px;
height: 19px;
overflow: hidden;
}
}
.line {
width: 2px;
height: 16px;
background-color: #eeeeee;
}
}
}
@media screen and (max-width: 1500px) {
.header-container{width: auto; }
}
footer {
width: 100%;
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: 210px;
bottom: 101px;
z-index: 555;
}