@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;700&display=swap');
:root {
    --bs-link-hover-color : #1e3370;
    --bs-primary : rgb(54, 88, 189);
    --bs-light: rgb(245, 247, 248);
    --bs-primary-rgb: 54, 88, 189;
    --bs-light-rgb: 243, 245, 247;
    --bs-link-hover-bg-black : #d1ddff;
}

body, a, h1, h2, h3, h4, h5, h6, ul, li, input, button, p, b, em {color: #333333; margin: 0;}
body { font-family: "Noto Sans KR", sans-serif; font-size: 16px; font-weight: 400; width: 100vw; overflow-x: hidden; overflow-y: scroll !important ;color: #222; background: var(--bs-light);}
h1, h2, h3, h4, h5 { font-weight: 700; margin-bottom: 0;}
h1 {font-size: 4rem;}
h2 {font-size: 3rem;}
h3 {font-size: 2.5rem;}
h4 {font-size: 2rem;}
h5 {font-size: 1.5rem;}
a {display: block; text-decoration: none;}
button {border: none; background: none;}
.btn {--bs-btn-padding-x: 1.25rem; border-radius: 0.25rem}
.btn  .btn-inner-icon {transition:all 0.2s;}
.btn:hover .btn-inner-icon {transform: translateX(0.25rem);}
.btn-primary {background-color: var(--bs-primary ); border-color: var(--bs-primary ); transition: all 0.2s;}
.btn-primary:hover {background-color: var(--bs-primary ); opacity: 0.7;}
.btn.btn-light:hover {background: rgb(208, 213, 218);}
ul, ol {list-style: none; margin: 0; padding: 0;}


/* 헤더 */
header {display: flex; justify-content: space-between; flex-direction: column; height: 100%; ;  padding: 1.5rem 0 ; width: fit-content; background: #222; transition: all 0.3s; height: 100%; width: 170px;}
.main header {background: none;}
.main header.active {background: #222;}
header .navbar {width: 100%;}
header .logo a {width: 100px; padding: 0;}
header .logo img {filter: invert(1) contrast(100);}
header a, header button {color: #fff; opacity: 0.9; text-align: center;}
header .depth a:hover {background: #333;}
header .nav-item:hover .depth {display: block;}
header .nav-item button, header .nav-item a {padding: 1rem; width: 100%;}
header .nav-item .link-arrow { display: none;}

header .depth {display: none; width: max-content; min-width: 130px; position: absolute; left: 100%; top: 0; background: #222222b6}
header .depth a {padding: 1rem 1.5rem;}
header .lang {padding: 0.25rem; opacity: 0.5;}
header .lang.active {opacity: 0.9; font-weight: 700;}
header .hamburger-btn {width: 30px; height: 30px; display: inline-block; padding: 0; position: relative; z-index: 99;}
:is(header .hamburger-btn) span, span::before, span::after { position: absolute; top: 50%; left: 50%; width: calc(100% - 6px);transform: translateX(-50%); height: 2px; background: #fff; transition: all 0.3s ease-in;}
header .hamburger-btn span::before {content: ''; top: -8px; width: 100%;}
header .hamburger-btn span::after {content: ''; top: 8px; width: 100%;}
header.open .hamburger-btn span {transform: translate(-50%) rotate(135deg);}
header.open .hamburger-btn span::before {top: 0; transform: translate(-50%, 0%) rotate(180deg) ;}
header.open .hamburger-btn span::after {top: 0; transform: translate(-50%, 0) rotate(90deg);}


/* 더보기 버튼 */
.more-btn {font-weight: 700; color: var(--bs-primary); transition: all 0.3s;}
.more-btn::before {content: '+'; margin-left: 0.5rem; float: right;}
.more-btn:hover {opacity: 0.7;}

/* 섹션, 컨테이너 사이즈 */
.sec-blank {padding: 3rem 0 5rem;}
.container {max-width: 100%; width: calc(100% - 170px); margin: 0 0 0 175px; padding: 0 4rem;}

/* 그림자 */
.shadow {box-shadow: 0 .5rem 1rem rgba(0,0,0,.08)!important;}
.shadow-lg {box-shadow: 0 0.5rem 2rem rgba(0,0,0,.1)!important;}

/* 페이지네이션 */
.pagination * {border: none;}
.pagination .page-item:first-child .page-link {background: none; opacity: 0.4;}
.pagination .page-link {color: var(--bs-gray-dark); background: none;}
.active>.page-link, .page-link.active {border:none; background-color: var(--bs-light); color: var(--bs-primary); font-weight: bold; }

/* form */
.form-check-input:checked {background-color: var(--bs-primary); border-color: var(--bs-primary);}

/* 말줄임 */
.text-truncate-line-2 {
    white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2; 
      -webkit-box-orient: vertical;
      overflow: hidden;  
    }
.text-truncate-line-4 {
white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 텍스트를 자를 때 원하는 단위 ex) 3줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;  
}

.list-styled {list-style: disc; padding-left: 1.4rem;}

/* 게시판 */
.board table td, table th {text-align: center; vertical-align: middle ;}
.board td.title {text-align: left;}
.board .table-hover>tbody>tr:hover>* {--bs-table-bg-state: var(--bs-light);}
.post .title {display: grid; grid-template-columns: 1fr 90px; gap: 1rem;}


/* modal 팝업*/
body.modal-open {overflow-y: scroll !important;}
.modal {position: absolute; width: auto; height: auto; padding: 0;}
.modal-dialog {margin: 0;}
.modal-body * {max-width: 100%;}
.modal-dialog .btn-close {filter: invert(1);}



/* `xxl` */
@media (max-width: 1399.98px) {  }
/* `xl` */
@media (max-width: 1199.98px) { 
    h1 {font-size: 3.5rem;}
    h2 {font-size: 3rem;}
    h3 {font-size: 2.25rem;}
    h4 {font-size: 1.75rem;}
    header {width: 140px;}
    header .nav-item button, header .nav-item a {padding: 1rem 2.5rem;}
    
    .container {width: calc(100% - 140px); margin: 0 0 0 140px; padding: 0 2rem;} }
/* `lg` */
@media (max-width: 991.98px) { 
    h1 {font-size: 3rem;}
    h2 {font-size: 2.75rem;}
    h3 {font-size: 1.75rem;}
    h4 {font-size: 1.5rem;}
    h5 {font-size: 1.25rem;}
    header {width: 100%; height: 70px;}
    header .navbar {width: auto}
    header .navbar-nav-wrap {transform: translateX(100%); position: fixed;right: 0; top: 0; width: 80%; background: #222222; height: 100%; padding: 3rem; display: flex; justify-content: center; transition: all 0.3s; z-index: 30;}
    header.open .navbar-nav-wrap {transform: translateX(0); overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none;}
    header.open .navbar-nav-wrap::-webkit-scrollbar { display: none; }
    header .nav-item button {font-size: 1.5rem; text-align: center; margin: 0.5rem 0;}
    header .nav-item .depth {position: static; transition: all 0.3s; display: block; height: 0; overflow: hidden;}
    header .nav-item.active .depth {height: auto; margin: 0 auto 1rem;}
    header .nav-item a {padding: 1rem;}
    header .hamburger-btn {width: 35px; height: 35px;}
    header .nav-item .link-arrow { display: inline-block}
    header .nav-item.active .link-arrow { transform: rotate(180deg);}
    header .nav-item .depth a {font-size: 1.25rem;}

    main {padding-top: 70px;}
    .container {width: 100%; margin: 0; padding: 0 2rem;} 
    .sec-blank {padding: 4rem 0 6rem;}

    /* 게시판 */
    .post .title {grid-template-columns: 1fr}
}

/* `md` */
@media (max-width: 767.98px) {
    h1 {font-size: 2rem;}
    h2 {font-size: 1.75rem;}
    h3 {font-size: 1.5rem;}
    h4 {font-size: 1.25rem;}
    .sec-blank {padding: 3rem 0;}
    .container {padding: 0 1.5rem; width: 100%; margin: 0;}

    .board table .num {display: none;}

}

/* `sm` */
@media (max-width: 575.98px) {}