@charset "UTF-8";

@media all and (min-width:0px) and (max-width:1199px){
	
	.list { padding: calc(var(--mrgn-half) * 18) 0 calc(var(--mrgn-half) * 14);}
		
	/* board-detail */
	.board-detail .board-top { padding: calc(120px + var(--mrgn-half) * 6) 0 calc(var(--mrgn-half) * 6);}
	.board-detail .board-top .inner { gap: calc(var(--mrgn-half) * 6);}
	.board-detail .board-bottom .content-area { padding: calc(var(--mrgn-half) * 8) 0;}
	.board-detail .pagination li .label { min-width: 120px;}
	.board-detail .pagination li .date { min-width: 90px;}
	
}

@media all and (min-width:0px) and (max-width:999px){
	
	.list { padding: calc(var(--mrgn-half) * 16) 0 calc(var(--mrgn-half) * 14);}
	
	/* board-list */
	.board-list .list-area { gap: calc(var(--mrgn-half) * 2);}
	.board-list .list-area li { width: calc((100% - calc(var(--mrgn-half) * 2)) / 2);}
		
	/* board-detail */
	.board-detail .board-top { padding: calc(100px + var(--mrgn-half) * 6) 0 calc(var(--mrgn-half) * 6);}
	.board-detail .board-top .title { font-size: 1.6em;}
	.board-detail .board-bottom .content-area { padding: calc(var(--mrgn-half) * 9) 0; margin-bottom: calc(var(--mrgn-half) * 6);}
	
	/* certificate-list */
	.certificate-list .search-area label { border-radius: calc(var(--mrgn-half) * 2.5); padding: var(--mrgn-half) calc(var(--mrgn-half) * 3);}
	.certificate-list .list-area { gap: calc(var(--mrgn-half) * 2);}
	.certificate-list .list-area li { max-width: calc((100% - calc(var(--mrgn-half) * 2 * 2)) / 3); border-radius: var(--mrgn-half); padding: calc(var(--mrgn-half) * 2.5) calc(var(--mrgn-half) * 2);}
	.certificate-list .list-area li .text { padding: calc(var(--mrgn-half) * 2.3) calc(var(--mrgn-half) * 2);}		
	.certificate-list .list-area li .title { font-size: 0.9em; margin-bottom: var(--mrgn-half);}
	.certificate-list .list-area li .date { font-size: 0.8em;}
	.certificate-list ~ .modal .img { width: calc(var(--mrgn-half) * 50); padding-top: 100px;}
}

@media all and (min-width:0px) and (max-width:799px){

	/* board-detail */
	.board-detail { padding: 0 0 calc(var(--mrgn-half) * 14);}
	.board-detail .board-top { padding: calc(70px + var(--mrgn-half) * 5) 0 calc(var(--mrgn-half) * 5);}
	.board-detail .board-top .title { font-size: 1.4em;}
	.board-detail .board-top .text { margin-top: calc(var(--mrgn-half) * 4); font-size: 0.85em; }
	.board-detail .board-bottom .content-area { margin-bottom: calc(var(--mrgn-half) * 5);}
	.board-detail .pagination { margin-top: calc(var(--mrgn-half) * 6); gap: var(--mrgn-half);}
	.board-detail .pagination li { padding: calc(var(--mrgn-half) * 1.5) calc(var(--mrgn-half) * 2.5); border-radius: calc(var(--mrgn-half) * 0.5);}
	.board-detail .pagination li .label { font-size: 1em;}
	.board-detail .pagination li .img { width: 30px; margin-right: var(--mrgn-half);}
	.board-detail .pagination li .title { font-size: 0.9em;}
	.board-detail .pagination li .date { font-size: 0.8em;}
	.board-detail .pagination li.on .title { font-size: 1em;}
	
	/* certificate-list */
	.certificate-list ~ .modal .img { padding-top: 70px;}
	
}
	
@media all and (min-width:0px) and (max-width:699px){
		
	.list { padding: calc(var(--mrgn-half) * 14) 0 calc(var(--mrgn-half) * 14);}
	
	.board-list .sub-page-btns { gap: var(--mrgn-half); margin-top: calc(var(--mrgn-half) * 4);}
	.board-list .sub-page-btns a { width: 36px;}
	
	/* board-list */
	.board-list .list-area li .text { padding: calc(var(--mrgn-half) * 2) calc(var(--mrgn-half) * 2) calc(var(--mrgn-half) * 3);}
	.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; margin-bottom: var(--mrgn);}
	.board-list .list-area li .date { font-size: 0.75em; }	
	
	/* board-detail */
	.board-detail .board-top .inner { gap: calc(var(--mrgn-half) * 5);}
	.board-detail .board-top .title { font-size: 1.3em;}
	.board-detail .board-bottom .btn.text { font-size: 1.2em; }
	.board-detail .board-bottom .btn.text span { width: 24px; height: 24px;}
	.board-detail .pagination li .label { font-size: 0.9em; min-width: 95px;}
	.board-detail .pagination li .img { width: 22px; margin-right: var(--mrgn-half);}
	.board-detail .pagination li img { width: 9px; }
	.board-detail .pagination li .title { font-size: 0.85em;}
	.board-detail .pagination li .date { font-size: 0.75em; min-width: 75px;}
	.board-detail .pagination li.on .title { font-size: 0.9em;}	
	
	/* certificate-list */
	.certificate-list .list-area li { max-width: calc((100% - var(--mrgn-half) * 2) / 2);}
	
}

@media all and (min-width:0px) and (max-width:499px){
	
	.board-list .sub-page-btns { margin-top: calc(var(--mrgn-half) * 3);}
	.board-list .sub-page-btns a { width: 30px;}
	.board-list .sub-page-btns img { width: 6px;}
	
	/* board-list */
	.board-list .search-area { padding: calc(var(--mrgn-half) * 1.5) calc(var(--mrgn-half) * 2.5);}
	.board-list .search-area input { font-size: 1em;}
	.board-list .search-area img { width: 16px;}	
	.board-list .list-area li { width: 100%; border-radius: calc(var(--mrgn-half) * 1.5);}
	.board-list .list-area li .title { font-size: 1.4em;}
	.board-list .list-area li .content { font-size: 1.1em;}
	.board-list .list-area li .date { font-size: 0.95em; }
	
	/* board-detail */
	.board-detail .board-top .inner { display: block;}
	.board-detail .board-top .thumb { width: 100%;}
	.board-detail .board-top .title-area { width: 100%; margin-top: calc(var(--mrgn-half) * 2);}
	.board-detail .board-bottom .btn.text span { width: 20px; height: 20px;}
	.board-detail .board-bottom .btn.text span img { width: 4px;}
	.board-detail .pagination li { border-radius: var(--mrgn-half);}
	.board-detail .pagination li .label { min-width: 70px;}
	.board-detail .pagination li .img { width: 18px;}
	.board-detail .pagination li img { width: 8px;}
	.board-detail .pagination li .date { display: none;}
	
	/* certificate-list */
	.certificate-list .list-area li { max-width: 100%;}
}

@media all and (min-width:0px) and (max-width:319px){
	
	.title-area .title { color: var(--color_k_22); font-size: 1.7em;}
	
	/* certificate-list */
	.certificate-list .search-area label { padding: var(--mrgn-half) calc(var(--mrgn-half) * 2);}
}