@charset "utf-8";

/* UI / UX */
.calender-wrap{display:flex;align-items:center;justify-content:space-around}
.calender-wrap .input-text{width:calc(50% - 10px);background:url('../img/comm/ico-calender.png') calc(100% - 5px) center no-repeat}
.an-scale .item:hover .board-img img{transform:translate(-50%,-50%) scale(1.1)}

.btn-right-flex{display:flex;gap:5px;justify-content:flex-end;margin:10px 0}
.btn-center-flex{display:flex;gap:5px;justify-content:center;align-items:center;margin:10px 0}

/* TOP */
.board-info{display:flex;justify-content:space-between;align-items:center;margin:20px 0}
.board-info .page-total{display:flex;flex-shrink:0;align-items:center}
.board-info .page-total .page-total-item{line-height:1}
.board-info .page-total .page-total-item:first-child{padding-right:10px;margin-right:10px}
.board-info .page-total .page-total-item:nth-child(2){border-left:1px solid var(--color-border)}
.board-info .page-total .page-total-item strong{color:var(--color-m)}

.board-search .inner{display:flex;justify-content:center}
.board-search .search-item{display:flex;gap:5px}
.board-search .btn-search{text-indent:-999%;overflow:hidden;flex-shrink:0;background:url('../img/comm/ico-search.png') var(--color-m) center/24px no-repeat;width:var(--btn-height);aspect-ratio:1/1;border-top-right-radius:10px}
.board-search .search-item-category{display:flex;gap:5px;margin-right:5px}

/* PAGE */
.board-page{display:flex;gap:5px;align-items:center;margin:20px 0;justify-content:center}
.board-page .btn-page{border:1px solid var(--color-border);width:var(--btn-height);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.board-page .btn-page.btn-current{border:0}
.board-page .btn-page:hover,
.board-page .btn-prev,
.board-page .btn-next,
.board-page .btn-first,
.board-page .btn-last{background-color:var(--color-m);color:#fff;border-color:var(--color-m)}

/* LIST */
.none-data{justify-content:center;text-align:center}

.td-num{width:80px}
.td-hit{width:100px}
.td-date{width:140px}
.td-week{width:70px}
.td-addfile{width:100px}
.td-name{width:140px}
.td-edu-category{width:100px}
.td-edu-day{width:400px}
.td-edu-state{width:100px}
.td-edu-date{width:140px}
.td-edu-time{width:240px}
.td-edu-print{width:90px}
.td-edu-cancel{width:90px}
.td-edu-survey{width:120px}
.td-edu-person{width:100px}
.td-edu-sedate{width:100px}
.td-edu-tstate{width:90px}
.td-edu-check{width:90px}
.td-edu-checkp{width:90px}
.td-edu-subject,
.td-edu-contents{text-align:left}
.td-edu-week{width:80px}
.td-edu-wcontents,
.td-edu-subject02{text-align:left}

.td-subject{display:flex;text-align:left;gap:10px;align-items:center;font-weight:600}
.td-item-category{background-color:var(--color-m);color:#fff;padding:5px 10px;flex-shrink:0;font-size:.875rem;border-radius:5px}
.td-item-category.none{background-color:#b9b8b8}
.td-item-category.wait{background-color:#bfbfbf}
.td-item-category.confirm{background-color:#0f5132}
.td-item-category.info{background-color:#16a34a}
.td-item-category.cancel{background-color:#ef4444}
.td-item-category.cancelAdm{background-color:#b91c1c}
.td-item-category.unapproved{background-color: #EF4444}
.td-item-category.print{background-color:var(--color-point)}

.td-item-category[data-tooltip]{
    position:relative;
}

/* tooltip */
.td-item-category[data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;
    top:140%;                 /* 아래쪽 표시 */
    left:50%;
    transform:translateX(-50%);
    background:#2f2f2f;
    color:#fff;
    padding:10px 14px;       /* 크기 증가 */
    font-size:14px;          /* 글씨 크게 */
    border-radius:8px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:all .15s ease;
    z-index:50;
}

/* 화살표 */
.td-item-category[data-tooltip]::before{
    content:"";
    position:absolute;
    top:120%;                 /* 화살표 위치 */
    left:50%;
    transform:translateX(-50%);
    border-width:7px;
    border-style:solid;
    border-color:transparent transparent #2f2f2f transparent;
    opacity:0;
    visibility:hidden;
    transition:all .15s ease;
}

/* hover */
.td-item-category[data-tooltip]:hover::after,
.td-item-category[data-tooltip]:hover::before{
    opacity:1;
    visibility:visible;
}

.board-list{text-align:center}
.board-list > table{border-top:2px solid var(--color-m)}
.board-list thead th{background-color:var(--bg-light);padding:20px 10px;font-weight:500;color:var(--color-m)}
.board-list tbody td{padding:20px 10px;border-bottom:1px solid #efefef}
.user-name{text-wrap:nowrap}
/*.board-list tbody tr:hover{background-color:var(--bg-light)}*/
.col-contents{text-align:left}

.badge-day{color:#fff;min-width:100px;height:var(--btn-height);display:flex;align-items:center;justify-content:center;background-color:var(--color-d);z-index:10;border-radius:10px}
.badge-day.closed{background-color:#d5d5d5;color:#333}
.badge-day.finish{background-color:red}
.badge-day.modify{background-color:var(--bg-modify)}
.badge-day.all{border:1px solid var(--color-border);background-color:#fff;color:inherit}
.board-list-edu ul{display:grid;gap:20px;grid-template-columns:repeat(2, 1fr)}
.board-list-edu li{min-width:0}
.board-list-edu .item:has([disabled]){cursor:default}
.board-list-edu .item{border:1px solid rgba(0,0,0,.1);border-radius:0 var(--radius) var(--radius) 0;background-color:#fff;display:flex;overflow:hidden}
.board-list-edu .item:not(:has([disabled])):hover{box-shadow:0 8px 28px rgba(0,0,0,.08)}
.board-list-edu .img-box{position:relative;width:300px;flex-shrink:0;aspect-ratio:300/425}
.board-list-edu .badge-day{position:absolute;left:0;top:20px;z-index:10;border-radius:0 10px 10px 0;height:30px}
.board-list-edu .badge-challenge{position:absolute;left:20px;top:10px;width:40px;z-index:10;filter:drop-shadow(10px 10px 5px rgba(0,0,0,.1))}
.board-list-edu .txt-box{padding:70px 20px 20px 20px;flex-grow:1;max-width:calc(100% - 300px);position:relative}
.board-list-edu .badge-wrap{display:flex;gap:5px;margin-bottom:10px}
.board-list-edu .badge-season{min-width:85px;height:28px;border-radius:3px;border:1px solid #6982E4;background-color:#F2F4FF;color:#506BD7;font-weight:500;font-size:.875rem;display:flex;align-items:center;justify-content:center;padding:5px}
.board-list-edu .badge-category{height:28px;border-radius:3px;border:1px solid #8DD3BF;background-color:#EFFDF9;color:#45A489;font-weight:500;font-size:.875rem;display:flex;align-items:center;justify-content:center;padding:5px}
.board-list-edu .board-subject{font-size:1.25rem;font-weight:bold}
.board-list-edu .board-con{font-size:1.125rem;margin:10px 0;min-height:2.3em}
.board-list-edu .board-time{margin:20px 0;color:#000}
.board-list-edu .board-time p{opacity:.8;font-weight:300;display:flex;align-items:flex-start;gap:5px}
.board-list-edu .board-time strong{background-position:left 3px;background-repeat:no-repeat;padding-left:20px;color:#333;flex-shrink:0}
.board-list-edu .progress{padding-top:20px;border-top:1px solid rgba(0,0,0,.08)}
.board-list-edu .progress .detail{display:flex;justify-content:space-between;flex-direction:row-reverse}
.board-list-edu .bar{position:relative;width:100%;height:8px;border-radius:100px;background-color:#E8E8E8;margin-top:10px;overflow:hidden}
.board-list-edu .bar span{position:absolute;top:0;left:0;height:100%;background-color:var(--color-m);background-color:#3AAF80;animation:fillBar 1s ease-out forwards}
.board-list-edu .swiper-button-disabled{opacity:.5}
.board-list-edu .btn{border:1px solid var(--color-b);height:var(--btn-height);text-align:center;border-radius:5px;width:100%;display:flex;gap:5px;align-items:center;justify-content:center;margin-top:10px;transition:.3s}
.board-list-edu .btn::after{font-family:'xeicon';content:"\e940"}
.board-list-edu .btn[disabled]{cursor:default}
.board-list-edu .item:hover .btn{background-color:var(--color-d);color:#fff}

.board-view-education .info-wrap{display:flex;gap:20px;margin:50px 0}
.board-view-education .info-wrap .img{width:40%;border-radius:0 var(--radius) var(--radius) 0;overflow:hidden}
.board-view-education .info-wrap .img img{width:100%}
.board-view-education .txt{flex-grow:1;border:1px solid var(--color-d);border-radius:var(--radius) 0 0 var(--radius);overflow:hidden;max-width:calc(60% - 20px);background:url('../img/comm/symbol-bg.png') right bottom no-repeat}
.board-view-education .txt-full{flex-grow:1;border:1px solid var(--color-d);border-radius:0 var(--radius) var(--radius) 0;overflow:hidden;max-width:100%}
.board-view-education .info-wrap .subject{color:#fff;background-color:var(--color-d);font-size:1.5rem;padding:10px 20px;font-weight:600}
.board-view-education .info-wrap .subject-con{padding:20px;font-size:1.25rem}
.board-view-education .info-wrap dl{display:flex;margin:20px 0}
.board-view-education .info-wrap dt{position:relative;flex-basis:110px;font-weight:500;padding-left:15px;flex-shrink:0;display:flex;gap:5px}
.board-view-education .info-wrap dt::before{position:absolute;left:0;top:.35em;border:2px solid var(--color-d);width:7px;height:7px;border-radius:50%;content:""}
.board-view-education .info-detail{background-color:#f5f5f5;padding:20px}
.board-view-education .info-detail .subject{font-weight:500;font-size:1.25rem;border-bottom:1px solid var(--color-b);margin-bottom:20px;padding-bottom:20px}
.board-view-education .mode-pc{line-height:1}

.board-list-gallery ul{display:flex;gap:20px;flex-wrap:wrap}
.board-list-gallery li{width:calc((100% / 3) - 13.333px)}
.board-list-gallery .item{display:block}
.board-list-gallery .item .txt{padding:20px;background-color:var(--color-light)}
.board-list-gallery .item .board-con{font-weight:500;height:3.5rem}
.board-list-gallery .item .board-date{display:flex;justify-content:flex-end;margin-top:10px;opacity:.8;font-size:.935rem;align-items:center;gap:5px}
.board-list-gallery .board-img{height:300px}
.board-list-gallery .category{position:absolute;right:0;top:0;background-color:var(--color-m);color:#fff;padding:10px 20px;font-size:.935rem;z-index:10;text-align:center;;display:flex;align-items:center;justify-content:center}

.board-list-faq{border-top:2px solid var(--color-d)}
.board-list-faq .q-item{display:flex;align-items:baseline;gap:10px;padding:20px 40px;position:relative;border-bottom:1px solid var(--color-border);font-weight:500}
.board-list-faq .q-item::after{content:"\e941";font-family:'xeicon';display:flex;align-items:center;justify-content:center;text-align:center;position:absolute;width:40px;aspect-ratio:1/1;right:0;top:.8em;z-index:10}
.board-list-faq .q-item::before{content:"Q.";font-family:var(--font-point);display:flex;align-items:center;justify-content:center;text-align:center;position:absolute;width:40px;aspect-ratio:1/1;left:0;top:.8em;z-index:10;font-weight:bold;color:var(--color-m)}
.board-list-faq .q-item.on{background-color:#f9f9f9}
.board-list-faq .q-item.on::after{transform:rotate(-180deg)}
.board-list-faq .a-item{background-color:#f9f9f9;padding:20px 20px 20px 40px;display:none;border-bottom: 1px solid var(--color-border)}
.board-list-faq .answer::before{content:"A";display:flex;color:var(--color-red);width:40px;aspect-ratio:1/1;align-items:center;justify-content:content;text-align:center;left:0;top:20px}
.board-list-faq .category{background-color:var(--color-m);color:#fff;padding:5px 10px;flex-shrink:0;font-size:.875rem;border-radius:5px}

.board-view .board-vheader{border-left:5px solid var(--color-d);padding:0 0 0 20px;margin-bottom:20px}
.board-view .badge-day{color:#fff;min-width:100px;height:30px;border-radius:0 10px 10px 0;display:flex;margin-bottom:10px;align-items:center;justify-content:center;background-color:var(--color-d);z-index:10}
.board-view .badge-day.closed{background-color:#efefef;color:#333}
.board-view .badge-day.finish{background-color:red}
.board-view .badge-day.modify{background-color:var(--bg-modify)}
.board-view .board-vheader .subject{font-size:1.5rem;font-weight:600;border-bottom:1px solid #e7ecf5;padding-bottom:10px;margin-bottom:10px}
.board-view .board-vheader .info{display:flex;align-items:center}
.board-view .board-vheader .info > *:not(:last-child){margin-right:10px;padding-right:10px;line-height:1;border-right:1px solid #e7ecf5}
.board-view .board-vfile{display:flex;flex-direction:column;gap:10px;background-color:#f8f8fa;padding:20px;margin:20px 0}
.board-view .board-vfile .item{display:flex;gap:10px;align-items:flex-start}
.board-view .board-vfile .tit{display:flex;align-items:center;gap:5px;font-weight:500;color:var(--color-m)}
.board-view .board-vfile .tit::after{font-family:'xeicon';content:"\ea89"}
.board-view .board-vfile .btn-file{text-decoration:underline;display:block;margin:5px 0}
.board-view .board-vheader-info{display:flex;gap:5px;flex-wrap:wrap}
.board-view .board-vheader-info > *:not(:last-child){margin-right:10px}
.board-view .board-vheader-info .nm::before{font-weight:bold;content:"작성자 : "}
.board-view .board-vheader-info .hit::before{font-weight:bold;content:"조회수 : "}
.board-view .board-vheader-info .dt::before{font-weight:bold;content:"작성일 : "}
.board-view .board-vheader-info .sdt::before{background:url('../img/main/ico-clock.png') left 2px no-repeat;padding-left:20px;font-weight:bold;content:"신청기간 : "}
.board-view .board-vheader-info .edt::before{background:url('../img/main/ico-clock.png') left 2px no-repeat;padding-left:20px;font-weight:bold;content:"교육기간 : "}
.board-view .board-vheader-info .person::before{background:url('../img/main/ico-calendar-gray.png') left 2px no-repeat;padding-left:20px;font-weight:bold;content:"교육정원 : "}
.board-view .board-vcon{border-bottom:1px solid #d6deed;padding:10px}
.board-nav{background-color:#f8f8fa;margin:20px 0;padding:20px;display:flex;gap:20px;flex-direction:column}
.board-nav .item{display:flex;align-items:center;gap:20px}
.board-nav .info{font-weight:500;flex-shrink:0;color:var(--color-m)}

/* WRITE */
.board-write{border-top:2px solid var(--color-m);margin:20px auto}
.board-write > table{width:100%}
.board-write tbody th{background-color:var(--color-light);padding:10px;text-align:center;border-bottom:1px solid var(--color-b);width:200px}
.board-write tbody td{padding:10px;border-bottom:1px solid var(--color-b)}
.board-write-file{display:flex;gap:5px;flex-direction:column}
.board-write-file .break-all{color:rgba(0,0,0,.8);font-size:.875rem;word-break:break-all}s
.board-write-file .file-wrap{display:flex;gap:5px}
.board-write-file .btn-file-hidden{position:absolute;right:0;top:0}
.board-write-file .img-preview img{display:none}

.join-wrap{max-width:800px;margin:0 auto}
.join-wrap .write-frm-wrap{border:1px solid var(--color-border);margin-bottom:10px}
.join-wrap .subject{font-size:1.125rem;background-color:#f3f9f6;padding:20px}
.join-wrap .subject .subject-info{font-weight:500;font-size:.87em}
.join-wrap .write-frm-con{padding:20px}

.board-write-flex{border-top:2px solid var(--color-m);margin:20px auto}
.board-write-flex .inner{display:flex;flex-direction:column;gap:10px;padding:5px 0}
.board-write-flex .frm-li{display:flex;gap:var(--gap)}
.board-write-flex .frm-li > *{flex:1}
.board-write-flex .frm-li.half{max-width:calc(50% - 2.5px)}
.board-write-flex .frm-item{display:flex;gap:var(--gap);align-items:center;min-height:var(--btn-height)}
.board-write-flex .label-txt{min-width:140px;flex-shrink:0;display:flex;gap:5px;align-items:flex-start}
.board-write-flex .label-txt + *{flex-grow:1}
.board-write-flex .frm-item:has([required]) .label-txt::after{content:"*";color:var(--color-red)}
.board-write-flex .flex-wrap{display:flex;gap:var(--gap);align-items:center}
.board-write-flex .flex-shrink{flex-shrink:0}
.board-write-flex .address-flex-wrap{display:flex;gap:var(--gap);flex-direction:column}
.board-write-flex .address-flex-wrap .zip{gap:var(--gap);display:flex;align-items:center}
.board-write-flex .address-flex-wrap .detail{display:flex;gap:var(--gap);flex-direction:column}

/* paging */
@media (max-width:1400px){
	.board-list-gallery .board-img{height:20vw}
}

@media (max-width:1200px){
	.board-list-edu ul{grid-template-columns:repeat(1, 1fr)}
}

@media (max-width:1024px){
	.board-list-gallery .item .board-con{height:3rem}
	.board-list-gallery .board-img{height:30vw}
	.board-list-gallery li{width:calc((100% / 2) - 10px)}
}

@media (max-width:720px){
	.input-text{height:40px}
	.input-select{padding: 0 20px 0 13px;height: 40px;background-size: 10px;}

	.board-info{flex-wrap:wrap;gap:5px}

	.mb-list thead{display:none}
	.mb-list tr{display:block;padding:10px;border-bottom:1px solid #efefef}
	.mb-list tbody td{display:flex;width:100%;padding:5px 0;border:0}
	.mb-list tbody td:not(:last-child){border-bottom:0}
	/*.mb-list tbody td:first-child{padding-top:20px}
	.mb-list tbody td:last-child{padding-bottom:20px}*/
	.mb-list .td-mb-none{display:none}
	.mb-list td::before{min-width:100px;font-weight:600;text-align:left}
	.mb-list .td-subject{flex-wrap:wrap;gap:5px}
	.mb-list .td-addfile::before{content:"첨부파일"}
	.mb-list .td-date::before{content:"작성일"}
	.mb-list .td-name::before{content:"작성자"}
	.mb-list .td-hit::before{content:"조회수"}
	.mb-list .td-edu-category::before{content:"신청구분"}
	.mb-list .td-edu-state::before{content:"신청상태"}
	.mb-list .td-edu-date::before{content:"신청일자"}
	.mb-list .td-edu-time::before{content:"이용 희망시간"}
	.mb-list .td-edu-print::before{content:"수료증"}
	.mb-list .td-edu-cancel::before{content:"수강취소"}
	.mb-list .td-edu-survey::before{content:"만족도 조사"}
	.mb-list .td-edu-person::before{content:"수강자명"}
	.mb-list .td-edu-subject{text-align:left}
	.mb-list .td-edu-subject::before{content:"교육명"}
	.mb-list .td-edu-contents{text-align:left}
	.mb-list .td-edu-contents::before{content:"교육내용"}
	.mb-list .td-edu-week::before{content:"회차"}
	.mb-list .td-edu-wcontents::before{content:"회차내용"}
	.mb-list .td-edu-sedate::before{content:"개설년월"}
	.mb-list .td-edu-subject02::before{content:"교육명"}
	.mb-list .td-edu-tstate::before{content:"강의상태"}
	.mb-list .td-edu-check::before{content:"출석체크"}
	.mb-list .td-edu-checkp{display:none}
	.mb-list .td-edu-checkp::before{content:"출석부 출력"}

	.mb-list .col-seq::before{content:"회차";padding-left:5px}
	.mb-list .col-contents::before{content:"교육내용";padding-left:5px}
	.mb-list .col-date::before{content:"교육일정";padding-left:5px}
	.mb-list .col-time::before{content:"교육시간";padding-left:5px}
	.mb-list .col-time br{display:none}
	.mb-list .col-remark::before{content:"비고";padding-left:5px}
	.mb-list .col-apply::before{content:"신청";padding-left:5px}

	.board-search:has(.search-item-category){padding-top:50px;position:relative}
	.board-search .search-item-category{position:absolute;top:0;left:0}

	.board-view .board-vheader{padding-left:20px;background-size:30px;border-left-width:2px;background-position-x:5px}
	.board-view .board-vheader-info{gap:10px}
	.board-view .board-vheader .info > *:not(:last-child){margin-right:5px;padding-right:5px}

	.board-write tbody th{display:block;width:100%;text-align:left}
	.board-write tbody td{display:block}

	.board-list-gallery li{width:100%}
	.board-list-gallery .board-img{height:60vw}
	.board-list-gallery .category{width:120px;height:40px;border-bottom-left-radius:15px}

	.board-view-education .info-wrap .subject-con{font-size:1.125rem}
	.board-view-education .info-wrap{flex-direction:column}
	.board-view-education .info-wrap .img{width:100%}
	.board-view-education .txt{max-width:100%}
	.board-view-education .info-wrap dl{flex-direction:column;gap:5px}
	.board-view-education .info-wrap dt{flex-basis:auto}
	.board-view-education .info-wrap dd{padding-left:15px}

	.board-write-flex .frm-item{flex-direction:column;align-items:normal}
	.board-write-flex .label-txt{min-width:100%}
	.board-write-flex .label-txt br{display:none}
	.board-write-flex .label-txt:empty{height:0}
	.board-write-flex .frm-li.half{max-width:100%}

	.board-list-edu .item{flex-direction:column}
	.board-list-edu .img-box{width:100%}
	.board-list-edu .txt-box{max-width:100%}
}