/* 게시글 리스트 ==================================================================================== */ .board_category {text-align:center; margin-bottom:20px;} .board_category li {display:inline-block; margin-right:3px;} .board_category li:last-child {margin:0;} .board_category li a {display:block; background:#f7f7f7; color:#555; padding:5px 15px; border-radius:2px; font-weight:500; } .board_category li a:hover, .board_category .on a {background:#f15f22; color:#fff; } .board_list .content_wrap {width:100%; border-collapse:collapse;border-top:1px solid #333;table-layout:fixed;} .board_list .content_wrap_q {position:relative; background:#fff; border-bottom:1px solid #dfdfdf;padding:30px 20px;overflow:hidden;} .board_list .content_wrap_q:after {position: absolute; content: ''; display: block; top:35px; right:20px; width: 12px; height: 12px; transform: rotate(45deg); border-bottom: 3px solid #d1d1d1; border-right: 3px solid #d1d1d1;} .board_list .content_wrap_q02:after {position: absolute; content: ''; display: block; top:40px; right:20px; width: 12px; height: 12px; transform: rotate(225deg); border-bottom: 3px solid var(--color1); border-right: 3px solid var(--color1);} .board_list .content_wrap_q em {font-family :'pretendard'; font-weight:500; font-style:normal; float:left; width:30px; line-height:30px;font-size:1.5em;text-align:center; color:var(--color1);} .board_list .content_wrap_q .tit {font-weight:500; float:left; font-size:1.1em; color:#333; padding:2px 10px 0 20px; width:calc(100% - 170px); cursor:pointer; } .board_list .content_wrap_q .sr01 {width:calc(100% - 60px); } .board_list .content_wrap_q .sr02 {width:calc(100% - 170px); } .board_list .content_wrap_q .btns {position:absolute; top:25px; right:50px;} .board_list .content_wrap_q:hover {background:#f4f5f7;} .board_list .content_wrap_a {position:relative; background:#fafafa; border-bottom:1px solid #dfdfdf;padding:40px 20px; line-height:1.6;} .board_list .content_wrap_a dt {float:left;width:40px;} .board_list .content_wrap_a dd {margin-left:55px;} .board_list .content_wrap_a dd span {font-size:1.05em !important;} .board_list .content_wrap_a em {font-family :'pretendard'; font-weight:700; display:block;font-style:normal; width:36px; line-height:36px;font-size:1.1em;text-align:center;background:var(--color1);color:#fff;border-radius:100%;} .board_list .content_wrap_a .cont img {max-width:100%;} .board_list .content_wrap_a .gtable thead th {background:#eee; padding:12px 0;} .board_list .content_wrap_a .gtable tbody td {height:auto; padding:12px 15px;} .board_list .content_wrap .nolist {padding:100px 0; text-align:center; border-bottom:1px solid #dfdfdf;} .board_list .btn_wrap {padding-top:40px; overflow:hidden; } @media screen and (max-width:1024px) { .board_list .content_wrap_q, .board_list .content_wrap_a {padding:20px 5px;} .board_list .content_wrap_q em {font-size:1.1em; line-height:25px;} .board_list .content_wrap_q .tit {padding:0 0 0 5px; font-size:1.05em;} .board_list .content_wrap_a dd {margin-left:40px;} .board_list .content_wrap_a dd span {font-size:1em !important;} .board_list .content_wrap_a em {font-size:1em; width:30px; height:30px; line-height:28px;} .board_list .content_wrap_q .tits {font-size:1em;} .board_list .content_wrap_q:after {top:20px; width:8px; height:8px;} .board_list .content_wrap_q02:after {top:23px;} } /* 게시글 뷰 ==================================================================================== */ .board_view {margin: auto; } .board_view .tit_wrap {position:relative; text-align:center; padding:25px 10px; border-top:2px solid #333; border-bottom:1px solid #ddd; transition:all 0.3s ease;} .board_view .tit_wrap .tit {position:relative; font-size:1.5em; line-height:140%; color:#222; font-weight:600;transition:all 0.3s ease;} .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;} .board_view .tit_wrap .name {color:#999; font-size:0.9em;padding:15px 0 0 0; transition:all 0.3s ease;} .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; word-break:break-all; min-height:300px; } .board_view .content_wrap img {max-width:100%; } .board_view .video_wrap {text-align:center;margin-bottom:40px;} .board_view .video_wrap .youtube_iframes {width:720px; height:480px; } .board_view .btn_wrap {padding:40px 0 ; text-align:center; overflow:hidden; border-top:2px solid #333; } .board_view .btn_wrap .bbs_btn02 {margin-right:3px;} .board_view .bwrite_cm {padding-top:20px;} @media screen and (max-width:1024px) { .board_view .tit_wrap {padding:20px 10px;} .board_view .tit_wrap .tit {font-size:1.35em; } .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:800px) { .board_view .tit_wrap {padding:17px 5px ; text-align:left;} .board_view .tit_wrap .tit {font-size:1.25em; } .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 {position:relative; display: flex; flex-direction: column; } .board_view .pn_wrap li.next {order:1;} .board_view .pn_wrap li.prev {order:2; } .board_view .pn_wrap li {position:relative; font-size:0.9em; border-top:1px solid #ddd; } .board_view .pn_wrap li div, .board_view .pn_wrap li a {position:relative;display:block; color:#555; display: grid; grid-template-columns:160px auto; } .board_view .pn_wrap li span {position:relative;display:inline-block; padding:20px 0 20px 45px; font-weight:500; color:#222; transition:all 0.3s ease;} .board_view .pn_wrap li p {position:relative;display:inline-block; color:#777; padding:20px 0;overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; word-break:break-all; } .board_view .pn_wrap li.next::before {content:''; position:absolute; top:32px; left:20px; border:solid #444; border-width:1px 1px 0 0; padding:4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} .board_view .pn_wrap li.prev::before {content:''; position:absolute; top:27px; left:20px; border:solid #444; border-width:1px 1px 0 0; padding:4px; transform: rotate(135deg); -webkit-transform: rotate(135deg);} .board_view .pn_wrap li a p:hover {text-decoration:underline; } .board_view .file_wrap {position:relative; padding:20px 0 ;font-size:0.95em; overflow:hidden; border-bottom:1px solid #ddd; display: grid; grid-template-columns:160px auto; transition:all 0.3s ease;} .board_view .file_wrap .tit { padding-left:20px; color:#222;} .board_view .file_wrap .tit i {font-size:0.95em; margin-right:10px; color:#444;} .board_view .file_wrap li {position:relative; font-size:0.9em;color:#888;padding:4px 0 4px 22px; line-height:1.3; transition:all 0.3s ease;} .board_view .file_wrap li i {display:none; } .board_view .file_wrap li::before {content:''; position:absolute; left:0; top:6px; width:16px; height:16px; background:url('./img/icon_down.png') no-repeat 0 0; } @media screen and (max-width:800px) { .board_view .pn_wrap li div, .board_view .pn_wrap li a { grid-template-columns:110px auto; } .board_view .pn_wrap li span {padding:15px 0 15px 30px; } .board_view .pn_wrap li p { padding:15px 0; } .board_view .pn_wrap li.next::before { top:27px; left:10px; padding:3px;} .board_view .pn_wrap li.prev::before { top:23px; left:10px; padding:3px;} .board_view .file_wrap { padding:15px 0 ;font-size:0.9em; grid-template-columns:110px auto; } .board_view .file_wrap .tit { padding-left:5px;} } @media screen and (max-width:600px) { .board_view .pn_wrap li div, .board_view .pn_wrap li a {font-size:0.95em; grid-template-columns:90px auto;} .board_view .pn_wrap li span { padding:12px 0 12px 28px;} .board_view .pn_wrap li p { padding:12px 0 ; } .board_view .pn_wrap li.next::before { top:23px; left:10px; } .board_view .pn_wrap li.prev::before { top:19px; left:10px; } .board_view .file_wrap { padding:12px 5px ; grid-template-columns:1fr; } .board_view .file_wrap .tit { display:none;} } .board_list tbody td { height:60px; padding:0 5px;font-size:0.9em; word-break:break-all; border-bottom:1px solid #eaeaea; } /* 게시글 폼 ==================================================================================== */ .board_form {margin: auto; border-top:1px solid #999;} .board_form .tit {color:#444; font-weight:600; padding:19px 10px;line-height:1.1em;font-size:0.9em; text-align:center; background-color:#f5f5f5; } .board_form table {border-collapse:collapse; width:100%; table-layout:fixed; } .board_form .thsize {width:15%;} .board_form table tbody th {padding:10px 20px; border:1px solid #e5e5e5; color:#555;background:#fafafa;font-size:0.9em; 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.85em;color:#ec0b0b;} .board_form table tbody td { padding:12px ; word-break:break-all; border:1px solid #e5e5e5; font-size:0.9em; } .board_form table tbody td:first-child {border-left:0;} .board_form table tbody td:last-child {border-right:0;} .board_form table tbody td .textarea_form {font-size:0.9em;} .board_form .btn_wrap {padding:40px 0; overflow:hidden; text-align:center; } @media screen and (max-width:800px) { .board_form .thsize {width:80px;} .board_form table tbody th {padding:8px ;font-size:0.85em; text-align:center; } .board_form table tbody td {padding:8px ;font-size:0.9em;} } /* 게시글 폼 ==================================================================================== */ /* 게시글 댓글 ==================================================================================== */ .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;font:300 1em 'Noto Sans Kr', sans-serif;} .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;font:300 0.8em 'Noto Sans Kr', sans-serif; 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;} }