/* 게시글 공통 ==================================================================================== */ .board_fb01 {font-weight:500 !important;} .board_fb02 {font-weight:700 !important;} .board_fb03 {font-weight:900 !important;} /* 게시글 리스트 ==================================================================================== */ .board_list {width:100%; table-layout: fixed; font-size:0.95em;border-top:var(--bbs-border-width2) solid var(--bbs-border-color2); transition:var(--transition1);} .board_list thead th {background:#fff; color:#444; font-weight:700;padding:18px 0;line-height:1.1em; text-align:center; border-bottom:var(--bbs-border-width1) solid var(--bbs-border-color1);} .board_list tbody td { height:60px; padding:0 5px; word-break:break-all; border-bottom:1px solid #e3e3e3; } .board_list tr > * {width:auto} .board_list tbody tr.notice { background:#f8f8f8;} .board_list tbody tr td.article_title {text-align:left; } .board_list tbody tr td.article_title a:hover .title_text, .board_list tbody tr td.article_title a:focus .title_text {text-decoration: underline;} .board_list tbody tr td.article_title a:before:hover .board_list tbody tr td.article_title a:before:focus{text-decoration: none;} .board_list tbody tr td.article_title a {position:relative; display:inline-block; color:#222; width:100%; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; vertical-align: middle; font-size:1.05em; } .board_list tbody tr td.article_title span {display:inline-block; } .board_list tbody tr td i { color:#aaa;font-size:0.9em; } .board_list tbody tr td.article_title i { padding-right:10px;} .board_list tbody tr td.article_title .comment {position:relative; color:#aaa;font-size:0.85em; letter-spacing:0; display: flex; align-items: center; padding-left:6px; } .board_list tbody td .icon_notice {display:inline-block;width:35px;height:35px; border-radius:50%;text-align:center; background:url('./img/icon_notice.png') no-repeat center 50% var(--color2);background-size:100% auto; margin-top:8px; overflow:hidden; text-indent:-99px; } .board_list tbody tr td a {width:100%; word-break:break-all; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:middle;} .board_list tbody tr td .icon_category {display: inline-block; padding: 0px 10px; height: 31px; line-height: 29px; color: var(--color1); border: 1px solid var(--color1); margin-right: 10px; font-size: 0.85em; border-radius: 5px; font-weight:500; text-decoration:none; } .board_list tbody tr td .icon_writing {display: inline-block; padding: 0px 10px; height: 31px; line-height: 29px; color: #fff; border: 1px solid var(--color2); background: var(--color2); margin-right: 10px; font-size: 0.85em; border-radius: 5px; font-weight:500; text-decoration:none; } .bbs_btn_wrap {padding-top:40px; display: grid; grid-template-columns:1fr; gap:20px; } @media screen and (max-width:1024px) { .board_list {display:block; border-top:0 ;} .board_list thead {display:none} .board_list tbody {display:block;} .board_list tbody tr {display:block; border: 1px solid #ccc; padding: 15px 1em; border-radius:0.7em; } .board_list tr + tr {margin-top:0.7em;} .board_list tbody tr:after {content:'';display:block;clear:both} .board_list tbody tr td {display:block;border:0 !important;height:auto;text-align:left;padding:0;float:left; color:#999; } .board_list tbody tr td.article_title {display:block;float:none;clear:both; margin-bottom:3px; } .board_list tbody tr td span {display:inline-block ; } .board_list tbody tr td:first-child {display:none; } .board_list tbody tr td:last-child {display:none; } .board_list tbody tr td:nth-child(4)::after {position:relative;content:'';top:2px; right:-10px;margin-right:20px; display:inline-block; height:14px;border-right:1px solid #ddd; } .board_list tbody tr td i { padding-right:10px;} .board_list tbody tr.notice {position:relative;padding-left:60px; } .board_list tbody tr.notice td:first-child {display:block;position:absolute;left:15px;top:50%;margin-top:-16px; } .board_list tbody td .icon_notice {width:32px;height:32px; margin-top:0;} .board_list tbody tr:hover { border-color:var(--color1); } } /* 게시글 리스트 ==================================================================================== */ /* 게시글 뷰 ==================================================================================== */ .board_view {position:relative; } .board_view .tit_wrap {position:relative; text-align:center; padding:25px 10px; border-top:var(--bbs-border-width1) solid var(--bbs-border-color1); border-bottom:1px solid var(--border-color1); transition:var(--transition1);} .board_view .tit_wrap .tit {position:relative; font-size:1.5em; line-height:140%; color:#222; font-weight:500;transition:var(--transition1);} .board_view .tit_wrap .tit span {position:relative;top:-4px;display:inline-block; padding:0 10px; height:34px; line-height:32px; color:var(--color1); border:1px solid var(--color1); margin-right:10px; font-size:0.95rem; border-radius:5px; } .board_view .tit_wrap .tit span.icon_writing {color:#fff; background:var(--color2); border-color:var(--color2); } .board_view .tit_wrap .name {color:#999; font-size:0.9em;padding:15px 0 0 0; transition:var(--transition1);} .board_view .tit_wrap .name span {position:relative; padding-right:23px;} .board_view .tit_wrap .name span::after {content:''; position:absolute; top:0; right:12px; bottom:0; width:1px; height:1em; margin:auto; background:#ddd;} .board_view .tit_wrap .name span:last-child {padding:0;} .board_view .tit_wrap .name span:last-child::after{display:none;} .board_view .content_wrap {overflow:hidden;padding:40px 10px; min-height:300px; border-bottom:1px solid var(--bbs-border-color1); } .board_view .content_wrap img {max-width:100%; } .board_view .btn_wrap {padding-top:40px ; text-align:center; overflow:hidden; } .board_view .btn_wrap .bbs_btn02 {margin-right:3px;} .board_view .bwrite_cm {padding-top:20px;} .board_view_btn {padding-top:40px ;text-align:center; } @media screen and (max-width:1024px) { .board_view .tit_wrap {padding:20px 10px;} .board_view .tit_wrap .tit {font-size:1.4em; } .board_view .tit_wrap .tit span { top:-2px; height:32px; line-height:30px; font-size:0.9rem;} .board_view .tit_wrap .name {font-size:0.85em; padding:10px 0 0 0; } .board_view .content_wrap {padding:30px 10px;} } @media screen and (max-width:768px) { .board_view .tit_wrap {padding:1em 5px ; text-align:left;} .board_view .tit_wrap .tit {font-size:1.3em; } .board_view .tit_wrap .tit span { top:-1px; height:30px; line-height:28px; font-size:0.85rem;padding:0 7px; } .board_view .content_wrap {padding:25px 0;} } /* 게시글 뷰페이지 버튼, 이전, 다음글 ======================================*/ .board_view .pn_wrap {padding-top: 30px ; display: flex;} .board_view .pn_wrap li {position: relative;display: table;flex:1;} .board_view .pn_wrap li .inner {position: relative;display: table-cell;z-index: 2; height:90px;padding: 0 20px;border: 1px solid #d5d5d5;vertical-align: middle; font-size: 0.9em; transition:var(--transition1); } .board_view .pn_wrap li.prev .inner {padding-left:90px; border-right-width:0; border-radius:0.7em 0 0 0.7em;} .board_view .pn_wrap li.next .inner {padding-right:90px;text-align: right; border-radius: 0 0.7em 0.7em 0;} .board_view .pn_wrap li::after { position:absolute; content:'';top:39px; border:solid #777; border-width:1px 1px 0 0; padding:5px; } .board_view .pn_wrap li.prev::after { left:42px; transform: rotate(-135deg);} .board_view .pn_wrap li.next::after { right:42px; transform: rotate(45deg); } .board_view .pn_wrap li::before {content:''; position: absolute;top: 50%;transform: translateY(-50%);width: 50px;height: 50px;border-radius: 100%;background:#f1f0ef; } .board_view .pn_wrap li.prev::before {left: 20px;} .board_view .pn_wrap li.next::before { right: 20px;} .board_view .pn_wrap .tit {display: block;padding-bottom:5px; font-weight: 700;color: #333;transition:var(--transition1);} .board_view .pn_wrap .txt {text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:1; -webkit-box-orient: vertical;overflow: hidden; color: #666666;transition:var(--transition1); line-height:1.3; } .board_view .pn_wrap li a:hover .txt {text-decoration:underline; } .board_view .pn_wrap li div.inner .tit, .board_view .pn_wrap li div.inner .txt {color:#999 ; } @media screen and (max-width:768px) { .board_view .pn_wrap li .inner { height:80px; } .board_view .pn_wrap li.prev .inner {padding-left:75px; } .board_view .pn_wrap li.next .inner {padding-right:75px; } .board_view .pn_wrap li::before { width:40px;height: 40px; } .board_view .pn_wrap li::after { top:36px; padding:4px; } .board_view .pn_wrap li.prev::after { left:38px; } .board_view .pn_wrap li.next::after { right:38px; } } @media screen and (max-width:480px) { .board_view .pn_wrap li .inner { height:60px; } .board_view .pn_wrap li.prev .inner {padding-left:65px; } .board_view .pn_wrap li.next .inner {padding-right:65px; } .board_view .pn_wrap li::before { width:32px;height: 32px; } .board_view .pn_wrap li::after { top:26px; } .board_view .pn_wrap li.prev::after { left:34px; } .board_view .pn_wrap li.next::after { right:34px; } .board_view .pn_wrap .tit { padding-bottom:0; } .board_view .pn_wrap .txt {display:none; } } /* 게시글 뷰페이지 버튼, 이전, 다음글 ======================================*/ /* 게시글 뷰페이지 파일다운 ======================================*/ .board_view .file_wrap {position:relative; padding:20px ;font-size:0.95em; overflow:hidden; border-bottom:1px solid #ddd; display: grid; grid-template-columns:160px auto; background:#f9f9f9; transition:var(--transition1);} .board_view .file_wrap .tit { padding-left:40px;margin-top:5px; color:#333; font-weight:bold; font-size:1em; background:url('./img/icon_file.png') no-repeat 5px 0 ;background-size:25px auto; } .board_view .file_wrap li {position:relative; font-size:0.9em; padding:3px 0 ; line-height:1.3; transition:var(--transition1);} .board_view .file_wrap li a, .board_view .file_wrap li button {position:relative; display:inline-block; color:#777; text-align:left; } .board_view .file_wrap li button:hover, .board_view .file_wrap li a:hover {color:#333; text-decoration:underline; } .board_view .file_wrap li a::before, .board_view .file_wrap li button::before {position:relative; padding:6px 30px 6px 10px; display:inline-block; background:url('./img/icon_down.png') no-repeat right 8px top 7px #444;color:#fff; font-size:0.9em; border-radius:5px 0; margin-right:8px; min-width:88px; } .board_view .file_wrap li a:hover::before, .board_view .file_wrap li button:hover::before {background-color:#222; } .board_view .file_wrap li a::before { content:'다운로드'; } .board_view .file_wrap li button::before { content:'미리보기'; background-image:url('./img/icon_blink.png') ;} @media screen and (max-width:1024px) { .board_view .file_wrap { padding:1em ; grid-template-columns:130px auto; } .board_view .file_wrap li a::before, .board_view .file_wrap li button::before { padding:5px 22px 5px 8px; min-width:78px; } } @media screen and (max-width:768px) { .board_view .file_wrap { grid-template-columns:1fr; gap:6px; } .board_view .file_wrap .tit { padding-left:28px; margin:0 ; background-position: 0 0 ;background-size:20px auto; } } /* 게시글 뷰페이지 파일다운 ======================================*/ /* 게시글 뷰페이지 PDF 바로보기 ======================================*/ .board_view .pdf_view_wrap {margin-top:30px;} .board_view .pdf_view_wrap .tit {padding-bottom:8px; color:#333; font-weight:bold; font-size:0.95em;} .board_view .pdf_view_wrap .tit i {color:#d0021b; margin-right:5px;} .board_view .pdf_view_wrap iframe {width:100%; height:700px; border:1px solid #ddd; background:#f5f5f5;} @media screen and (max-width:768px) { .board_view .pdf_view_wrap iframe {height:450px;} } /* 게시글 뷰페이지 PDF 바로보기 ======================================*/ /* 게시글 폼 ==================================================================================== */ .board_form { border-top:var(--bbs-border-width1) solid var(--bbs-border-color1);} .board_form .tit {color:#333; font-weight:600; font-size:1.05em;padding:18px 10px;line-height:1.1em; text-align:center; background:var(--bbs-bgcolor1); } .board_form table {border-collapse:collapse; width:100%; table-layout:fixed; font-size:0.95em;} .board_form .thsize {width:15%;} .board_form table tbody th {padding:10px ; border:1px solid #e5e5e5; background:#fafafa; text-align:center; line-height:1.3; } .board_form table tbody th:first-child {border-left:0;} .board_form table tbody th:last-child {border-right:0;} .board_form table tbody th span {display:block;font-size:0.9em;color:#ec0b0b;} .board_form table tbody td { padding:12px ; word-break:break-all; border:1px solid #e5e5e5; } .board_form table tbody td:first-child {border-left:0;} .board_form table tbody td:last-child {border-right:0;} .board_form select {height:34px !important;} .board_form .btn_wrap {padding:40px 0; overflow:hidden; text-align:center; } /* 제목 색상/굵기 선택 */ .board_form .title_style_wrap {display:flex; align-items:center; gap:8px;} .board_form .title_style_wrap .input_form {flex:1; min-width:0;} .board_form .title_style_wrap select {height:30px;} /* ---- KColorPicker: 제목 색상 선택 위젯 ---- */ .colorpicker{display:inline-flex;vertical-align:middle} .colorpicker-trigger{ display:inline-flex;align-items:center;gap:8px; height:34px;padding:0 10px 0 6px; border:1px solid #c4c8cf;background:#fff; font:inherit;font-size:13px;line-height:1;color:#333;cursor:pointer; } .colorpicker-trigger:hover{border-color:#8a919c;background:#fafbfc} .colorpicker-trigger:focus-visible{outline:2px solid #1a73e8;outline-offset:1px} .colorpicker-chip{ width:20px;height:20px;border-radius:3px;flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); background-image:linear-gradient(45deg,#e6e6e6 25%,transparent 25%,transparent 75%,#e6e6e6 75%), linear-gradient(45deg,#e6e6e6 25%,transparent 25%,transparent 75%,#e6e6e6 75%); background-size:8px 8px;background-position:0 0,4px 4px; } .colorpicker-chip span{display:block;width:100%;height:100%;border-radius:3px} .colorpicker-value{font-variant-numeric:tabular-nums;letter-spacing:.02em} .colorpicker-pop{ position:fixed;z-index:9999;box-sizing:border-box; width:312px;padding:14px; background:#fff;border:1px solid #d0d4da;border-radius:10px; box-shadow:0 8px 28px rgba(16,24,40,.18); font:13px/1.4 system-ui,-apple-system,"Malgun Gothic","맑은 고딕",sans-serif; color:#22262c; } .colorpicker-pop[hidden]{display:none} .colorpicker-sect{margin-bottom:12px} .colorpicker-sect:last-of-type{margin-bottom:0} .colorpicker-sect-title{ display:block;margin:0 0 6px;font-size:11px;font-weight:600; letter-spacing:.04em;color:#6b7280; } .colorpicker-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px} .colorpicker-grid--row{grid-template-rows:1fr} .colorpicker-tile{ position:relative;aspect-ratio:1/1;min-width:24px;min-height:24px; padding:0;border:0;border-radius:3px;cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); } .colorpicker-tile:hover{transform:scale(1.14);z-index:2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.25)} .colorpicker-tile:focus-visible{outline:2px solid #1a73e8;outline-offset:2px;z-index:3} .colorpicker-tile[aria-pressed="true"]::after{ content:"";position:absolute;left:50%;top:46%; width:5px;height:9px;margin:-6px 0 0 -3px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg); } .colorpicker-tile.is-light[aria-pressed="true"]::after{border-color:#1c1f24} .colorpicker-empty{aspect-ratio:1/1;min-height:24px} .colorpicker-actions{display:flex;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid #eceef1} .colorpicker-btn{ flex:1;height:32px;padding:0 8px; border:1px solid #c4c8cf;border-radius:6px;background:#fff; font:inherit;font-size:12.5px;color:#33383f;cursor:pointer;white-space:nowrap; } .colorpicker-btn:hover{background:#f3f5f7;border-color:#a8aeb8} .colorpicker-btn:focus-visible{outline:2px solid #1a73e8;outline-offset:1px} .colorpicker-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0} .colorpicker-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(15,18,22,.42)} .colorpicker-backdrop[hidden]{display:none} .colorpicker-pop.is-sheet{ left:0;right:0;bottom:0;top:auto;width:auto; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); border-width:1px 0 0;border-radius:14px 14px 0 0; } .colorpicker-pop.is-sheet .colorpicker-grid{gap:6px} .colorpicker-pop.is-sheet .colorpicker-btn{height:40px;font-size:14px} @media (prefers-reduced-motion:no-preference){ .colorpicker-tile{transition:transform .09s ease, box-shadow .09s ease} .colorpicker-pop.is-sheet{animation:colorpicker-up .16s ease-out} @keyframes colorpicker-up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}} } @media screen and (max-width:768px) { .board_form table { font-size:0.85em;} .board_form .tit { padding:15px 10px; } .board_form table tbody th {padding:10px 5px; font-size:0.95em; } .board_form table tbody td {padding:10px 5px; } .board_form .thsize {width:80px;} .board_form .title_style_wrap {flex-wrap:wrap;} .board_form .title_style_wrap .input_form {flex:1 1 100%;} } /* 게시글 폼 ==================================================================================== */ /* 게시글 댓글 ==================================================================================== */ .board_comment {margin:40px auto;} .board_comment .top {overflow:hidden; background:#f9f9f9; padding:20px; border:1px solid #ddd;} .board_comment .top .content {float:left; width:85%;} .board_comment .top .content {font-size:0.95em;} .board_comment .top .content .textarea_form {height:80px;} .board_comment .top .submit {float:right; width:15%;} .board_comment .top .submit .btn {border:1px solid #222; background:#222; height:80px; line-height:80px; width:100%; color:#fff; font-size:1.2em;} .board_comment .top .submit .btn:hover {border-color:#000; background:#000;} .board_comment .replybox {padding:20px; border-right:1px solid #ddd;border-bottom:1px solid #ddd;border-left:1px solid #ddd;} .board_comment .replybox .replyinfo {overflow:hidden; padding-bottom:15px; border-bottom:1px solid #ddd;} .board_comment .replybox .replyinfo .count {float:left; color:#999; font-size:0.85em;} .board_comment .replybox .replyinfo .count span {color:#333; font-weight:500;} .board_comment .replybox .replyinfo .tab {display:none;float:right;} .board_comment .replybox .replyinfo .tab li {display:inline-block; margin-right:5px;color:#888;cursor:pointer; font-size:0.9em;} .board_comment .replybox .replyinfo .tab li:last-child {margin-right:0;} .board_comment .replybox .replyinfo .tab li.on {font-weight:500;color:#333;} .board_comment .replybox .replylists {position:relative; padding-bottom:25px; } .board_comment .replybox .replylists li.depth1 {border-radius:5px;background:#f5f5f5;padding:20px;margin:15px 0px 0px 20px;border-top:0px; border-radius:5px;} .board_comment .replybox .replylists li.depth2 {border-radius:5px;background:#f5f5f5;padding:20px;margin:10px 0px 0px 40px;border-top:0px; border-radius:5px;} .board_comment .replybox .replylists li.depth3 {border-radius:5px;background:#f5f5f5;padding:20px;margin:10px 0px 0px 60px;border-top:0px; border-radius:5px;} .board_comment .replybox .replylists li {padding-top:25px;margin-top:25px;border-top:1px solid #e2e2e2; } .board_comment .replybox .replylists li:first-child {padding-top:10px;margin-top:15px;border-top:0px;} .board_comment .replybox .replylists li.nolist {padding-top:0px;margin-top:0px;border:0px;text-align:center;padding:70px 0px 45px 0px;} .board_comment .replybox .replylists li .img {display:none; float:left; width:40px; height:40px; } .board_comment .replybox .replylists li .img img {width:100%; height:100%; border-radius:50px; border:1px solid #efefef;} .board_comment .replybox .replylists li .info { position:relative;} .board_comment .replybox .replylists li .info div { display:inline-block; color:#999; font-size:0.85em; line-height:1.4;} .board_comment .replybox .replylists li .info div.name {color:#222; font-size:0.95em; padding-right:10px; } .board_comment .replybox .replylists li .info div button {color:#999;margin-left:12px; } .board_comment .replybox .replylists li .info div button:before {position: absolute;content: '';width: 1px;height: 13px;background: #ccc;margin: 3px 0px 0px -6px;} .board_comment .replybox .replylists li .content {padding:15px 0 20px 0; color:#555969; font-size:0.95em;} .board_comment .replybox .replylists li .controls {position:relative; overflow:hidden;} .board_comment .replybox .replylists li .controls button {display:inline-block; margin:0 1px;width:60px; height:32px; line-height:30px !important; text-align:center; border:1px solid #ddd; color:#555; cursor:pointer; background:#fff; } .board_comment .replybox .replylists li .controls button:hover {border:1px solid #666;} @media screen and (max-width:800px) { .board_comment .top {padding:15px;} .board_comment .top .content {width:80%;} .board_comment .top .content .textarea_form {height:50px;} .board_comment .top .submit {width:20%;} .board_comment .top .submit .btn {height:50px; line-height:50px;} .board_comment .replybox .replyinfo .tab li {margin-right:2px;} .board_comment .replybox .replylists {padding-bottom:20px;} .board_comment .replybox .replylists li {padding-top:20px;margin-top:20px;} .board_comment .replybox .replylists li:first-child {margin-top:10px;} .board_comment .replybox .replylists li.nolist {font-size:0.85em;padding:56px 0px 45px 0px;} .board_comment .replybox .replyinfo .count, .board_comment .replybox .replyinfo .tab li, .board_comment .replybox .replylists li .info div, .board_comment .replybox .replylists li .info div.name {font-size:0.8em;} .board_comment .replybox .replylists li .content {font-size:0.85em;line-height:145%;} .board_comment .replybox .replylists li .controls button {font-size:0.8em;width:57px;height:27px; line-height:26px;} }