@charset "utf-8"; /* board layout */ /* 초기화 */ select, input[type=submit], input[type=text], input[type=tel], input[type=password], input[type=file], input[type=number], input[type=email], input[type=date], input[type=search], textarea { -webkit-box-shadow: none; box-shadow: none; width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; -webkit-tap-highlight-color: transparent; } /* 게시판 */ .section.board { padding: 0 24px; } .section.tab .section.board { padding: 0 0px; } /* 게시판 상단(페이지 정보 및 검색) */ .boardSearWrap { display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between; flex-direction: column; margin-bottom: 2.5rem; } .postInfo { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .postInfo>div:first-child::after { display: inline-flex; margin: 0 .5rem; width: 1px; height: 1.3rem; background: #ccc; content: ''; } .bdSearch form { display: flex; gap: 10px; align-items: center; justify-content: center; } .bdSearch .krds-form-select { padding: 0 40px 0 20px; border: 1px solid #dddddd; min-width: 9.5rem; height: var(--form-select-size-height); background-image: url(/images/common/i-toggle-off.svg); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; color: #1d1d1d; border-radius: 0; } .bdSearch .krds-form-select:focus { border-color: var(--brand); outline: none; box-shadow: none; border-width: 2px; } .bdSearch .krds-input { border: 1px solid #dddddd; height: var(--form-input-size-height); color: #1d1d1d; border-radius: 0; } .bdSearch .krds-input:focus, .bdSearch .krds-input.focus { border-color: var(--brand); outline: none; box-shadow: none; border-width: 2px; } .bdSearch .krds-input::placeholder { color: #808080; } .btnSh .btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--brand); width: auto; height: var(--form-button-size-height); background: var(--brand); color: #fff; line-height: 1; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; border-radius: 0; } /* 게시판 테이블 */ .tableWrap { border-top: 2px solid #555555; } .table { width: 100%; table-layout: auto; border-collapse: collapse; } .table thead { display: none; } .table, .table tbody, .table tr, .table td { display: block; width: 100%; } .table tbody tr { display: flex; flex-direction: column; padding: 1.2rem 0; border-bottom: 1px solid #e5e7eb; width: auto; background: #fff; } .table thead th { padding: 1.2rem .8rem; border-bottom: 1px solid #aaaaaa; font-weight: 700; text-align: center; } .table tbody td { padding: .1rem 0; border: none; font-size: 1.4rem; color: #1d1d1d; text-align: left; } .table tbody td.tdTitle { padding-bottom: 1rem; font-size: 1.7rem; font-weight: 600; line-height: 1.4; order: -1; } .tdTitle { padding-bottom: .6rem; font-weight: 600; } .table tbody td:not(.tdTitle) { display: flex; gap: .6rem; align-items: flex-start; } .table tbody td:not(.tdTitle)::before { display: inline-block; flex: 0 0 auto; margin-right: 0; padding: .3rem .6rem; min-width: 4.5rem; background: #f3f4f6; font-size: 1.2rem; color: #000000; text-align: center; content: attr(data-label); border-radius: .4rem; } /* 텍스트형 목록 확장: 메타(등록일/조회수 등) 좌측 라인형 */ .tableWrap--line-meta .table tbody tr { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; padding: 1.4rem 0; } .tableWrap--line-meta .table tbody td.tdTitle { width: 100%; padding-bottom: .7rem; } .tableWrap--line-meta .table tbody td:not(.tdTitle) { display: inline-flex; align-items: center; gap: .2rem; width: auto; padding: 0; font-size: 1.1rem; font-weight: 500; color: #666; } .tableWrap--line-meta .table tbody td:not(.tdTitle)::before { padding: 0; min-width: 0; background: transparent; font-size: 1.1rem; color: #666; border-radius: 0; } .tableWrap--line-meta .table tbody td[data-label="조회수"]::before, .tableWrap--line-meta .table tbody td[data-label="조회"]::before { margin-left: .8rem; padding-left: .9rem; background-image: linear-gradient(#d4d7dc, #d4d7dc); background-repeat: no-repeat; background-position: left center; background-size: 1px 10px; } .tableWrap--line-meta .table tbody td[data-label="번호"], .tableWrap--line-meta .table tbody td[data-label="파일"], .tableWrap--line-meta .table tbody td[data-label="작성자"] { display: none; } /* 게시판 상세 */ .bInfo { padding: 2rem 0; border-top: 2px solid #555; border-bottom: 1px solid #d0d0d0; text-align: center; } .bContTit { margin-bottom: 1rem; font-size: 1.8rem; font-weight: 700; color: #1d1d1d; } .veiwInfoBox>ul { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; row-gap: 0rem; } .veiwInfoBox>ul>li { font-size: 1.4rem; font-weight: 500; color: #1d1d1d; } .viewContent { padding: 1.5rem 0; font-size: 1.5rem; font-weight: 500; line-height: 1.5; color: #1d1d1d; } .viewContent img { display: block; margin: 0 auto; max-width: 100%; } .fileBox { display: flex; align-items: center; flex-direction: column; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; background: #f7f7f7; } .fileTit { padding: .5rem 0; width: 100%; font-size: 1.6rem; font-weight: 700; color: #1d1d1d; text-align: center; } .fileList { width: 100%; background: #fff; } .fileList>ul { padding: 1rem; } .fileList>ul>li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.5rem; row-gap: .5rem; } .fileList>ul>li:last-child { margin-bottom: 0; } .pagePrevNext { margin: 2rem 0; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; } .pagePrevNext>ul>li { display: flex; align-items: center; padding: 1rem; border-bottom: 1px solid #d0d0d0; overflow: hidden; } .pagePrevNext>ul>li:last-child { border: none; } .pagePrevNext>ul>li a { overflow: hidden; max-width: calc(100% - 9.5rem); font-size: 1.5rem; white-space: nowrap; text-overflow: ellipsis; } .pagePrevNext span { display: flex; align-items: center; margin-right: 1.5rem; width: 7.5rem; font-size: 1.5rem; font-weight: 700; color: #1d1d1d; } .pagePrevNext span.prev::before, .pagePrevNext span.next::before { display: inline-block; margin-right: 10px; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center center; background-size: 12px; content: ''; } .pagePrevNext span.prev::before { background-image: url(/images/common/i-toggle-on.svg); } .pagePrevNext span.next::before { background-image: url(/images/common/i-toggle-off.svg); } .fileInfo { font-size: 1.5rem; } .fileSize { margin-left: 4px; font-size: 1.2rem; } .fileIcon img { width: 2.2rem; } .fileMoreBtns { display: flex; gap: 5px; } .custom-page-btn-wrap a[class$='-link'] { display: inline-flex; align-items: center; justify-content: center; height: 4rem; line-height: 1; text-decoration: none; letter-spacing: -0.01em; } .custom-page-btn-wrap .btn-write-link { border: 1px solid #33363D; width: 8.9rem; background-color: #33363D; font-size: 1.6rem; color: #ffffff; border-radius: 6px; } .custom-page-btn-wrap .btn-revise-link, .custom-page-btn-wrap .btn-del-link, .custom-page-btn-wrap .btn-list-link { width: 7.6rem; font-size: 1.6rem; border-radius: 6px; } .custom-page-btn-wrap .btn-write-link, .custom-page-btn-wrap .btn-list-link { border: 1px solid #33363D; background-color: #33363D; color: #ffffff; } .custom-page-btn-wrap .btn-revise-link, .custom-page-btn-wrap .btn-del-link { border: 1px solid #58616A; background-color: #ffffff; color: #1d1d1d; } .custom-page-btn-wrap a[class$='-link']:focus-visible { outline: 2px solid #1d1d1d; outline-offset: 2px; } /* 갤러리형(목록) */ .galleryWrap { padding: 2.5rem 0 0 0; border-top: 2px solid #555; } .galleryList>ul { display: flex; gap: 1rem 4%; flex-wrap: wrap; } .galleryList>ul>li { width: 48%; } body.youtube-gallery-page .galleryList>ul>li:not(.is-featured) .gllImg img { width: 100%; height: 100%; object-fit: cover; } body.youtube-gallery-page .galleryPlayer { position: relative; width: 100%; padding-top: 56.25%; border: 1px solid #e2e2e2; border-radius: 1rem; overflow: hidden; background: #000; } body.youtube-gallery-page .galleryPlayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } body.youtube-gallery-page .galleryList>ul>li.is-active .gllImg { border-color: #1d4ed8; box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.14); } body.youtube-gallery-page .galleryList>ul>li:first-child { width: 100%; } .galleryList>ul>li>a { display: block; } body.youtube-gallery-page .galleryList>ul>li.is-featured .thumb { cursor: default; } body.youtube-gallery-page .galleryFeaturedMeta { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 0.8rem; } body.youtube-gallery-page .galleryFeaturedText { min-width: 0; flex: 1 1 auto; } body.youtube-gallery-page .galleryFeaturedMeta .gTit, body.youtube-gallery-page .galleryFeaturedMeta .gDate { margin-top: 0; } body.youtube-gallery-page .galleryFeaturedMeta .gDate { margin-top: 0.4rem; } body.youtube-gallery-page .galleryAccordionBtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; flex: 0 0 auto; min-width: 8.8rem; height: 3.6rem; padding: 0 1.2rem; border: 1px solid #d7dbe0; border-radius: 999px; background: #fff; font-size: 1.4rem; font-weight: 600; color: #1d1d1d; } body.youtube-gallery-page .galleryAccordionBtn::after { display: block; width: 1.8rem; height: 1.8rem; background-image: url(/images/common/i-plus-toggle.svg); background-repeat: no-repeat; background-position: center center; background-size: 1.4rem; content: ""; } body.youtube-gallery-page .galleryAccordionBtn[aria-expanded="true"]::after { background-image: url(/images/common/i-minus-toggle.svg); } body.youtube-gallery-page .galleryFeaturedDetail { margin-top: 1.2rem; padding: 1.6rem; border: 1px solid #e2e8f0; border-radius: 1rem; background: #f8fafc; font-size: 1.4rem; line-height: 1.6; color: #334155; } body.youtube-gallery-page .galleryList>ul>li[data-youtube-url] .thumb { cursor: pointer; } .gllImg { padding-top: 60.6%; border: 1px solid #e2e2e2; overflow: hidden; position: relative; width: 100%; border-radius: 1rem; } .gllImg img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transition: transform 0.5s ease; object-fit: contain; transform: translate(-50%, -50%) scale(1); /* 부드러운 애니메이션 */ } /* 마우스 오버 확대 */ .gllImg:hover img { transform: translate(-50%, -50%) scale(1.1); /* 10% 확대 */ } body.thumb-ratio-page .galleryList .gllImg { padding-top: 0; height: auto; background: #fff; } body.thumb-ratio-page .galleryList .gllImg img { position: static; width: 100%; height: auto; object-fit: initial; transform: none; } body.thumb-ratio-page .galleryList .gllImg:hover img { transform: none; } .gTit { margin-top: 0.8rem; overflow: hidden; font-size: 1.6rem; font-weight: 700; color: #1d1d1d; white-space: nowrap; text-overflow: ellipsis; } .gDate { margin-top: 4px; font-size: 1.3rem; font-weight: 400; color: #808080; } /* 게시판버튼 */ .custom-page-btn-wrap { display: flex; justify-content: end; column-gap: 4px; } /* list_thumb_left(썸네일 + 내용) */ .sabo-list { margin-top: 12px; margin-bottom: 0; padding-left: 0; border-top: 1px solid #e5e7eb; list-style: none; } .sabo-list>li { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid #e5e7eb; background-image: url("/images/board/20260619093950254.png"); background-size: 30%; background-repeat: no-repeat; background-position: right bottom 10px; } .sabo-list .thumb { flex: 0 0 160px; border: 1px solid #d7dbe0; overflow: hidden; width: 160px; background: #f5f6f7; } .sabo-list .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .sabo-list .info { display: flex; justify-content: flex-start; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 100px; } .sabo-list .title { margin: 0 0 6px; font-size: 1.8rem; font-weight: 700; color: #1d1d1d; } .sabo-list .desc { margin: 4px 0 0; font-size: 1.5rem; color: #3b4a5a; word-break: keep-all; } /* board write */ .board-write { color: #111827; } .board-write__required { margin: 0; padding: 0 0 12px; border-bottom: 2px solid #555; font-size: 1.5rem; font-weight: 600; } .board-write__required span { color: #ef4444; } .board-write__section { padding: 16px 0 18px; border-bottom: 1px solid #d9dee7; } .board-write__field+.board-write__field { margin-top: 10px; } .board-write__label { display: inline-block; margin-bottom: 8px; font-size: 1.5rem; font-weight: 700; color: #111827; } .board-write__label--required::before { margin-right: 4px; color: #ef4444; content: "*"; } .board-write__control { width: 100%; height: 4.2rem; padding: 0 12px; border: 1px solid #bfc5d2; background: #fff; font-size: 1.5rem; color: #111827; } .board-write__control--md { max-width: 250px; } .board-write__control--lg { max-width: 360px; } .board-write__textarea { min-height: 20rem; padding-top: 12px; padding-bottom: 12px; resize: vertical; } .board-write__split { display: grid; gap: 10px; } .board-write__split--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .board-write__email { display: flex; flex-direction: column; gap: 10px; } .board-write__email-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; } .board-write__email-at { font-size: 1.8rem; font-weight: 700; color: #475467; } .board-write__select { width: 100%; max-width: none; padding-right: 40px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; background-image: url(/images/common/i-toggle-off.svg); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .board-write__select::-ms-expand { display: none; } .board-write__address { display: flex; flex-direction: column; gap: 10px; } .board-write__address-row { display: flex; gap: 8px; align-items: center; } .board-write__address-row .board-write__control { flex: 1 1 auto; } .board-write__address-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 76px; height: 4.2rem; padding: 0 14px; border: 1px solid #bfc5d2; background: #fff; line-height: 1; text-align: center; white-space: nowrap; text-decoration: none; font-size: 1.4rem; font-weight: 600; color: #555; box-sizing: border-box; } .board-write__file-list { display: grid; gap: 10px; } .board-write__file { width: 100%; padding: 1rem; border: 1px solid #d3d8e2; background: #f8fafc; font-size: 1.4rem; } .board-write__check { display: flex; gap: 8px; align-items: center; font-size: 1.5rem; font-weight: 600; color: #374151; } .board-write__check+.board-write__check { margin-top: 10px; } .board-write__check input { width: 2rem; height: 2rem; accent-color: var(--brand); } @media (max-width: 420px) { .board-write__split--3 { grid-template-columns: 1fr; } .board-write__email-row { grid-template-columns: 1fr; gap: 6px; } .board-write__email-at { display: none; } .board-write__address-row { gap: 6px; } .board-write__control--md, .board-write__control--lg { max-width: 100%; } } /* thumb6 accordion board */ .thumb6AccordionWrap { margin-top: 2.4rem; } .thumb6AccordionList ul { margin: 0; padding: 0; list-style: none; } .thumb6AccordionItem + .thumb6AccordionItem { margin-top: 2.4rem; } .thumb6AccordionCard { background: #fff; } .thumb6AccordionMediaLink { display: block; text-decoration: none; } .thumb6AccordionMedia { overflow: hidden; border-radius: 1rem; background: #eef1f5; } .thumb6AccordionMedia img { display: block; width: 100%; aspect-ratio: 1.5 / 1; object-fit: cover; } .thumb6AccordionMeta { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.2rem 0 0; } .thumb6AccordionText { flex: 1; min-width: 0; } .thumb6AccordionTitle { display: block; color: #111; font-size: 1.6rem; font-weight: 700; line-height: 1.4; text-decoration: none; word-break: keep-all; } .thumb6AccordionDate { margin-top: 0.8rem; color: #7a8699; font-size: 1.3rem; line-height: 1.5; } .thumb6AccordionBtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; flex: none; min-width: 8.8rem; height: 3.6rem; padding: 0 1.2rem; border: 1px solid #d8dde6; border-radius: 2.4rem; background: #fff; color: #111; font-size: 1.4rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; } .thumb6AccordionBtn::after { content: ""; display: block; width: 1.8rem; height: 1.8rem; background-image: url(/images/common/i-plus-toggle.svg); background-repeat: no-repeat; background-position: center center; background-size: 1.4rem; } .thumb6AccordionBtn[aria-expanded="true"]::after { background-image: url(/images/common/i-minus-toggle.svg); } .thumb6AccordionDetail { padding-top: 1.2rem; } .thumb6AccordionDesc { margin: 0; padding: 1.6rem; border: 1px solid #dfe5ef; border-radius: 1.2rem; background: #f7f9fc; color: #334155; font-size: 1.4rem; line-height: 1.7; word-break: keep-all; }