@charset "UTF-8";

* { box-sizing: border-box; line-height: 1.2;}
body{ overflow-x: hidden;}
.section { position: relative; width: calc(100% - var(--mrgn-x4)); height: inherit; max-width: var(--basic_w); min-height: inherit; margin: 0 auto; z-index: 3;}
input::placeholder { color: #C0C0C0;}
a.btn.text { display: block; margin: 0 auto; width: fit-content;}

.list { padding: calc(var(--mrgn-half) * 20) 0 calc(var(--mrgn-half) * 14);}
.title-area { margin-bottom: calc(var(--mrgn-half) * 5);}
.title-area .sub-title { font-size: 0.9em;}
.title-area .title { color: var(--color_k_22); font-size: 2em;}

.sub-page-btns { display: flex; justify-content: center; gap: var(--mrgn-half); margin-top: calc(var(--mrgn-half) * 4);}
.sub-page-btns a { width: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: var(--color_k_ba); border-radius: 50%;}
.sub-page-btns .on { background: var(--color_main_03); color: var(--color_main_01); font-weight: 600;}
.sub-page-btns .arrow { border: 1px solid var(--color_k_dd);}


.modal { position: fixed; top:0; left: 0; width: 100%; height: 100%; z-index: 999999; background: var(--color_k_050); display: none;}


/* board-list */
.board-list .search-area { max-width: 100%; width: calc(var(--mrgn-half) * 47); border: 1px solid var(--color_k_dd); border-radius: calc(var(--mrgn-half) * 3.5); 
	padding: calc(var(--mrgn-half) * 2) calc(var(--mrgn-half) * 3); display: flex; margin: 0 auto; margin-bottom: calc(var(--mrgn-half) * 5);}
.board-list .search-area input { border: none; flex: 1 1 auto; font-size: 0.9em;}

.board-list .list-area { display: flex; gap: calc(var(--mrgn-half) * 3); flex-wrap: wrap;}
.board-list .list-area li { position: relative; width: calc((100% - calc(var(--mrgn-half) * 3 * 2)) / 3); border-radius: var(--mrgn-half); overflow: hidden; border: 1px solid var(--color_k_dd);}
.board-list .list-area li .thumb { aspect-ratio:  5 / 3; background: url(../img/bg_noimg.png) center; background-size: cover;}
.board-list .list-area li .text { padding: calc(var(--mrgn-half) * 3) calc(var(--mrgn-half) * 3) calc(var(--mrgn-half) * 4);}
.board-list .list-area li .title { font-size: 1.2em; margin-bottom: var(--mrgn-half);}
.board-list .list-area li .content { font-size: 0.9em; color: var(--color_k_66); font-weight: 300; margin-bottom: var(--mrgn);}
.board-list .list-area li .date { font-size: 0.75em; color: var(--color_k_8b); font-weight: 300;}
.board-list .list-area li:hover { box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1); border: 2px solid var(--color_main_01);}
.board-list .list-area li:hover .thumb { margin: -1px;}
.board-list .list-area li:hover .text { margin: 1px -1px -1px;}
.board-list .list-area li:hover .title { color: var(--color_main_01);}


/* board-detail */
.board-detail { padding: 0 0 calc(var(--mrgn-half) * 14);}
.board-detail .board-top { padding: calc(120px + var(--mrgn-half) * 8) 0 calc(var(--mrgn-half) * 8); position: relative;}
.board-detail .board-top:before { background: var(--color_k_fa); width: 100vw; top: 0; left: 50%; transform: translateX(-50%); position: absolute; height: 100%; z-index: -1; content: "";}
.board-detail .board-top .inner { display: flex; gap: calc(var(--mrgn-half) * 8); max-width: 1310px;}
.board-detail .board-top .thumb { width: 45%;}
.board-detail .board-top .thumb img { width: 100%; aspect-ratio:  10 / 7.7; border-radius: var(--mrgn-half); }
.board-detail .board-top .title-area { width: 55%; display: flex; flex-direction: column; justify-content: center;}
.board-detail .board-top .title { font-size: 2em;}
.board-detail .board-top .text { margin-top: calc(var(--mrgn-half) * 5); font-size: 0.9em; font-weight: 300; color: var(--color_k_66); display: flex; justify-content: space-between;}
.board-detail .board-bottom .content-area { padding: calc(var(--mrgn-half) * 9) 0; border-bottom: 1px solid var(--color_k_dd); margin-bottom: calc(var(--mrgn-half) * 6);}
.board-detail .pagination { margin-top: calc(var(--mrgn-half) * 7); display: flex; gap: var(--mrgn-half); flex-direction: column;}
.board-detail .pagination li { padding: calc(var(--mrgn-half) * 2) calc(var(--mrgn-half) * 3); border-radius: calc(var(--mrgn-half) * 0.5); border: 1px solid var(--color_k_dd); display: flex; justify-content: space-between;
	align-items: center;}
.board-detail .pagination li div { display: flex; align-items: center;}
.board-detail .pagination li .label { font-weight: 600; font-size: 1em; display: flex; align-items: center; min-width: 140px;}
.board-detail .pagination li .img { display: inline-flex; width: 30px; background: var(--color_main_01); border-radius: 50%; justify-content: center; align-items: center; margin-right: var(--mrgn-half);}
.board-detail .pagination .prev .img { background: var(--color_k_fa);}
.board-detail .pagination li .title { color: var(--color_k_66); font-weight: 300; font-size: 0.9em; border-bottom: 1px solid transparent;}
.board-detail .pagination li .title.link:hover {border-color: var(--color_k_66); cursor: pointer;}
.board-detail .pagination li .date { color: var(--color_k_66); font-weight: 300; font-size: 0.8em; min-width: 100px;}
.board-detail .pagination li.on { border-color: var(--color_main_01);}
.board-detail .pagination li.on .title { color: var(--color_main_01); font-weight: 600; font-size: 1em;}


/* certificate-list */
.certificate-list .search-area { display: flex; justify-content: center; gap: var(--mrgn-half); border-radius: calc(var(--mrgn-half) * 3.5); margin-bottom: calc(var(--mrgn-half) * 5);}
.certificate-list .search-area label { border-radius: calc(var(--mrgn-half) * 2.5); padding: calc(var(--mrgn-half) * 1.3) calc(var(--mrgn-half) * 3.5); border: 1px solid var(--color_k_dd); color: var(--color_k_dd);
	font-weight: 600; font-size: 0.8em; cursor: pointer;}
.certificate-list .search-area input[type=radio] { display: none;}
.certificate-list .search-area input[type=radio]:checked + label { background: var(--color_main_01); border-color: var(--color_main_01); color: var(--color_w);}

.certificate-list .list-area { display: flex; gap: calc(var(--mrgn-half) * 3); flex-wrap: wrap;}
.certificate-list .list-area li { position: relative; max-width: calc((100% - calc(var(--mrgn-half) * 3 * 3)) / 4); border-radius: var(--mrgn-half); border: 1px solid var(--color_k_dd); overflow: hidden;
	padding: calc(var(--mrgn-half) * 3) calc(var(--mrgn-half) * 2); cursor: pointer;}
.certificate-list .list-area li img { width: 100%;}
.certificate-list .list-area li .text { position: absolute; display: none; padding: calc(var(--mrgn-half) * 3) calc(var(--mrgn-half) * 2); color: var(--color_w); background: var(--color_k_080); left: 0px; bottom: 0px;
	width: 100%; }
.certificate-list .list-area li .title { font-size: 0.9em; margin-bottom: var(--mrgn-half); font-weight: 600;}
.certificate-list .list-area li .date { font-size: 0.8em; font-weight: 300;}
.certificate-list .list-area li:hover .text { display: block;}
.certificate-list ~ .modal { justify-content: center; align-items: center; cursor: pointer;}
.certificate-list ~ .modal .img { width: calc(var(--mrgn-half) * 50); height: fit-content; padding-top: 120px;}
.certificate-list ~ .modal img { width: 100%;}