@charset "utf-8";
@import url("/assets/css/common.css?v=1");
/*
| font-family: 'Noto Sans KR', sans-serif;
*/
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face {
font-family: 'ChosunSm';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.1/ChosunSm.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1,h2,h3,h4,h5,div,span,p,dt,dd,li,th,td {font-family: Noto Sans KR,sans-serif;}
/** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
| Sticky Footer
*/
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content_wrap {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
/*
content
*/
.page_tab figure { text-align: center; }
.page_tab figure > img { text-align: center; }
/* #Pagination
================================================== */
.pagination {
border-radius: 4px;
padding: 0;
margin: 0;
}
.page-link {
padding: 12px 17px;
margin-left: 0;
margin-right: 8px;
border-radius: 4px;
line-height: 1.25;
color: #1f2029;
background-color: transparent;
border: 1px solid #efeef2;
transition: all 200ms linear;
}
.page-item:last-child .page-link {
margin-right: 0;
}
.page-link:hover {
color: #fff;
text-decoration: none;
background-color: #333;
border-color: transparent;
}
.page-link:active,
.page-link:focus {
box-shadow: none;
}
.page-item.disabled .page-link {
color: #bdc3c7;
background-color: transparent;
border-color: #efeef2;
}
.page-item.active .page-link {
color: #fff;
text-decoration: none;
background-color: #333;
border-color: transparent;
}
.pagination.circle .page-link {
width: 45px;
height: 45px;
text-align: center;
border-radius: 50%;
line-height: 45px;
padding: 0;
}
.pagination-lg .page-link {
font-size: 20px;
padding: 17px 24px;
}
.pagination-lg.circle .page-link {
width: 60px;
height: 60px;
text-align: center;
border-radius: 50%;
line-height: 60px;
padding: 0;
}
.pagination-lg .page-item:first-child .page-link,
.pagination-lg .page-item:last-child .page-link {
border-radius: 4px;
}
.pagination-lg.circle .page-item:first-child .page-link,
.pagination-lg.circle .page-item:last-child .page-link {
border-radius: 50%;
}
.pagination-sm .page-link {
font-size: 13px;
padding: 8px 13px;
}
.pagination-sm.circle .page-link {
width: 34px;
height: 34px;
text-align: center;
border-radius: 50%;
line-height: 34px;
padding: 0;
}
.pagination-sm .page-item:first-child .page-link,
.pagination-sm .page-item:last-child .page-link {
border-radius: 4px;
}
.pagination-sm.circle .page-item:first-child .page-link,
.pagination-sm.circle .page-item:last-child .page-link {
border-radius: 50%;
}
.pagination.dark .page-link {
color: #fff;
background-color: #6c757d;
border: none;
}
.pagination.dark .page-item.disabled .page-link {
opacity: 0.6;
}
.pagination.dark .page-item.active .page-link {
color: #fff;
text-decoration: none;
background-color: #0027e6;
border-color: transparent;
}
.pagination.dark .page-link:hover {
color: #fff;
text-decoration: none;
background-color: #0027e6;
border-color: transparent;
}
/* =========================
HEADER LAYOUT
========================= */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 65px;
line-height: 65px;
padding: 0 20px;
background: #fff;
border-bottom: 1px solid #e2e8f0;
position: relative;
z-index: 1000;
}
.site-header-left {
display: flex;
align-items: center;
gap: 20px;
}
.site-header-logo {
font-size: 18px;
font-weight: 800;
color: #0f172a;
text-decoration: none;
}
/* =========================
PC NAV
========================= */
.pc-nav {
display: flex;
gap: 10px;
}
.pc-nav a {
font-size: 18px;
font-weight: 600;
color: #0f172a;
text-decoration: none;
position: relative;
}
.pc-nav a:hover {
color: #0f172a;
}
.pc-nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 2px;
background: #0f172a;
transition: width .2s ease;
}
.pc-nav a:hover::after {
width: 100%;
}
/* =========================
ACTION BUTTON SYSTEM
========================= */
.header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.header-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
min-width: 44px;
padding: 0 14px;
border: none; /* 1px solid #d7dee8; */
background: #fff;
color: #0f172a;
font-size: 14px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
transition: all .2s ease;
}
.header-action-btn:hover {
background: #0f172a;
border-color: #0f172a;
color: #fff;
}
.header-action-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
}
.header-action-btn.icon-only {
padding: 0;
width: 44px;
}
/* 햄버거 */
.header-action-btn.menu-btn {
flex-direction: column;
gap: 4px;
}
.header-action-btn.menu-btn span {
display: block;
width: 18px;
height: 2px;
background: currentColor;
}
/* =========================
MOBILE
========================= */
@media (max-width: 991px) {
.pc-nav {
display: none;
}
}
/* =========================
Mobile Hamburger Menu
========================= */
/* 기본적으로 PC에서는 숨김 */
.mobile-menu-btn,
.mobile-menu-overlay,
.mobile-menu-panel {
display: none;
}
/* 모바일 버튼 */
@media (max-width: 991px) {
.mobile-menu-btn {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0;
border: none; /* 1px solid #d7dee8; */
background: #fff;
cursor: pointer;
position: relative;
z-index: 1100;
}
.mobile-menu-btn span {
display: block;
width: 20px;
height: 2px;
background: #0f172a;
transition: transform .25s ease, opacity .25s ease;
}
/* 오버레이 */
.mobile-menu-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.48);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
z-index: 1190;
}
/* 패널 */
.mobile-menu-panel {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: 0;
width: min(86vw, 360px);
height: 100vh;
background: #fff;
box-shadow: -12px 0 30px rgba(15, 23, 42, 0.16);
transform: translateX(100%);
transition: transform .28s ease;
z-index: 1200;
}
.mobile-menu-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 18px 16px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
.mobile-menu-logo a {
font-size: 15px;
font-weight: 800;
color: #0f172a;
text-decoration: none;
letter-spacing: .02em;
}
.mobile-menu-close {
position: relative;
width: 40px;
height: 40px;
border: 1px solid #d7dee8;
background: #fff;
cursor: pointer;
padding: 0;
flex: 0 0 auto;
}
.mobile-menu-close span {
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 2px;
background: #0f172a;
}
.mobile-menu-close span:first-child {
transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-menu-close span:last-child {
transform: translate(-50%, -50%) rotate(-45deg);
}
.mobile-menu-nav {
display: flex;
flex-direction: column;
padding: 10px 0;
}
.mobile-menu-link {
display: flex;
align-items: center;
min-height: 58px;
padding: 0 22px;
border-bottom: 1px solid #e2e8f0;
text-decoration: none;
font-size: 17px;
font-weight: 700;
color: #0f172a;
background: #fff;
transition: background .2s ease, color .2s ease;
}
.mobile-menu-link:hover,
.mobile-menu-link.active {
background: #0f172a;
color: #fff;
}
.mobile-menu-bottom {
margin-top: auto;
padding: 18px 22px 24px;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
.mobile-menu-text {
margin: 0;
font-size: 13px;
color: #64748b;
line-height: 1.6;
}
/* 열렸을 때 */
body.mobile-menu-open {
overflow: hidden;
}
body.mobile-menu-open .mobile-menu-overlay {
opacity: 1;
visibility: visible;
}
body.mobile-menu-open .mobile-menu-panel {
transform: translateX(0);
}
}