@charset "utf-8";


/* color */
.color-red { background:#fb6f6f !important; }
.color-orange { background:#fda55d !important; }
.color-blue { background:#8ec3e8 !important; }
.color-green { background:#a1d271 !important; }
.color-pink { background:#fcb8c2 !important; }
.color-yellow { background:#f9dc90 !important; color:#111 !important; }
.color-purple { background:#c79ddc !important; }
.color-brown { background:#9e685a !important; }
.color-gray { background:#898989 !important; }
.color-black { background:#3b3b3b !important; }


 /* 게시판 헤더 */
header.header .head { display:flex; justify-content:center; align-items:center; }
header.header .head .btn-today { font-size:3rem; margin:0 30px; }
header.header .head .btn-arrow { color:#bbb; display:flex; justify-content:center; align-items:center; border-radius:99px; border:1px solid #ccc; width:30px; height:30px; margin:0 5px; }
header.header .head .btn-arrow:hover { color:#666; border-color:#666; }


/* 게시판 목록 */
#bo_list { position:relative; --red-color:#db0000; --blue-color:#0365d4; }
#bo_list .calendar-box { width:100%; border-collapse:collapse; border-top:1px solid #666; table-layout:fixed; overflow:hidden; }
#bo_list .calendar-box th, #bo_list .calendar-box td { position:relative; border-bottom:1px solid #eee; padding:15px 10px; }
#bo_list .calendar-box th { border-bottom:1px solid #ccc; }
#bo_list .calendar-box td:not(:first-child) { border-left:1px solid #eee; }
#bo_list .calendar-box th:first-child,
#bo_list .calendar-box td:first-child,
#bo_list .calendar-box .red { color:#db0000; }
#bo_list .calendar-box th:last-child,
#bo_list .calendar-box td:last-child { color:#0365d4; }
#bo_list .calendar-box th { text-align:center; background:#f5f5f5; }
#bo_list .calendar-box td { height:130px; padding:15px; color:#666; vertical-align:top; font-size:.875rem; overflow:hidden; }
#bo_list .calendar-box td.today { position:relative; z-index:1; }
#bo_list .calendar-box td.today:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:var(--main-color1, #333); opacity:0.1; z-index:-1; }
/*#bo_list .calendar-box td.today:before { content:""; position:absolute; left:-1px; top:-1px; right:-1px; bottom:-1px; border:1px solid #aaa; z-index:-1; }*/

#bo_list .calendar-box .day-box { display:flex; line-height:1; margin-bottom:10px; }
#bo_list .calendar-box .day-box a { position:relative; color:inherit; }
#bo_list .calendar-box .day-box a:before { content:""; position:absolute; left:calc(50% - 12.5px); top:calc(50% - 14px); width:25px; height:25px; border-radius:99px; z-index:-1; }
#bo_list .calendar-box .day-box a:hover { color:#fff; text-decoration:none; }
#bo_list .calendar-box .day-box a:hover:before { background:#444; }
#bo_list .calendar-box .day-box .day { font-size:1rem; }
#bo_list .calendar-box tr > *:first-child .day-box a:hover:before,
#bo_list .calendar-box .red a:hover:before { background:var(--red-color); }
#bo_list .calendar-box tr > *:last-child .day-box a:hover:before { background:var(--blue-color); }
#bo_list .calendar-box .day-box .point { position:relative; flex:1; padding:0 50px 0 5px; }
#bo_list .calendar-box .day-box .point span { display:inline-block; margin-left:3px; }
#bo_list .calendar-box .day-box .moonday { position:absolute; right:0; top:1px; color:#909090; }

#bo_list .calendar-box .schedule-list-box { height:100px; }
#bo_list .calendar-box .schedule-list-box li { position:absolute; left:0; right:0; height:25px; line-height:25px; margin-bottom:2px; z-index:3; }
#bo_list .calendar-box .schedule-list-box li span { display:block; padding:0 15px; color:#fff; border-radius:10px; background:#666; }
#bo_list .calendar-box .schedule-list-box li span.admin { padding-left:20px; }
#bo_list .calendar-box .schedule-list-box li input { position:absolute; left:7px; top:50%; transform:translateY(-50%); width:12px; height:12px; margin-top:-3px; z-index:9; }


#modal-calendar { --date-img:url('img/icon_calendar.png') no-repeat center/18px; --date-color:var(--main-color2, #333); }
#modal-calendar .modal-dialog { position:absolute; left:0; top:50%; right:0; margin:0 auto; transform:translateY(-70%); }
#modal-calendar.in .modal-dialog { transform:translateY(-50%); transition-duration:200ms; }

#modal-calendar .modal-content { position:relative; border-radius:30px; border:0; box-shadow:0 5px 20px rgba(0,0,0,.2); padding:40px; }
#modal-calendar .modal-content button { right:20px; top:20px; width:30px; height:30px; --btn-color:#aaa; }
#modal-calendar .modal-content button:before,
#modal-calendar .modal-content button:after { border-radius:2px; height:20px; background:var(--btn-color); animation:var(--animation) 800ms infinite; }

#modal-calendar .modal-content button:hover { --btn-color:#333; --animation:trampoline; }

#modal-calendar .modal-content .date { position:relative; padding-left:25px;  font-size:1.25rem; color:var(--date-color); z-index:1; }
#modal-calendar .modal-content .date:before { content:""; position:absolute; left:0; top:0; bottom:0; width:25px; mask: var(--date-img); -webkit-mask: var(--date-img); background:var(--date-color); z-index:-1; }

#modal-calendar .modal-content ul { margin-top:10px; border-top:1px solid #ddd; height:350px; max-height:calc(90vh - 110px); overflow-y:auto; overflow-x:hidden; }
#modal-calendar .modal-content li { position:relative; z-index:1; background:#ddd; padding:10px 15px; margin:5px 0; }
#modal-calendar .modal-content li:before,
#modal-calendar .modal-content li:after { content:""; position:absolute; left:0;  }
#modal-calendar .modal-content li:before { left:-1px; top:-1px; bottom:-1px; right:-1px; background:rgba(255,255,255,.85); z-index:-1; }
#modal-calendar .modal-content li:after { top:0; bottom:0; width:5px; border-radius:5px; background:inherit;}
#modal-calendar .modal-content .head { color:#111; font-weight:600; margin:5px 0; }
#modal-calendar .modal-content .desc { font-size:.875rem; color:#888; padding:10px; background:rgba(255,255,255,.8); }
#modal-calendar .modal-content .desc p { line-height:1.5em; max-height:4.5em; overflow-y:auto; }
#modal-calendar .modal-content .period { display:inline-block; vertical-align:top; border-bottom:1px solid #ddd; font-size:.75rem;  }
#modal-calendar .btn-wrap { margin-top:10px; display:flex; align-items:center; justify-content:space-between; }


@keyframes trampoline {
    0%	{ top:50%; }
    25% { top:70%; }
    50% { top:50%; }
    75% { top:30%; }
    100% { top:50%; }
}


@media (max-width: 1024px) {
    #bo_list .calendar-box .schedule-list-box { height:80px; }
}


@media (max-width: 767px) {
	header.header .head .btn-today { font-size:2rem; margin:0 15px; }
	header.header .head .btn-arrow { margin:0 2px; }

	#bo_list .calendar-box tr,
	#bo_list .calendar-box td { display:block; }
	#bo_list .calendar-box thead,
	#bo_list .calendar-box td.no { display:none; }

	#bo_list .calendar-box td,
	#bo_list .calendar-box .schedule-list-box{ height:auto; min-height:60px; }
	#bo_list .calendar-box td { border-left:1px solid #eee; border-right:1px solid #eee; }
}


/* 게시판 쓰기 */
#bo_w { border-top:1px solid #666; }
#bo_w .write-box { --odd-width:180px; }
#bo_w .write-box > ul { display:flex; flex-wrap:wrap; }
#bo_w .write-box > ul > li { position:relative; padding:15px 20px; border-bottom:1px solid #ddd; display:flex; align-items:center; }
#bo_w .write-box > ul > li:nth-child(odd) { width:var(--odd-width); background:#f8f8f8; }
#bo_w .write-box > ul > li:nth-child(odd).required:after { content:"*"; color:#f50000; display:inline-block; }
#bo_w .write-box > ul > li:nth-child(even) { width:calc(100% - var(--odd-width)); }
#bo_w .write-box > ul > li.noflex { display:block; }
#bo_w .write-box > ul > li.full { width:100%; padding-left:0; padding-right:0; }

#bo_w .write-box label { position:relative; padding:5px 0; margin-right:5px; }
#bo_w .write-box label ~ label { margin-left:10px; }
#bo_w .write-box textarea { resize:none; }
#bo_w .write-box textarea + span { position:absolute; right:30px; bottom:25px; font-size:.75rem; color:#aaa; }
#bo_w .write-box .date span { margin:0 5px; }
#bo_w .write-box #color-sample { width:40px; height:100%; }

#bo_w .write-box i { font-size:1.25rem; margin-right:3px; }
#bo_w .write-box i.link { transform:rotate(-45deg); }
#bo_w .write-box .w_link span { display:inline-block; width:50px; }
#bo_w .write-box .w_link ~ .w_link,
#bo_w .write-box .w_file ~ .w_file { margin-top:5px; }

#bo_w .write-box .file_del { display:inline-block; margin-left:10px; }




@media (max-width: 1024px) {
    #bo_w .write-box { --odd-width:130px; }
}

@media (max-width: 767px) {
    #bo_w .write-box > ul > li { padding:10px 15px; width:100% !important; }
    #bo_w .write-box > ul > li:nth-child(even) { padding:10px 0; }

    #bo_w .write-box .w_link { display:flex; align-items:center; }

	#bo_w .write-box input[type="file"] + input[type="text"] { margin-top:5px; }

	#bo_w .write-box .file_del { margin-left:0; }
}





/* 게시판 읽기 */
#bo_v { --view-row-padding:30px; --view-col-padding:10px; }
#bo_v .view-head { border-top:1px solid #666; border-bottom:1px solid #ddd; padding:var(--view-row-padding); }
#bo_v .view-head .ctg { display:inline-block; border-radius:99px; padding:5px 20px; border:1px solid var(--main-color1, #333); color:var(--main-color1, #333); margin-bottom:10px; }
#bo_v .view-head .subject { font-size:2rem; font-weight:600; }
#bo_v .view-head .desc { display:flex; margin-top:20px; }
#bo_v .view-head .desc li:not(:last-child) { margin-right:30px; }
#bo_v .view-head .desc li b { margin-right:5px; }

#bo_v .view-file { padding:var(--view-col-padding) var(--view-row-padding); background:#fcfcfc; border-bottom:1px solid #ddd; }
#bo_v .view-file li { padding:5px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
#bo_v .view-file li b { display:flex; align-items:center; }
#bo_v .view-file li img { width:20px; margin-right:5px; }
#bo_v .view-file li small { margin-left:5px; color:#888; }
#bo_v .view-file li .btn { border-radius:99px; padding:5px 15px; border:1px solid #666; margin-left:auto; }
#bo_v .view-file li .btn:hover { background:#333; color:#fff; }
#bo_v .view-file li .btn i { font-size:.875rem; }

#bo_v .view-link { padding:var(--view-col-padding) var(--view-row-padding); display:flex; flex-wrap:wrap; align-items:center; margin:0 -5px; }
#bo_v .view-link li { margin:5px; }
#bo_v .view-link li a { display:inline-block; padding:10px 30px; border:1px solid #ddd; border-radius:99px; }
#bo_v .view-link li a:hover { box-shadow:2px 2px 3px rgba(0,0,0,.1); }
#bo_v .view-link li a i { font-size:.875rem; }


#bo_v .view-box { padding:var(--view-row-padding) var(--view-row-padding) calc(var(--view-row-padding) + 20px); }
#bo_v .view-box .view-editor { margin-top:20px; }


#bo_v .view-btn-box { border-top:1px solid #ddd; padding-top:40px; }
#bo_v .view-another ~ .view-btn-box { border-top:none; padding-top:0px; }


@media (max-width: 1024px) {
	#bo_v { --view-row-padding:20px; }
	#bo_v .view-head .subject { font-size:1.5rem; }
}


@media (max-width: 767px) {
	#bo_v { --view-row-padding:15px; --view-col-padding:5px; }
	#bo_v .view-head .ctg { padding:5px 15px; margin-bottom:5px; }
	#bo_v .view-head .desc { margin-top:15px; }

	#bo_v .view-link li { margin:2.5px; }
	#bo_v .view-link li a { padding:5px 15px; }
}