/* 게시글 리스트 ==================================================================================== */ .board_list .content_wrap { border-top:var(--bbs-border-width1) solid var(--bbs-border-color1);} .board_list .content_wrap li {position:relative; border-bottom:1px solid #dfdfdf; padding:1em 0;display:grid; grid-template-columns:220px auto; gap: 2em;transition:var(--transition1);} .board_list .content_wrap figure {position:relative; aspect-ratio:4/2.6;overflow:hidden; border:1px solid #dfdfdf; display: flex;} .board_list .content_wrap figure img {width:100%; height:100%; object-fit:contain; transition:var(--transition1);} .board_list .content_wrap .cont { } .board_list .content_wrap .tit { font-size:1.2em; color:#222; font-weight:700; margin-bottom:10px;} .board_list .content_wrap .cont .link { color:var(--color1); margin-bottom:15px; font-weight:600; font-size:0.95em; line-height:1.2; } .board_list .content_wrap .txt { color:#777; line-height:1.35; word-break:keep-all; } .board_list .content_wrap li:hover figure img { /* transform: scale(1.15); */ } .bbs_btn_wrap {padding-top:40px; overflow:hidden; display: grid; grid-template-columns:1fr; gap:20px; } .board_list .list_btn {position:absolute; right:0; top:0.8em; font-weight:600; display:inline-block; font-size:0.9em; padding:6px 45px 6px 22px; background:url('./img/top_blank0.png') no-repeat right 20px top 46% var(--color2); color:#fff; text-align:center; cursor:pointer; border-radius:50px;transition:var(--transition1); } @media screen and (max-width:768px) { .board_list .content_wrap li { padding:15px 0; grid-template-columns:170px auto; gap:1.4em; } .board_list .content_wrap .tit { font-size:1.15em; } .board_list .list_btn { padding:4px 40px 4px 18px; background:url('./img/top_blank0.png') no-repeat right 15px top 46% var(--color2); position:relative; right:initial; top:initial; margin-top:10px; } } @media screen and (max-width:580px) { .board_list .content_wrap li { grid-template-columns:120px auto; gap:1.2em; } .board_list .content_wrap .cont { font-size:0.95em; } .board_list .content_wrap .tit { margin-bottom:5px;} .board_list .content_wrap .cont .link { margin-bottom:10px; } .board_list .content_wrap .txt { word-break:break-all; } } @media screen and (max-width:480px) { .board_list .content_wrap li { grid-template-columns:1fr; gap:1em; } } /* 게시글 뷰 ==================================================================================== */ .board_view {position:relative; } .board_view .info {position:relative; display:grid; grid-template-columns:35% auto;gap:1.5em 2em; padding:1em 0;} .board_view .info figure { overflow:hidden; } .board_view .info figure img {width:100%; border:1px solid #e3e3e3; } .board_view .info .tit {font-weight:700; font-size:1.6em; color:#111;padding:10px 0 10px 0; border-bottom:2px solid #333; } .board_view .info .tit span { position:relative; display:inline-block; top:-3px; margin-right:5px; font-weight:700; font-size:1rem; color:#fff; background:var(--color2);padding:6px 10px; border-radius:5px; line-height:1.1; } .board_view .info .cont {} .board_view .info .cont .txt {padding-top:20px; } .board_view .info .cont .txt p {padding-bottom:15px; font-size:0.95em;} .board_view .info dl {position:relative; display: grid; grid-template-columns:120px auto; gap:12px; line-height:1.3; margin-bottom:8px; } .board_view .info dl dt { position:relative; padding:8px 10px; color:#111; height:40px; border:1px solid rgb(0,0,0,0.12);background:var(--color5); text-align:center; border-radius:5px;font-size:0.95em; } .board_view .info dl dd {padding-top:7px;} .board_view .contents {position:relative; padding-top:40px; } .board_view .contents img {width:auto; } .board_view .contents .cont_box {padding-bottom:40px; border-bottom:1px dashed #dfdfdf; } .board_view .contents .cont_box + h4 {margin-top:40px; } .board_view .contents .cont_box:last-child {border-style:solid; } .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:1200px) { .board_view .info { gap:1em 2em;} .board_view .info .tit { font-size:1.5em;} .board_view .info dl { grid-template-columns:110px auto; gap:15px; font-size:0.95em; } } @media screen and (max-width:768px) { .board_view .info {grid-template-columns:1fr; gap:10px;} .board_view .info figure {margin:auto; width:100%; } .board_view .info .tit span { font-size:0.95rem; } .board_view .info .tit { font-size:1.4em;} .board_view .info .cont .txt {padding-top:10px; } .board_view .info dl { grid-template-columns:100px auto;} } @media screen and (max-width:480px) { .board_view .info .tit span { font-size:0.9rem; padding:6px 8px; } .board_view .info dl { grid-template-columns:90px auto; gap:10px; font-size:0.9em; } } /* 게시글 뷰페이지 버튼, 이전, 다음글 ======================================*/ .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; } } /* 게시글 뷰페이지 파일다운 ======================================*/ /* 게시글 폼 ==================================================================================== */ .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 .btn_wrap {padding:40px 0; overflow:hidden; text-align:center; } @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;} } /* 게시글 폼 ==================================================================================== */