.board{position:relative;margin:100px auto;padding:0;z-index:9}
.board-top{margin-bottom:30px;display:flex;justify-content:space-between}
.board-top p{float:left;margin-top:10px}
.board-top span{font-weight:600}
.search-wrap{float:right}
.board-top .search-wrap select{float:left;border:1px solid #525252;height:50px;line-height:50px;width:150px;padding:0 20px;margin-right:10px;background-image:url(../images/common/ico_sel.svg);background-color:#2d2d2d;color:#fff}
.board-top .search-wrap .search{float:left}
.board-top .search-wrap .search input{float:left;border:1px solid #525252;height:50px;line-height:50px;width:350px;padding:0 20px;background-color:#2d2d2d}
.board-top .search button{float:left;height:50px;line-height:50px;width:100px;background:#b61afe;color:#fff;border:0;border-radius:5px;margin-left:10px}
.board-top span{font-weight:600}
.table-wrap{width:100%}
.table-wrap li{position:relative;cursor:pointer;padding:20px;background:#474857cc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease;border-radius:20px}
.table-wrap li:not(:last-child){margin-bottom:20px}
.table-wrap li a{display:flex;width:100%}
.table-wrap li:hover{background:#474857e6;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);transform:translateY(-2px);box-shadow:0 5px 15px #b61afe33}
.table-wrap li:hover .tit{color:#b61afe;transition:.2s}
.table-wrap .cbox.n-1{margin-right:20px}
.table-wrap .cbox.n-1 a{color:#fff}
.table-wrap .cbox.n-1 .noti{display:block;background-color:#b61afe;color:#fff;padding:3px 20px;text-align:center;font-size:14px;border-radius:5px}
.table-wrap .cbox.n-1 .numb{display:block;padding:5px 15px;text-align:center;color:#fff}
.table-wrap .cbox.n-2 .tit{font-size:18px;font-weight:500;display:block;height:30px;overflow:hidden;text-overflow:ellipsis;width:100%;white-space:nowrap;color:#fff}
.table-wrap .cbox.n-2 .info-wrap span{font-weight:300;color:#fff}
.table-wrap .cbox.n-2 .info-wrap .date{position:relative;padding:0 10px;margin:0 5px}
.table-wrap .cbox.n-2 .info-wrap .date::before,.table-wrap .cbox.n-2 .info-wrap .date::after{content:'';display:block;position:absolute;top:50%;transform:translateY(-50%);width:2px;height:2px;box-sizing:border-box;background:#fff}
.table-wrap .cbox.n-2 .info-wrap .date::before{left:0}
.table-wrap .cbox.n-2 .info-wrap .date::after{right:0}
.table-wrap.gallery .cbox.n-2 .info-wrap .date::before{display:none}
.table-wrap.gallery .cbox.n-2 .info-wrap .date{padding:0 10px 0 0;margin:0 5px 0 0}
.table-wrap .cbox.n-3{width:auto;position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.table-wrap .cbox.n-3 .file{display:block;width:30px;height:30px;background:url(https://yudeung.com/images/common/file.png) center no-repeat;background-size:17px;margin:0 auto;float:right}
.table-wrap .cbox.n-3 .file.empty{background:none}
.pagin-wrap{display:table;margin:50px auto}
.pagin-wrap a{color:#fff}
.page-item.active .page-link{background:#b61afe}
.board-view article{margin:50px auto;border-top:2px solid #000}
.board-view article h2{font-size:20px;font-weight:600;padding:20px;border-bottom:1px dashed #d7d9da;background:#fff;color:#000}
.board-view article .info-box{overflow:hidden;padding:20px;border-bottom:1px solid #ededed;background:#fff;color:#000}
.board-view article .info-box li{float:left;margin:0 30px 0 0;font-size:16px}
.board-view article .info-box b{display:inline-block;margin-right:10px}
.board-view article .con-box{padding:50px 20px;border-bottom:1px solid #ededed;background:#fff;color:#000}
.board-view article .con-box p{font-size:16px;line-height:1.8em}
.board-view article .file-area{font-size:16px;padding:20px;background:#fff;border-bottom:1px solid #ededed}
.board-view article .file-area > a{display:block;background:url(../images/common/file.png) center left no-repeat;padding-left:25px;background-size:18px}
.board-view article .file-area > a:hover{color:#f26321;transition:.2s;text-decoration:underline}
.btn-area{text-align:center}
.btn-area button{border:0;border-radius:5px;margin-right:5px}
.btn-area button:last-child{margin-right:0}
button{width:120px;height:50px;color:#fff!important}
button.write{background:#783199}
button.modify{background:#b61afe}
button.delete{background:#2b2c31}
.m-file{display:none}
table{background:#fff}
.table-wrap.gallery{border-top:0}
.table-wrap.gallery li{border:1px solid #ddd;float:left;width:32.2%;margin-right:20px;margin-bottom:20px}
.table-wrap.gallery li:nth-child(3n){margin-right:0}
.table-wrap.gallery .img{width:100%;height:230px;background:#ddd;margin-bottom:20px}
.table-wrap.gallery .img img{width:100%}
.table-wrap.gallery .cbox.n-1{float:none;width:15%}
.table-wrap.gallery .cbox.n-2{width:100%;float:none}
.pagination{display:flex;padding-left:0; gap: 0 10px; list-style:none}
.page-link{position:relative;display:block;color:#b61afe;text-decoration:none;background-color:#312f2f;border:1px solid #2c2c2c;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;font-weight:200}
.page-link:hover{z-index:2;color:#b61afe;background-color:#e9ecef;border-color:#dee2e6}
.page-link:focus{z-index:3;color:#b61afe;background-color:#e9ecef;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}
.page-item:not(:first-child) .page-link{margin-left:-1px}
.page-item.active .page-link{z-index:3;color:#fff;background-color:#b61afe;border-color:b61afe}
.page-item.disabled .page-link{color:#6c757d;pointer-events:none;background-color:#fff;border-color:#dee2e6}
.page-link{padding:.375rem .75rem}
.page-item:first-child .page-link{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}
.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}
.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem}
.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}
.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}
.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem}
.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}
.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}
@media screen and (max-width: 1024px) {
    .board{margin:50px auto;padding:0 20px}
    .board-top{flex-direction:column;gap:20px}
    .board-top p{float:none;margin-top:0}
    .search-wrap{float:none;display:flex;flex-wrap:wrap;gap:10px}
    .board-top .search-wrap select{width:120px;font-size:14px}
    .board-top .search-wrap .search input{width:250px;font-size:14px}
    .board-top .search button{width:80px;font-size:14px}
    .table-wrap li{padding:15px}
    .table-wrap .cbox.n-2 .tit{font-size:16px}
}
@media screen and (max-width: 768px) {
    .board{margin:30px auto;padding:0 15px}
    .board-top{margin-bottom:20px}
    .board-top p{font-size:14px}
    .search-wrap{flex-direction:column;gap:10px}
    .board-top .search-wrap select{width:100%;height:45px;font-size:14px;margin-right:0;margin-bottom:5px}
    .board-top .search-wrap .search{width:100%}
    .board-top .search-wrap .search input{width:calc(100% - 90px);height:45px;font-size:14px;margin-right:0}
    .board-top .search button{width:80px;line-height:45px;height:45px;font-size:14px;margin-left:10px}
    .table-wrap li{padding:15px;margin-bottom:15px}
    .table-wrap li a{flex-direction:column;gap:5px}
    .table-wrap .cbox.n-1{margin-right:0;margin-bottom:5px;width:100%;text-align:left}
    .table-wrap .cbox.n-1 .noti{display:inline-block;padding:5px 15px;font-size:12px}
    .table-wrap .cbox.n-1 .numb{font-size:14px;text-align:left;padding:0}
    .table-wrap .cbox.n-2{width:100%}
    .table-wrap .cbox.n-2 .tit{font-size:16px;height:auto;white-space:normal;line-height:1.4;margin-bottom:8px}
    .table-wrap .cbox.n-2 .info-wrap{display:flex;flex-wrap:wrap;gap:5px;font-size:12px}
    .table-wrap .cbox.n-2 .info-wrap span{font-size:12px}
    .table-wrap .cbox.n-2 .info-wrap .date{padding:0 8px;margin:0 3px;font-size:12px}
    .table-wrap .cbox.n-3{position:static;transform:none;width:100%;text-align:left;margin-top:10px}
    .table-wrap .cbox.n-3 .file{float:none;display:inline-block}
    .table-wrap.gallery li{width:100%;margin-right:0;margin-bottom:20px}
    .table-wrap.gallery .img{height:200px}
    .table-wrap.gallery .cbox.n-2 .tit{font-size:14px;padding:0 10px}
    .table-wrap.gallery .info-wrap{padding:0 10px}
    .pagin-wrap{margin:30px auto}
    .pagination{justify-content:flex-start;flex-wrap:wrap}
    .page-link{padding:.5rem .75rem;font-size:14px}
    .btn-area{margin:20px 0}
    .btn-area button{width:80px;height:45px;font-size:14px;margin:5px}
    .board-view article{margin:30px auto}
    .board-view article h2{font-size:18px;padding:15px}
    .board-view article .info-box{padding:15px}
    .board-view article .info-box li{float:none;margin:5px 0;font-size:14px}
    .board-view article .con-box{padding:30px 15px}
    .board-view article .con-box p{font-size:14px;line-height:1.6}
    .board-view article .file-area{padding:15px;font-size:14px}
}
@media screen and (max-width: 480px) {
    .board{margin:20px auto;padding:0 10px}
    .board-top .search-wrap select{height:40px;line-height:40px;font-size:13px}
    .board-top .search-wrap .search input{height:40px;font-size:13px;width:calc(100% - 70px)}
    .board-top .search button{width:60px;height:40px;font-size:13px}
    .table-wrap li{padding:20px;margin-bottom:12px}
    .table-wrap .cbox.n-2 .tit{font-size:15px}
    .table-wrap .cbox.n-2 .info-wrap{font-size:11px}
    .table-wrap .cbox.n-2 .info-wrap span{font-size:11px}
    .table-wrap .cbox.n-2 .info-wrap .date{font-size:11px;padding:0 6px}
    .page-link{padding:.4rem .6rem;font-size:13px}
    .btn-area button{width:70px;height:40px;font-size:13px}
    .board-view article h2{font-size:16px;padding:12px}
    .board-view article .info-box{padding:12px}
    .board-view article .con-box{padding:20px 12px}
    .board-view article .con-box p{font-size:13px}
    .board-view article .file-area{padding:12px;font-size:13px}
}