breadcrumb 적용
This commit is contained in:
현성필
@@ -6312,6 +6312,194 @@ select.form-control {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
background-color: #e9f8ff;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.breadcrumb {
|
||||
gap: 12px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-home {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.breadcrumb-home svg {
|
||||
width: 18px;
|
||||
height: 17px;
|
||||
fill: #8c959f;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.breadcrumb-home:hover svg {
|
||||
fill: #0049b4;
|
||||
}
|
||||
.breadcrumb-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.breadcrumb-separator svg {
|
||||
width: 6.5px;
|
||||
height: 12px;
|
||||
fill: #5f666c;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.breadcrumb-separator {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.breadcrumb-separator svg {
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-item {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: #5f666c;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.breadcrumb-item:hover {
|
||||
color: #0049b4;
|
||||
}
|
||||
.breadcrumb-item--active {
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
}
|
||||
.breadcrumb-item--active:hover {
|
||||
color: #212529;
|
||||
cursor: default;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.breadcrumb-item {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-nav {
|
||||
background-color: #e9f8ff;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.breadcrumb-nav {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-nav .breadcrumb-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 48px;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.breadcrumb-nav .breadcrumb-list {
|
||||
gap: 12px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-nav .breadcrumb-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.breadcrumb-nav .breadcrumb-list-item {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-nav .breadcrumb-list-item:not(:last-child)::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 6.5px;
|
||||
height: 12px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%235F666C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.breadcrumb-nav .breadcrumb-list-item:not(:last-child)::after {
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-nav .breadcrumb-list-item a {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: #5f666c;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.breadcrumb-nav .breadcrumb-list-item a:hover {
|
||||
color: #0049b4;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.breadcrumb-nav .breadcrumb-list-item a {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-nav .breadcrumb-list-item:last-child a {
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
pointer-events: none;
|
||||
}
|
||||
.breadcrumb-nav .breadcrumb-list-item:first-child a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 0;
|
||||
}
|
||||
.breadcrumb-nav .breadcrumb-list-item:first-child a::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 17px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%238C959F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.breadcrumb-nav .breadcrumb-list-item:first-child a:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%230049B4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.hero-carousel-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user